Vývoj webů: Jednoduše a rychle

Transcript

1. Vývoj webu Jednoduše a rychle @alesroubicek #saboacademy
4. BACK- END
5. FRONT- END
6. Frameworky
7. Frameworky • Nutí nevhodnou strukturu, která ulehčuje orientaci frameworkům, ne lidem • Nejste ten, kdo řídí, jak se věci mají chovat, kdy se má co dít • Přenecháváte důležitá architektonická rozhodnutí na někom, kdo nezná váš problém.
8. rails new
10. Kompilátory
11. Kompilátory • Přidávají další křehkou část do systému • Přidávají latence (dlouhá doba kompilace/zpětné vazby) • Zmenšují hiring pool
12. Závislosti
13. npx create-react-app
14. % cd node_modules/ % echo */ | wc 1 1048 15247
15. 1048 závislostí a to jste ještě ani nezačali!
17. Nástroje, které ztratily svou užitečnost
19. jQuery • Rozdíly v implementaci DOM • Animace • Šablony • Pluginy
21. Čím nahradit jQuery? • Rozdíly v implementaci DOM • browsery rozdíly srovnaly: ACID Test, document.querySelector(), fetch(), addEventListener() • Animace • CSS Animace, AnimationWorklet • Šablony • <template>, lit-html (a spol.) • Pluginy • Web Components
22. Rx • Reaktivní streamy • DSL pro jejich kombinaci pomocí Data flow
24. Problémy Rx • Nepoužívá se jako DSL, ale jako common abstrakce přes všechny vrstvy aplikace • Business logika je rozházená do asynchronních kousků a zpětně se blbě rozmotává • Blbě se debuguju • Callstack hell • GC pressure
25. Čím nahradit Rx? • Často stačí await/async a AsyncIterator • Atom (@thi.ng/atom) • Používat jako DSL na UI vrstvě: Data Flow dotazy, které krotí různé async přístupy na jednom místě
26. Angular • Obousměrný data binding • HTML compiler • Service Locator • Abstrakce data layer • J2EE pro Frontend (v2+)
28. Čím nahradit Angular? • Obousměrný data binding • view = f(data) • HTML compiler • HTML5, Web Components • Service Locator • Dependency injection, ESM • Abstrakce data layer • fetch()
29. Ember • Railsy pro frontend
31. React • Umožňuje funkcionální přístup k tvorbě UI view = f(data) • Komponentový model • JSX - skoro jako HTML, relativně snadný vstup pro kodéry, co ho znají • VirtualDOM • Virtuální stroj pro UI (různé cíle tenderu) • Ekosystém komponent
33. Problémy Reactu • Lidé nepoužívají view = f(data) • Stav je rozházený do asynchronních kousků • Nízká kvalita komponent • Nutnost kompilace • Netriviální setup, aby se dalo něco tvořit • Obrovské a pomalé bundly
34. Čím nahradit React? • Umožňuje funkcionální přístup k tvorbě UI view = f(data) • Preact, Web Components (LitElement) • VirtualDOM • Reconciliation na úrovni dat (Persistent Data Structures) • Virtuální stroj pro UI (různé cíle renderu) • PWA, Flutter, SwiftUI
35. Webpack • Bundlování aplikací pro optimální distribuci na HTTP 1.x • Snadný import assetů z JS kódu • Mapy assetů • Hashování pro cache boosting • Vše se dá konfigurovat nebo existují pluginy
37. Problémy Webpacku • Superkomplexní konfigurace • Máme tu HTTP 3! • Velké bundly • Pomalá kompilace • Enabluje velice špatné přístupy
38. Čím nahradit Webpack? • esbuild • Snowpack • Skypack • Packup (DENO)
39. Jednoduše a rychle • Začněte v browseru v jednom HTML souboru • Refactoring, Inversion of Control, Micro-aplikace • Používejte nativní prvky platformy • Nástroje (a komplikace) přidávejte až když je opravdu potřebujete a užitečnost > náklady • Nere-implementujte browser v browseru
40. Jednoduše a rychle • https://www.rarous.net/weblog/ • https://www.youtube.com/c/TopMonksCZ