Reading this slides?
There is a documentation for that!
Go read it on Github!
INTRO LECTEUR
Brace yourself
Days Hours Minutes SecondsCOUNTDOWN
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
Reusability
Custom Elements
CUSTOM ELEMENTS
Shadow DOM
SHADOW DOM
ES Modules
ES MODULES
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
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 toast Toast
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
Object.observed removed 2016 TC39 Observable proposal stuck since 2017 WHATWG/DOM no implementers interest RxJS ~30kB minified.
Typings
You don't need typescript!
You don't need TS
You don't need TS
VS Code
Tooling
@open-wc/karma-esm
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
dev.to/noelmace
noelmace/slides-modern-vanilla
