Reading this slides?

There is a documentation for that!

Go read it on Github!

INTRO LECTEUR

Brace yourself

Days Hours Minutes Seconds
COUNTDOWN

Disclaimer

Any resemblance to existing TV Shows, books or real persons, living or dead, is purely coincidental.

You don't need to worry about spoilers...

DISCLAIMER

Map of Websteros

🗺️ BIENVENUE A WEBSTEROS histoire la raison d'être de nos royaumes ☮️ batailles / ⚔️ paix / alliances ⚠️ peuples 🗽 libres / non-alignés ☀️ Terres ensoleillées 🏝️ Terres isolées ❄️ nord ⚛️ réactif 🧱 au dela du 🕸️ Web ⚔️ guerre entre 👑 royaumes maintenir ☮️ paix
There is no war!

Vanilla Logos

🍦 LOGOS Nombreuses façons de nous rejoindre 📕 Def. 🍦 Vanilla Web 🕸️ 🟨 🍦Vanilla JS 🧊 Web Components 🗣️🤦‍♂️ Trop de mauvaises infos RAPPEL pour SysthoryOS

Frameworks

🛑 FRAMEWORKS 🛑

Sunny Lands

☀️ TERRES ENSOLEILLÉES

Other Frameworks

▪👑 PETITS ROYAUMES 🙇 allégeance à d'autres royaumes 👑 Gatsby & Next ➡ ⚛ React Nuxt ➡ Vue ❓ pourquoi 👨👩 les suivents

Going faster

⛵ PLUS RAPIDE ... mais seulement au début 📿 DOGMATIQUE

Order

⚔ ORDRE dogma ➡ ➕ strict / ➖ liberté 👍 Bien ...la plupart du temps...

Skycell

🌥 SKYCELL Car 📿 dogme ➡ 👮 dictature & prison 👶🍼 naissance frameworks 📿 dogmes doivent être ✅ JUSTES MAIS 📿 dogme ➕ ⏳ temps = + faux ET c'est là qu'on est en 👮 prison CAR challenger une opinion est complexe

Depts

💰 DETTE ⛑ heureusement, les frameworks aident vous créez de la 🏦 dette technique ET UN DEVELOPER PAYE TOUJOURS SES DETTES

Depts

QUENTIN ADAM CEO Clever Cloud "La dette technique: une supercherie mythologique pour galériens de l’IT"

Libraries

🛑 LIBRARIES 🛑

React

⚛ REACT RAPPEL: react frameworks 📿 opinionated rendering lib "functional" "one direction dataflow"

React branches

🌳🌳 BRANCHES 💡⚠ pas SEULEMENT le 🕸 Web - SSR (react-dom/server) - Mobile (react-native) - Desktop (proton-native) - CLI (ink) - emails (oy) - documents (reactpdf, redocx) - Even IoT & robotic 🤯 (react-hardware) ABSTRACTION 👍 ❌ PAS 🍦 VANILLA ⬅ 🕸 Web Platform ⬅ SUPER POUVOIRS

Coin Sides

TWO SIDES (valar morgulis) - a rich ecosystem - a rendering library ET SI VOUS LA COMPRENEZ MAL, VOUS MOURREZ

Do you need
a library?

Web

🕸 WEB ❓ résoud un problème LIÉ au WEB ❓ proche des STANDARDS ❓ ABSTRACTION INUTILE ❓ FACILE a REMPLACER
react
preact
redux
lit-element
jquery
📊 POIDS ❓ 2 - react-dom, x, react-redux, lit-html

Well...

UTILE ❓ JQuery 🤷‍♂️ Github, Clever Cloud

Use the platform

Carriage on fire

LIBS ❌ 🚓 conduire vos projet

K.I.S.S.

KISS

Web Components
Web Components

Web

Reusability

Custom Elements

Custom Element
Custom Elements
CUSTOM ELEMENTS

Shadow DOM

Shadow DOM
Shadow DOM
SHADOW DOM

ES Modules

ES Module
ES Modules
ES MODULES

HTML Template

HTML Template
HTML Template
HTML TEMPLATE

Browser Support

WC in React

WC in REACT ... tricks (/ boilerplate) The community is discussing some solutions (since 2016)

React in WC

REACT in WC

A Modular Web

ES Modules

Can I Use es6-module? Data on support for the es6-module feature across the major browsers from caniuse.com.

Bare specifiers

This restriction is in place so that in the future we can allow custom module loaders to give special meaning to "bare" import specifiers, like import "jquery" or import "web/crypto". For now any such imports will fail, instead of being treated as relative URLs.

Import Maps

built-in modules

BUILT-IN MODULES

KV Storage

import storage, {StorageArea} from 'std:kv-storage';

faster than localStorage API...

easier than IndexDB

closer to Map & Chromium storage API

Polyfill

Polyfill - Import

built-in elements

DECIDE

Virtual Scroller

The <virtual-scroller> will manage the rendering of its children. It will prioritize rendering things that are in the viewport and not render children that are far away, such that we are only paying as little rendering cost as possible while still allowing them to work with find-in-page, accessibility features, focus navigation, fragment URL navigation, etc.
You can add, remove, modify children of the <virtual-scroller> as you would a regular element, using DOM APIs. When the set of actually-rendered children is about to change, the <virtual-scroller> will fire a "rangechange" event with the new range of rendered children.

Switch

show toastToast

Common problems

Routing

ROUTING

PWA Helpers

pwa-helpers/router.min.js is 589 bytes only!

SSR

SSR

Puppeteer

PUPPETEER

State Management

Big BloC vs Reusability

Image from felangel/bloc

RxJS
Object.observed removed 2016 TC39 Observable proposal stuck since 2017 WHATWG/DOM no implementers interest RxJS ~30kB minified.

Typings

RxJS
You don't need typescript!

You don't need TS

You don't need TS

VS Code

Tooling

RxJS

@open-wc/karma-esm

RxJS

A song of ice...
...and fire!

🔥 F. I. R. E. 🔥

But that's another story...

Noël Macé

Noël Macé

Dev Advocado / WebDev on a hiatus

Open to job opportunities

@noel_mace
in/noelmace

@noel_mace

Github

dev.to/noelmace

Noël Macé's DEV Profile

noelmace/slides-modern-vanilla

Github
@noel_maceposs19.wof.shownoelmace/slides-modern-vanilladev.to/noelmace