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

TopMonks Caffè - Jednoduše a rychle

TopMonks Caffè - Jednoduše a rychle

Aleš Roubíček
PRO

August 03, 2021
Tweet

More Decks by Aleš Roubíček

Other Decks in Technology

Transcript

  1. Jednoduše a rychle @alesroubicek @fczbkk #topmonkscaffe

  2. None
  3. None
  4. FRONT- END

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

  6. None
  7. jQuery • Rozdíly v implementaci DOM • Animace • Šablony

    • Pluginy
  8. None
  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
  11. None
  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+)
  15. None
  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

  18. None
  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
  20. None
  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
  24. None
  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
  28. None