TopMonks Caffè - Jednoduše a rychle

Záznam přednášky: https://www.youtube.com/watch?v=Uxwtxn_OaVU

Transcript

1. Jednoduše a rychle @alesroubicek @fczbkk #topmonkscaffe
4. FRONT- END
5. Nástroje, které ztratily svou užitečnost
7. jQuery • Rozdíly v implementaci DOM • Animace • Šablony • Pluginy
9. Čí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
10. Rx • Reaktivní streamy • DSL pro jejich kombinaci pomocí Data fl ow
12. 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
13. Čí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ě
14. Angular • Obousměrný data binding • HTML compiler • Service Locator • Abstrakce data layer • J2EE pro Frontend (v2+)
16. Čím nahradit Angular? • Obousměrný data binding • view = f(data) • HTML compiler • HTML5, Web Components • Service Locator • Dependency injection, ESM • Abstrakce data layer • fetch()
17. Ember • Railsy pro frontend
19. 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
21. 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
22. Čí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
23. 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á kon fi gurovat nebo existují pluginy
25. Problémy Webpacku • Superkomplexní kon fi gurace • Máme tu HTTP 3! • Velké bundly • Pomalá kompilace • Enabluje velice špatné přístupy
26. Čím nahradit Webpack? • esbuild • Snowpack • Skypack • Packup (DENO)
27. Jednoduše a rychle • Začněte v browseru v jednom HTML souboru • Refacturujte, 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