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
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
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
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
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