Efektivní Front-end

Efektivní Front-end

428a9c6e5b151e618d4db288105bc5f3?s=128

Aleš Roubíček

June 07, 2018
Tweet

Transcript

  1. 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
  2. 6.

    Nové technologie • React Native • Progressive Web Apps •

    Accelerated Mobile Pages • GraphQL • Responsive Images • CSS Grid • Variable fonts • HTTP/2
  3. 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
  4. 14.

    PWA

  5. 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
  6. 16.
  7. 17.
  8. 18.
  9. 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
  10. 20.
  11. 21.

    Graph and Query • Když jeden screen dělá více jak

    2 dotazy na BE • Zapouzdřené komponenty • Rekurzivní tvorba dotazu
  12. 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
  13. 24.

    CSS Grid • Bootstrap 3 • floats hell • Bootstrap

    4 • flex box hell • Material Layout Grid
  14. 25.
  15. 26.
  16. 27.

    CSS Grid • Bootstrap • col-xs-12 col-sm-6 col-md-4 col-lg-3 •

    Material Layout Grid • mdc-layout-grid__cell
  17. 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 ;)
  18. 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
  19. 31.