WebMardi [2023.10.03] - Zero JS Quest. Faire sans scripts avec JavaScript

03.10.2023 - WEBMARDI YANN GOUFFON / 58 1 ZERO JS
QUEST FAIRE SANS SCRIPTS AVEC JAVASCRIPT NODE MODULES DEV JS

YANN GOUFFON 03.10.2023 - WEBMARDI ZERO JS QUEST / 58
🎂 15 ans dans le web 📰 Friand de nouveautés 📷 Photographe, randonneur, voyageur et gamer 👪 Mari et père 🐙 github.com/yago 🔗 h tt ps:/ /yago.io 2 Développeur Frontend & JavaScript @ Antistatique Yann Gou ff on

3 *J’aime les g ros bundles et je ne peux pas mentir Vous autres devs JS ne pouvez pas le nier Quand un site se char g e avec tout Firebase et une interface Three.js Vous vous sentez pousser des ailes

4 Que nous disent les chi ff res ? + 10% (vs 2021)

5 Que nous disent les chi ff res ?

10 Que nous disent les chi ff res ? NOUVEAUX FRAMEWORKS C’est votre faute !

11 Que nous disent les chi ff res ? Non, c’est ton GTM…

12 Reprenons depuis le début…

🍨 Au commencement il y avait “Vanilla” 13 Si pur…

14 <!doctype html> <html lang="fr"> <head> <! -- [...] - </head> <body> <h1>📠 Calculateur 3000</h1> <form id="calculator"> <input type="number" name="a" /> + <input type="number" name="b" /> = <span id="result">0</span> </form> <script type="application/javascript" src="calculator.js" ></script> </body> </html>

15 AVANT APRÈS

+ Très léger + Pas de Cumulative Layout Shi f (CLS) - Peu de structure - Pas de template engine 16 Vanilla en résumé

⚛ Avance rapide → 2015 React 17 Go React, Go Go !

18 import { useState } from 'react'; const App = () => { const [a, setA] = useState(0); const [b, setB] = useState(0); return ( <> <h1>📠 Calculateur 3000</h1> <form> <input type="number" onChange={e => setA(+e.target.value)} /> + <input type="number" onChange={e => setB(+e.target.value)} /> = <span>{a + b}</span> </form> </> ); }; export default App;

19 AVANT APRÈS

+ Template Engine JSX + Bonne Developer Experience (DX) - Lourd - Cumulative Layout Shi f (CLS) 20 React en résumé

⏭ Next.js entre dans le game 21 Le future, c’est Now !

22 Page Router App Router

23 $ page router export

24 import { useState } from 'react'; const Homepage = () => { const [a, setA] = useState(0); const [b, setB] = useState(0); return ( <> <h1>📠 Calculateur 3000</h1> <form> <input type="number" onChange={e => setA(+e.target.value)} /> + <input type="number" onChange={e => setB(+e.target.value)} /> = <span>{a + b}</span> </form> </> ); }; export default Homepage; ~250kB

25 AVANT APRÈS

26 $ page router serve

27 import { useState } from 'react'; const Homepage = () => { const [a, setA] = useState(0); const [b, setB] = useState(0); return ( <> <h1>📠 Calculateur 3000</h1> <form> <input type="number" onChange={e => setA(+e.target.value)} /> + <input type="number" onChange={e => setB(+e.target.value)} /> = <span>{a + b}</span> </form> </> ); }; export default Homepage; ~87kB

28 AVANT APRÈS

29 $ app router serve

30 "use client" import { useState } from 'react'; const Homepage = () => { const [a, setA] = useState(0); const [b, setB] = useState(0); return ( <> <h1>📠 Calculateur 3000</h1> <form> <input type="number" onChange={e => setA(+e.target.value)} /> + <input type="number" onChange={e => setB(+e.target.value)} /> = <span>{a + b}</span> </form> </> ); }; export default Homepage; ~82kB

31 AVANT APRÈS

+ Avantages de React + Code Spli tt ing, Incremental Static Regeneration (ISR) + Logique Server Side + Pas de Cumulative Layout Shi f (CLS) + Routeur, gestion des images, etc - Serveur Node.js - Hydration obligatoire 32 Next.js en résumé

🙋 C’est quoi l’hydration ? 33 Navigateur Framework Serveur

34 “Classic” (Re)Hydration

35 “Progressive” Rehydration

36 Code spli tt ing

37 Island Architecture

💽 Révision de l’approche avec Remix 38 Je connais les standards

39

40 import { useState } from 'react'; import { Scripts } from "@remix-run/react"; const App = () => { const [a, setA] = useState(0); const [b, setB] = useState(0); return ( <> <h1>📠 Calculateur 3000</h1> <form> <input type="number" onChange={e => setA(+e.target.value)} /> + <input type="number" onChange={e => setB(+e.target.value)} /> = <span>{a + b}</span> </form> <Scripts/> </> ); }; export default App; ~75kB

41 AVANT APRÈS

42 import { useActionData } from '@remix-run/react'; export const action = async ({ request }) => { const body = await request.formData(); return { a: body.get('a'), b: body.get('b'), result: +body.get('a') + +body.get('b'), }; }; const App = () => { const data = useActionData(); return ( <> <h1>📠 Calculateur 3000</h1> <form method="post"> <input type="number" name="a" value={data?.a} /> + <input type="number" name="b" value={data?.b} /> = <span id="result">{data?.result ?? 0}</span> <input type="submit" style={{ display: 'none' }} /> </form> </> ); }; export default App;

43 AVANT APRÈS

+ Avantages de React + Basé sur les Standards du Web + Logique Server Side + Pas de Cumulative Layout Shi f (CLS) + Code Spli tt ing + Hydration optionnelle - Serveur Node.js - Seulement pour des applications 44 Remix en résumé

🧑🚀 L’apogée du “statique” avec Astro 45 I believe I can McFly !

46

47 -- - import Calculator from '../components/Calculator'; import '../styles/globals.css'; -- - <!doctype html> <html lang="fr"> <head> <! -- [...] - </head> <body> <h1>📠 Calculateur 3000</h1> <Calculator client:visible /> </body> </html> ~16kB

48 AVANT APRÈS

49 -- - import '../styles/globals.css'; -- - <!doctype html> <html lang="fr"> <head> <! -- [...] - </head> <body> <h1>📠 Calculateur 3000</h1> <form x-data="{ a: 0, b: 0 }"> <input type="number" @keyup="a = $event.target.value" /> + <input type="number" @keyup="b = $event.target.value" /> = <span x-text="+a + +b"></span> </form> <script> import Alpine from 'alpinejs'; Alpine.start(); </script> </body> </html> ~17kB

50 AVANT APRÈS

+ Template engine JSX + Island architecture + Framework agnostic + Code Spli tt ing - Seulement pour des sites de contenu 51 Astro en résumé

🧑🏫 Ce qu’il faut retenir 52 JavaScript is the new PHP Marty ! Oh boy…

JavaScript est indispensable pour l’interactivité non-standard 53

Ne pas considérer les connexions rapides et les CPUs puissants comme acquis 54

Définir un budget et choisir prudemment ses dépendances 55

Préférer l’hydration optionnelle et l’island architecture 56

→ Cost of JavaScript 2023 → pa tt erns.dev → Web Almanac 2022 - JS 57 Resources

58 Merci ! 💛 JS Community

WebMardi [2023.10.03] - Zero JS Quest. Faire sa...

WebMardi [2023.10.03] - Zero JS Quest. Faire sans scripts avec JavaScript

More Decks by Yago

Other Decks in Technology

Featured

Transcript