Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vývoj webů: Jednoduše a rychle

Vývoj webů: Jednoduše a rychle

Aleš Roubíček

November 09, 2021
Tweet

More Decks by Aleš Roubíček

Other Decks in Technology

Transcript

  1. 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.
  2. 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
  3. Čí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
  4. 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
  5. Čí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ě
  6. Angular • Obousměrný data binding • HTML compiler • Service

    Locator • Abstrakce data layer • J2EE pro Frontend (v2+)
  7. Čím nahradit Angular? • Obousměrný data binding • view =

    f(data) • HTML compiler • HTML5, Web Components • Service Locator • Dependency injection, ESM • Abstrakce data layer • fetch()
  8. 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
  9. 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
  10. Čí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
  11. 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
  12. Problémy Webpacku • Superkomplexní konfigurace • Máme tu HTTP 3!

    • Velké bundly • Pomalá kompilace • Enabluje velice špatné přístupy
  13. 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