Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Efektivní Front-end

Efektivní Front-end

Aleš Roubíček
PRO

June 07, 2018
Tweet

More Decks by Aleš Roubíček

Other Decks in Programming

Transcript

  1. Efektivní Front-end @alesroubicek #TopMonksCaffe

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

    webu
  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
  4. Nově tu máme 10% skupinu výhradně mobilních uživatelů webu

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

  6. Nové technologie • React Native • Progressive Web Apps •

    Accelerated Mobile Pages • GraphQL • Responsive Images • CSS Grid • Variable fonts • HTTP/2
  7. Nová media • Dapps • Smart * • “Native” apps

  8. Nové nástroje • Sketch • Avocode • Invision Studio •

    Material Gallery • Adobe XD
  9. Noví lidé • cca 30% růst programátorských pozic • spousta

    talentů • kdo je vzdělává?
  10. Povedzte Kefalín, čo vy si predstavujete pod takým slovom efektívny?

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

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

    efektní
  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
  14. PWA

  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
  16. None
  17. None
  18. None
  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
  20. None
  21. Graph and Query • Když jeden screen dělá více jak

    2 dotazy na BE • Zapouzdřené komponenty • Rekurzivní tvorba dotazu
  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
  23. Responsivní obrázky • srcset • @media queries • Client Hints

    • Cloudinary
  24. CSS Grid • Bootstrap 3 • floats hell • Bootstrap

    4 • flex box hell • Material Layout Grid
  25. None
  26. None
  27. CSS Grid • Bootstrap • col-xs-12 col-sm-6 col-md-4 col-lg-3 •

    Material Layout Grid • mdc-layout-grid__cell
  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 ;)
  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
  30. blockstars. 16. června - Paralelní Polis

  31. None