Jednoduše a rychle @alesroubicek @fczbkk #topmonkscaffe 

No content

No content

FRONT- END 

Nástroje, které ztratily svou užitečnost 

No content

jQuery • Rozdíly v implementaci DOM • Animace • Šablony • Pluginy 

No content

Čí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í Data fl ow 

No content

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 

Čí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+) 

No content

Čí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 

No content

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 

No content

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 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 

No content

Problémy Webpacku • Superkomplexní kon fi gurace • 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ž je opravdu potřebujete a užitečnost > náklady • Nere-implementujte browser v browseru 

No content