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

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

    View Slide

  2. View Slide

  3. View Slide

  4. FRONT-


    END

    View Slide

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

    View Slide

  6. View Slide

  7. jQuery
    • Rozdíly v implementaci DOM


    • Animace


    • Šablony


    • Pluginy

    View Slide

  8. View Slide

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

  10. Rx
    • Reaktivní streamy


    • DSL pro jejich kombinaci pomocí Data
    fl
    ow

    View Slide

  11. View Slide

  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

    View Slide

  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ě

    View Slide

  14. Angular
    • Obousměrný data binding


    • HTML compiler


    • Service Locator


    • Abstrakce data layer


    • J2EE pro Frontend (v2+)

    View Slide

  15. View Slide

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

    View Slide

  17. Ember
    • Railsy pro frontend

    View Slide

  18. View Slide

  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

    View Slide

  20. View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  24. View Slide

  25. Problémy Webpacku
    • Superkomplexní kon
    fi
    gurace


    • Máme tu HTTP 3!


    • Velké bundly


    • Pomalá kompilace


    • Enabluje velice špatné přístupy

    View Slide

  26. Čím nahradit Webpack?
    • esbuild


    • Snowpack


    • Skypack


    • Packup (DENO)

    View Slide

  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

    View Slide

  28. View Slide