Save 37% off PRO during our Black Friday Sale! »

Retours sur Vue.js Amasterdam

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

Ee938a042678a27c04ce01aef47b8e6f?s=128

FranckAbgrall

March 21, 2019
Tweet

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

  52. None
  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_