Retours sur Vue.js Amasterdam

Nous avons eu la chance de participer à Vue.js Amsterdam, la conférence la plus importante en Europe pour la communauté des développeurs Vue.js 💚 Ce fut 3 jours durant lesquels nous avons pu entendre des speakers tels qu'Evan You (créateur de Vue.js), Sebastien Chopin (créateur de Nuxt.js), des membres de la core team Vue.js, Webpack et bien d'autres...
Nous vous proposons un tour d'horizon de ce que nous avons pu voir durant ces 3 jours.
Au programme :
- Vue.js aujourd'hui
- Le futur de Vue.js (v3)
- L'écosystème Vue.js en 2019
- Vue.js et optimisations

Transcript

1. Retours sur Vue.js Amsterdam 2019
2. Qui est qui ? @FranckAbgrall @_bruno_b_
3. Conférence autour des technos Vue.js (et du développement frontend) • 3 jours de talks, 1 seule track • +1000 participants • Des speakers internationaux dont ◦ Evan You (créateur de Vue.js) ◦ Sébastien Chopin (créateur de Nuxt.js) ◦ Sean Larkin (Webpack core team) ◦ Des membres des équipes de dev du core de Vue, Nuxt, ... Vue.js Amsterdam
4. © ZENIKA 2017 All rights reserved - Proprietary & confidential
5. Vue.js aujourd’hui
6. 2014 2016 2019 1.0 2.0 2.6 Vue.js aujourd’hui
7. 2014 2016 2019 1.0 2.0 2.6 06/2018 Vue.js aujourd’hui
8. Vue.js aujourd’hui
9. Vue.js aujourd’hui
10. • Améliorations et nouvelles fonctionnalités pour les slots (v-slot) Vue.js aujourd’hui Les nouveautés de la 2.6
11. Hello Nantes.js Some news from VueAmsterdam Tooltip Component
12. Vue.js aujourd’hui Les nouveautés de la 2.6
13. Tooltip Component Hello Nantes.js Some news from VueAmsterdam
14. Tooltip Component Hello Nantes.js Some news from VueAmsterdam
15. Hello Nantes.js Some news from VueAmsterdam
16. • Améliorations et nouvelles fonctionnalités pour les slots (v-slot) • Server prefetch (SSR) Vue.js aujourd’hui Les nouveautés de la 2.6
17. Vue.js aujourd’hui Les nouveautés de la 2.6
18. • Améliorations et nouvelles fonctionnalités pour les slots (v-slot) • Server prefetch (SSR) • Arguments dynamiques pour les directives Vue.js aujourd’hui Les nouveautés de la 2.6
19. Vue.js aujourd’hui Les nouveautés de la 2.6
20. • Vue.js ◦ Réécriture du core en typescript ◦ Amélioration du mécanisme de détection de changements ◦ Optimisations à venir (+ petit et + rapide) • Vuex ◦ Fusion actions/mutations ◦ Meilleure intégration de typescript pour Vuex Vue.js demain Vue.js 3
21. Et ça sort quand ? Vue.js demain Vue.js 3
22. Cas d’utilisation: L’Oréal • Contexte: ◦ L’Oréal dispose d’environ 3000 sites, répartis sur le monde entier avec des besoins et des contraintes divers ◦ Code source très disparate et inmaintenable • Besoins: remplacer ces sites développés sur des technos différentes par une base commune afin de rationaliser • Vue.js est apparu comme la solution pour répondre aux besoins: ◦ Avec des devs venant de différents pays, avec des niveaux très différents => besoin de simplicité ◦ Accessibilité, SEO, être mobile first, performant, no-js (très peu de bande passante dans certains endroits)
23. Cas d’utilisation: Qui d’autre utilise Vue.js ?
24. Vue.js et son écosystème
25. • Outil présent quasiment depuis le début • S’est enrichi au fur et à mesure de nouvelles fonctionnalités ◦ Permet d’initialiser vos projets à partir de templates ◦ Permet aussi de construire des libs ! ▪ https://speakerdeck.com/linusborg/building-components-with-vue-cli-3 • Vue UI permet de gérer vos projets Vue via une IHM Web ◦ gestion des plugins, des dépendances ◦ configuration du projet Vue CLI L’outil de base pour bien commencer !! Mais pas que...
26. Vue CLI L’outil de base pour bien commencer !! Mais pas que...
27. “The Vue.js framework for universal applications” ◦ Server-side rendered ◦ Static site generation ◦ Single Page App Nuxt.js
28. • Pour les discussions sur le futur de Nuxt: https://github.com/nuxt/rfcs • Support de typescript • Smart prefetching ◦ code splitting pour les pages liées avec <nuxt-link> ◦ application + performante • Autocomplete VS Code • Amélioration des bundles SSR ◦ applications + light (réduction de la taille des gzip) • Auto-détection des ”modern bundles” ◦ permet de supprimer les polyfills pour les navigateurs les + récents • Hot Module Replacement (HMR) pour la partie store Nuxt.js - v2.4
29. Et la v2.5 est sorti aujourd’hui !!!
30. Nuxt.js - v3
31. <template> <div> <h1>Blog posts</ h1> <p v-if="$isFetching ">Fetching posts...</ p> <ul v-else> <li v-for="post of posts" :key="post.id"> <n-link :to="`/posts/${post.id}`">{{ post.title }}</n-link> </li> </ul> </div> </template> <script> export default { data () { return { posts : [] } }, async fetch () { this.posts = await fetch('https://jsonplaceholder.typicode.com/posts ') . then((res) => res.json()) } } </script> Nuxt.js - v3
32. Nuxt.js - Modules
33. Nuxt.js - Modules
34. Nuxt.js - Modules: Commandes (expérimental)
35. • Electron encore et toujours… ◦ vue-router: OK ◦ vuex ? vuex-electron ! • NW.JS ◦ Beaucoup de points communs avec Electron ◦ vue-router et vuex: OK ◦ Gros binaire • Vuido ◦ Pas possible d’utiliser vue-cli ◦ Pas de HTML, ni CSS (mode Widget avec du “XML”) ◦ Binaire plus petit que les autres Et sur le desktop ? rien n’émerge vraiment...
36. CodeSandbox.io: développement en ligne
37. Vue.js et optimisations
38. Vue.js et optimisations
39. Make your vue app faster by being lazy ! Vue.js et optimisations
40. Vue.js et optimisations
41. Vue.js et optimisations Make your vue app faster by being lazy !
42. Vue.js et optimisations Make your vue app faster by being lazy ! (Not too much, use prefetch)
43. Configuré par défaut avec vue-cli 3 Vue.js et optimisations
44. Vue.js et optimisations Utiliser le lazyload au maximum
45. Vue.js et optimisations
46. Vue.js et optimisations
47. Webpack bundle analyser Vue.js et optimisations
48. Lighthouse Vue.js et optimisations
49. Lighthouse : intégration avec la CI Vue.js et optimisations
50. Vue.js et optimisations Utiliser l’outil coverage (chrome devtools)
51. Vue.js et son “financement” Soutenons-les ! https://opencollective.com/nuxtjs https://www.patreon.com/evanyou
53. Merci ! (et longue vie à Vue.js ) Article de blog sur le sujet : https://bit.ly/2YbkLMl Slides / Vidéos : github.com/bbonnin/conference-slides @FranckAbgrall @_bruno_b_