Query je mrtvé, to jsme všichni slyšeli už několikrát, jaká je ale cesta přechodu na novější technologie v běžícím projektu? Ukážu vám, jak jsme vyzkoušeli populární Vue.js, který jsme nakonec s řadou dalších inovací v rámci frontendu dostali do produkce na velkém projektu.

1. Cesta k frontendové revoluci na běžícím projektu v podání
Vue.js
FB facebook.com/peckadesign TW @peckadesignVue.js revolution Jan Kadeřábek

2. Motivace
FB facebook.com/peckadesign TW peckadesignJan Kadeřábek
• NE! ruční manipulaci s DOMem
• deklarativně určit co a jak
Vue.js revolution

3. Chceme Vue.js
FB facebook.com/peckadesign TW @peckadesignJan Kadeřábek
• jednoduché na naučení
• široká opensource komunita
• nepotřebujeme rovnou SPA
Vue.js revolution

5. Komponenty
FB facebook.com/peckadesign TW peckadesignJan Kadeřábek
• chceme modulární kód
• členit Vue komponenty
• znovupoužívat a oddělovat logiku
Vue.js revolution

7. Nasadíme Webpack
FB facebook.com/peckadesign TW @peckadesignJan KadeřábekVue.js revolution

8. FB facebook.com/peckadesign TW peckadesignJan KadeřábekVue.js revolution

9. Verzování bundlů
FB facebook.com/peckadesign TW peckadesignJan Kadeřábek
• manifest.json
• přidá unikátní hash
• Latte makro pro načtení bundlu
Vue.js revolution

10. Dev server
FB facebook.com/peckadesign TW peckadesignJan Kadeřábek
• ruční buildování je otravné
• build při změně
• hot reloading
Vue.js revolution

11. Bundly jsou moc velké
FB facebook.com/peckadesign TW peckadesignJan Kadeřábek
• každý bundle si nese celé Vue a je pak “moc” velký (~150 kB)
• nešlo by to rozdělit?
Vue.js revolution

13. Přidáme Typescript
FB facebook.com/peckadesign TW @peckadesignJan KadeřábekVue.js revolution

14. Typescript
FB facebook.com/peckadesign TW peckadesignJan Kadeřábek
• datové struktury
• validace z API
• kontrola při buildu
• jednodušší programování
Vue.js revolution

17. Závěr
FB facebook.com/peckadesign TW @peckadesignJan Kadeřábek
• postupná integrace
• využití na specifické případy
• stojí to za to
Vue.js revolution

18. FB facebook.com/peckadesign TW @peckadesign
Otázky?
Jan KadeřábekVue.js revolution