Efektivní Front-end

Kam dál?

https://samnewman.io/patterns/architectural/bff/
https://developers.google.com/web/progressive-web-apps/
https://medium.com/p/79b7b118ddac
http://blog.cognitect.com/blog/2014/7/22/transit
https://cloudinary.com/
https://material.io/design/layout/responsive-layout-grid.html
https://www.thoughtworks.com/insights/blog/choosing-right-mobile-development-tools-part-two

Transcript

1. Efektivní Front-end
   @alesroubicek
   #TopMonksCaffe
   

   View Slide

2. Před třemi lety jsem tu měl přednášku o mobile
   friendly webu
   

   View Slide

3. TOPMONKS INSIGHT
   Od té doby se toho dost změnilo
   Například jsem získal nové zkušenosti na těchto projektech a
   zjistil a co funguje a co ne
   

   View Slide

4. Nově tu máme 10% skupinu
   výhradně mobilních uživatelů
   webu
   

   View Slide

5. A přicházejí zcela nová zařízení, která přináší nové výzvy
   

   View Slide

6. Nové technologie
   • React Native
   • Progressive Web Apps
   • Accelerated Mobile Pages
   • GraphQL
   • Responsive Images
   • CSS Grid
   • Variable fonts
   • HTTP/2
   

   View Slide

7. Nová media
   • Dapps
   • Smart *
   • “Native” apps
   

   View Slide

8. Nové nástroje
   • Sketch
   • Avocode
   • Invision Studio
   • Material Gallery
   • Adobe XD
   

   View Slide

9. Noví lidé
   • cca 30% růst programátorských pozic
   • spousta talentů
   • kdo je vzdělává?
   

   View Slide

10. Povedzte Kefalín, čo vy si predstavujete pod takým slovom efektívny?
    

    View Slide

11. Efektivní
    • produktivní
    • účinný
    • účelný
    • úsporný
    • efektní
    

    View Slide

12. Efektivní
    • produktivní
    • účinný
    • účelný
    • úsporný
    • efektní
    

    View Slide

13. Efektivní front-end
    • dostatečně rychlý
    • uživatelsky přívětivý
    • responsivní
    • úsporný na data
    • snadný na údržbu a rozvoj
    • vhodně zvolené technologie/nástroje
    

    View Slide

14. PWA
    

    View Slide

15. Progressive Web Apps
    • Nativně vypadající/chovající se webové aplikace
    • Rychlá odezva na uživatelské podněty
    • Rapidní vývoj a deployment
    • Ideální na prototypy a interní aplikace
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. Back-end for Front-end
    • BE ušitý na míru pro konkrétní FE
    • Vhodný doplněk Microservice Architecture
    • BE si píše FE team
    • Vhodné pro velké organizace s dedikovanými
    teamy
    

    View Slide

20. View Slide

21. Graph and Query
    • Když jeden screen dělá více jak 2 dotazy na BE
    • Zapouzdřené komponenty
    • Rekurzivní tvorba dotazu
    

    View Slide

22. Transit
    • knihovna pro přenos rozšiřitelných typů dat
    • enkóduje data do formátu JSON (nebo do MsgPack)
    • vysoká rychlost parsování v browserech
    • typová bezpečnost bez ztráty informací a
    přesnosti
    

    View Slide

23. Responsivní obrázky
    • srcset
    • @media queries
    • Client Hints
    • Cloudinary
    

    View Slide

24. CSS Grid
    • Bootstrap 3
    • floats hell
    • Bootstrap 4
    • flex box hell
    • Material Layout Grid
    

    View Slide

25. View Slide

26. View Slide

27. CSS Grid
    • Bootstrap
    • col-xs-12 col-sm-6 col-md-4 col-lg-3
    • Material Layout Grid
    • mdc-layout-grid__cell
    

    View Slide

28. Závěrem
    • Základem je dobrý team
    • Bez dobrého BE zázraky na FE neuděláte
    • Dobré nástroje jsou enablers; ne garance úspěchu
    • Učte se a praktikujte
    • Držte se dobrých rad zkušenějších ;)
    

    View Slide

29. Kam dál?
    • https://samnewman.io/patterns/architectural/bff/
    • https://developers.google.com/web/progressive-web-apps/
    • https://medium.com/p/79b7b118ddac
    • http://blog.cognitect.com/blog/2014/7/22/transit
    • https://cloudinary.com/
    • https://material.io/design/layout/responsive-layout-grid.html
    • https://www.thoughtworks.com/insights/blog/choosing-right-
    mobile-development-tools-part-two
    

    View Slide

30. blockstars.
    16. června - Paralelní Polis
    

    View Slide

31. View Slide