Záznam přednášky: https://www.youtube.com/watch?v=Uxwtxn_OaVU
Jednoduše a rychle@alesroubicek @fczbkk#topmonkscaffe
View Slide
FRONT-END
Nástroje, které ztratilysvou užitečnost
jQuery• Rozdíly v implementaci DOM• Animace• Šablony• Pluginy
Čím nahradit jQuery?• Rozdíly v implementaci DOM• browsery rozdíly srovnaly: ACID Test, document.querySelector(),fetch(), addEventListener()• Animace• CSS Animace, AnimationWorklet• Šablony• , lit-html (a spol.)• Pluginy• Web Components
Rx• Reaktivní streamy• DSL pro jejich kombinaci pomocí Dataflow
Problémy Rx• Nepoužívá se jako DSL, ale jako common abstrakcepřes všechny vrstvy aplikace• Business logika je rozházená do asynchronníchkousků a zpětně se blbě rozmotává• Blbě se debuguju• Callstack hell• GC pressure
Čí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ě
Angular• Obousměrný data binding• HTML compiler• Service Locator• Abstrakce data layer• J2EE pro Frontend (v2+)
Čím nahradit Angular?• Obousměrný data binding• view = f(data)• HTML compiler• HTML5, Web Components• Service Locator• Dependency injection, ESM• Abstrakce data layer• fetch()
Ember• Railsy pro frontend
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
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
Čí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
Webpack• Bundlování aplikací pro optimální distribuci naHTTP 1.x• Snadný import assetů z JS kódu• Mapy assetů• Hashování pro cache boosting• Vše se dá konfigurovat nebo existují pluginy
Problémy Webpacku• Superkomplexní konfigurace• Máme tu HTTP 3!• Velké bundly• Pomalá kompilace• Enabluje velice špatné přístupy
Čím nahradit Webpack?• esbuild• Snowpack• Skypack• Packup (DENO)
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ž jeopravdu potřebujete a užitečnost > náklady• Nere-implementujte browser v browseru