$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. View Slide

  3. View Slide

  4. BACK-
    END

    View Slide

  5. FRONT-
    END

    View Slide

  6. Frameworky

    View Slide

  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.

    View Slide

  8. rails new

    View Slide

  9. View Slide

  10. Kompilátory

    View Slide

  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

    View Slide

  12. Závislosti

    View Slide

  13. npx create-react-app

    View Slide

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

    View Slide

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

    View Slide

  16. View Slide

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

    View Slide

  18. View Slide

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

    View Slide

  20. View Slide

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

    View Slide

  22. Rx
    • Reaktivní streamy
    • DSL pro jejich kombinaci pomocí Data flow

    View Slide

  23. View Slide

  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

    View Slide

  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ě

    View Slide

  26. Angular
    • Obousměrný data binding
    • HTML compiler
    • Service Locator
    • Abstrakce data layer
    • J2EE pro Frontend (v2+)

    View Slide

  27. View Slide

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

    View Slide

  29. Ember
    • Railsy pro frontend

    View Slide

  30. View Slide

  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

    View Slide

  32. View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  36. View Slide

  37. Problémy Webpacku
    • Superkomplexní konfigurace
    • Máme tu HTTP 3!
    • Velké bundly
    • Pomalá kompilace
    • Enabluje velice špatné přístupy

    View Slide

  38. Čím nahradit Webpack?
    • esbuild
    • Snowpack
    • Skypack
    • Packup (DENO)

    View Slide

  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

    View Slide

  40. Jednoduše a rychle
    • https://www.rarous.net/weblog/
    • https://www.youtube.com/c/TopMonksCZ

    View Slide