Not every architecture is a SPA.

Many techniques are not exclusivity of frameworks.

Standards are real and are being adopted by browsers and other environments.

Master the language and you will learn frameworks as a consequence.

Understand the code being implemented by NPM packages.

I want to build a simple presentation tool, taking advantage of:

ES modules are becoming a reality!

Browser are supporting them, Webpack already does that, Node.js is coming (it's behind flag ATM).

import { utility } from './module.js';

<script src="module.js" type="module"></script>

...and remember CSS already supports @import statement!

Hash-based routing it's quite easy to implement for simple use case.

window.location.hash = '/route';

window.addEventListener('hashchange', evt => ...);

Also History API gives us a way more powerful approach, but it is a bit more complicated to implement.

CSS transition, CSS Animations combined with DOM styles/classes manipulations helps us to quickly achieve smooth animations

const element = document.querySelector(selector);

element.classList.toggle('my-transition-class');

also the Web Animations API provides a JS first approach, but I leave that topic to Makbeth 😉

The Web Components v1 specification lets you write custom HTML elements that works out-of-the-box in many browsers nowadays

class Slide extends HTMLElement { ... };

customElements.define('regular-slide', Slide);

It's a topic I've often covered in the last years, check my previous talks 😎.

Keyboard navigation it's easy with regular events.

🎮 What about using a gamepad? 🎮 Luckily there is an (experimental) API for that and wrapping it in a Web Components makes it easier to implement.

const gamepad = document.querySelector('gamepad-api');

gamepad.addEventListener('button', evt => { 
  // navigation code
});

Watch out! Gamepad API its inconsistent between browser right now! 😵

The <template> tag and ES template strings & tagged templates are great tools to define a template systems similar to the ones of many libraries

const date = new Date(); 
const tmpl = `<p><b>Example:</b>
  Today is <time>${date.toLocaleString()}</time></p>`;

data-binding not included! Did you ever checked out the ES Proxies ?

Small things like .map() and spread operators, which help us to quickly solves day-by-day issues like:

const steps = [...document.querySelectorAll(selector)]
                .map(e => e.id);

really, just look at the network panel from dev tools!

We will always need build tools even in the future.

🤖 Just think of 🤖

🙏 Thanks! 🙏