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
PRO

November 09, 2021
Tweet

More Decks by Aleš Roubíček

Other Decks in Technology

Transcript

  1. Vývoj webu Jednoduše a rychle @alesroubicek #saboacademy

  2. None
  3. None
  4. BACK- END

  5. FRONT- END

  6. Frameworky

  7. 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.
  8. rails new

  9. None
  10. Kompilátory

  11. 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
  12. Závislosti

  13. npx create-react-app

  14. % cd node_modules/ % echo */ | wc 1 1048

    15247
  15. 1048 závislostí a to jste ještě ani nezačali!

  16. None
  17. Nástroje, které ztratily svou užitečnost

  18. None
  19. jQuery • Rozdíly v implementaci DOM • Animace • Šablony

    • Pluginy
  20. None
  21. Čí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
  22. Rx • Reaktivní streamy • DSL pro jejich kombinaci pomocí

    Data flow
  23. None
  24. 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
  25. Čí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ě
  26. Angular • Obousměrný data binding • HTML compiler • Service

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

    f(data) • HTML compiler • HTML5, Web Components • Service Locator • Dependency injection, ESM • Abstrakce data layer • fetch()
  29. Ember • Railsy pro frontend

  30. None
  31. 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
  32. None
  33. 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
  34. Čí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
  35. 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
  36. None
  37. Problémy Webpacku • Superkomplexní konfigurace • Máme tu HTTP 3!

    • Velké bundly • Pomalá kompilace • Enabluje velice špatné přístupy
  38. Čím nahradit Webpack? • esbuild • Snowpack • Skypack •

    Packup (DENO)
  39. 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
  40. Jednoduše a rychle • https://www.rarous.net/weblog/ • https://www.youtube.com/c/TopMonksCZ