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. 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
  2. 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
  3. 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
  4. 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
  5. 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)
  6. 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...
  7. 27.
  8. 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
  9. 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
  10. 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...
  11. 42.

    Vue.js et optimisations Make your vue app faster by being

    lazy ! (Not too much, use prefetch)
  12. 52.
  13. 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_