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

Efektivní Front-end

Efektivní Front-end

Aleš Roubíček

June 07, 2018
Tweet

More Decks by Aleš Roubíček

Other Decks in Programming

Transcript

  1. 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. Nové technologie • React Native • Progressive Web Apps •

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

  5. 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. 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
  7. Graph and Query • Když jeden screen dělá více jak

    2 dotazy na BE • Zapouzdřené komponenty • Rekurzivní tvorba dotazu
  8. 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
  9. CSS Grid • Bootstrap 3 • floats hell • Bootstrap

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

    Material Layout Grid • mdc-layout-grid__cell
  11. 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 ;)
  12. 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