Slide 1

Slide 1 text

Retours sur Vue.js Amsterdam 2019

Slide 2

Slide 2 text

Qui est qui ? @FranckAbgrall @_bruno_b_

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Vue.js aujourd’hui

Slide 6

Slide 6 text

2014 2016 2019 1.0 2.0 2.6 Vue.js aujourd’hui

Slide 7

Slide 7 text

2014 2016 2019 1.0 2.0 2.6 06/2018 Vue.js aujourd’hui

Slide 8

Slide 8 text

Vue.js aujourd’hui

Slide 9

Slide 9 text

Vue.js aujourd’hui

Slide 10

Slide 10 text

● Améliorations et nouvelles fonctionnalités pour les slots (v-slot) Vue.js aujourd’hui Les nouveautés de la 2.6

Slide 11

Slide 11 text

Hello Nantes.js Some news from VueAmsterdam Tooltip Component

Slide 12

Slide 12 text

Vue.js aujourd’hui Les nouveautés de la 2.6

Slide 13

Slide 13 text

Tooltip Component Hello Nantes.js Some news from VueAmsterdam

Slide 14

Slide 14 text

Tooltip Component Hello Nantes.js Some news from VueAmsterdam

Slide 15

Slide 15 text

Hello Nantes.js Some news from VueAmsterdam

Slide 16

Slide 16 text

● 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

Slide 17

Slide 17 text

Vue.js aujourd’hui Les nouveautés de la 2.6

Slide 18

Slide 18 text

● 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

Slide 19

Slide 19 text

Vue.js aujourd’hui Les nouveautés de la 2.6

Slide 20

Slide 20 text

● 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

Slide 21

Slide 21 text

Et ça sort quand ? Vue.js demain Vue.js 3

Slide 22

Slide 22 text

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)

Slide 23

Slide 23 text

Cas d’utilisation: Qui d’autre utilise Vue.js ?

Slide 24

Slide 24 text

Vue.js et son écosystème

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Vue CLI L’outil de base pour bien commencer !! Mais pas que...

Slide 27

Slide 27 text

“The Vue.js framework for universal applications” ○ Server-side rendered ○ Static site generation ○ Single Page App Nuxt.js

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Et la v2.5 est sorti aujourd’hui !!!

Slide 30

Slide 30 text

Nuxt.js - v3

Slide 31

Slide 31 text

Blog posts h1>

Fetching posts... p>

{{ post.title }}

export default { data () { return { posts : [] } }, async fetch () { this.posts = await fetch('https://jsonplaceholder.typicode.com/posts ') . then((res) => res.json()) } } Nuxt.js - v3

Slide 32

Slide 32 text

Nuxt.js - Modules

Slide 33

Slide 33 text

Nuxt.js - Modules

Slide 34

Slide 34 text

Nuxt.js - Modules: Commandes (expérimental)

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

CodeSandbox.io: développement en ligne

Slide 37

Slide 37 text

Vue.js et optimisations

Slide 38

Slide 38 text

Vue.js et optimisations

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Vue.js et optimisations

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Vue.js et optimisations Make your vue app faster by being lazy ! (Not too much, use prefetch)

Slide 43

Slide 43 text

Configuré par défaut avec vue-cli 3 Vue.js et optimisations

Slide 44

Slide 44 text

Vue.js et optimisations Utiliser le lazyload au maximum

Slide 45

Slide 45 text

Vue.js et optimisations

Slide 46

Slide 46 text

Vue.js et optimisations

Slide 47

Slide 47 text

Webpack bundle analyser Vue.js et optimisations

Slide 48

Slide 48 text

Lighthouse Vue.js et optimisations

Slide 49

Slide 49 text

Lighthouse : intégration avec la CI Vue.js et optimisations

Slide 50

Slide 50 text

Vue.js et optimisations Utiliser l’outil coverage (chrome devtools)

Slide 51

Slide 51 text

Vue.js et son “financement” Soutenons-les ! https://opencollective.com/nuxtjs https://www.patreon.com/evanyou

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

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_