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

neutral heroes

👨‍👨‍👧‍👦 NON-ALIGNÉS 🤷‍♂️ certains 🙇‍♂️ allégeance 👑 royaumes Nous tous 💚 aimons & 🤚 restons à distance des 👑 royaumes

Vanilla Logos

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

World Map

🌏 CARTE DU MONDE

Custom Elements

Custom Element
CUSTOM ELEMENTS

Shadow DOM

Custom Element
SHADOW DOM

ES Modules

Custom Element
ES MODULES

HTML Template

Custom Element
HTML TEMPLATE

Roots

🌳 RACINES

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

WC in React

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

React in WC

REACT in WC

Crossroad

DECIDE

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

Execution

🪓 EXECUTION ❌ Non 🕸 WEB - Limitations JQuery ⬅ ❌ 👍 DOM manipulation API ➡ querySelector and other things ❌ pas INUTILE RETROSPECTIVEMENT vous devez vous préparer à abandonner vos libs

Carriage on fire

LIBS ❌ 🚓 conduire vos projet

What you
can do!

WHAT YOU CAN DO

K.I.S.S.

KISS

Routing

ROUTING

PWA Helpers

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

SSR

SSR

Puppeteer

PUPPETEER

Working Together

K.I.S.S.

(again)

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é

Freelance WebDev Consultant & Teacher

Independent Dev Advocado 🥑 for the Web Platform

@noel_mace
in/noelmace

@noel_mace

Github

dev.to/noelmace

Noël Macé's DEV Profile

noelmace/slides-modern-vanilla

Github

Slides