TopMonks Caffè - Jednoduše a rychle

Záznam přednášky: https://www.youtube.com/watch?v=Uxwtxn_OaVU

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