Introduction à Vue 2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404520/vuejs-logo.png)
https://goo.gl/67anC7
https://goo.gl/67anC7
Un autre framework front-end...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404570/react-logo-1000-transparent.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404573/ember.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404520/vuejs-logo.png)
Vue.js
Un Framework Moderne
Orienté Composants
Versatile & Accesible
Le Framework JavaScript Progressif
Accessible aux débutants
Productif pour les plus expérimentés
Prototypes
Petits projets
Widgets
Applications Complexes
Grande échelle
<script src="https://unpkg.com/vue">
npm install vue
import Vue from 'vue'
vue-cli
npm install -g vue-cli
vue init webpack-simple my-app
cd my-app
npm install
npm run dev
Rapide
Réactivité automatique & optimisée
Virtual DOM
Propriétés calculées & cache
Réactivité
<p>{{ message }}</p>
<script>
app.message = 'Hello world.'
// Do other things
app.message = 'This is awesome!'
</script>
Réactivité
Virtual DOM
Minimiser les opérations DOM
Diffing très rapide
Moteur de rendu autre que le DOM?
Virtual DOM
Propriétés calculées
{
computed: {
currentThread () {
return this.threads.find(this.threadId)
}
}
}
Complet & Souple
Templates, JSX, Hyperscript
Routing
State management
Templates
<ul>
<li v-for="task of tasks">
<span>{{ task.text }}</span>
<a v-on:click="removeTask(task)">Delete</a>
</li>
</ul>
JSX
{
render (h) {
return <ul>
{tasks.map(task => <li>
<span>{task.text}</span>
<a onClick={removeTask(task)}>Delete</a>
</li>)}
</ul>
}
}
Routing
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '*', component: NotFound },
]
State management
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405003/flow.png)
devtools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405331/vue-devtools.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405400/vuex-devtools.gif)
Format .vue
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405332/vue-single-file-component.png)
Tout ça
Dans moins de 30kb min+gzip
vue+vue-router+vuex = 28.11kb
jQuery = 29.41kb
angular2 hello world + tree shaking = ~50kb
Un projet
Open Source
Créé par Evan You
en 2012
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405039/evan.jpg)
Février 2014
Première version publique
Octobre 2015
Version 1.0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405084/laravel-logo-big.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405256/otwell-vuejs-tweet.png)
Septembre 2016
Version 2.0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405105/gitlab.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405106/sainsburys.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405107/nintendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405108/large_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405109/800px-Xiaomi_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405110/ENGIE_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405111/640px-Baidu.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405112/library_logos_alibabaev_large.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405113/Veolia_vector_logo.png)
Quoi de neuf
Dans la version 2.x
Performances
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405261/vue2-perf.png)
Virtual DOM
Render functions
Hyperscript
JSX
Composants fonctionnels
Compilation des templates "Ahead Of Time"
Server-Side Rendering
Rapidité du premier rendu de la page
SEO
Progressive enhancement
Progressive Web App
vue-router 2
Multiples vues nommées
Comportement du scroll customisable
Liens de routage améliorés
vuex 2
Simplification de l'API
Sous-modules emboîtés
Namespace pour les sous-modules
Actions asynchrones chainables
vue-resource
Déprécié au profil de solutions spécialisées
comme la librairie recommandé
axios
Et bien plus encore...
scoped slots
v-model pour les composants
API simplifiés
transitions améliorées
animation de listes
v-else-if
typescript typings
keep-alive conditionnel
Le changement, c'est maintenant !
github.com/vuejs/vue-migration-helper
vuejs.org/v2/guide/migration
Un projet en plein essor
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405336/vue-trend-2016.png)
Presque 40 000 stars sur GitHub
1 500 000 téléchargements npm en 2016 (+300%)
21 400 000 visites sur le site officiel
84 000 utilisateurs hebdomadaires des devtools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405337/patreon.png)
patreon.com/evanyou
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405348/tde.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405349/jsfiddle.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405350/chaitin.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405351/htmlburger.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405352/someline.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405353/juejin.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405355/trisoft.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405356/monterail.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405357/2mhost.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405358/vuejobs.png)
Roadmap
Weex : Rendu natif sur smartphone
Amélioration de la documentation pour les tests
Continuer d'améliorer l'expérience de développement
Améliorer la découverte de l'écosystème
Explorer les technologies web émergentes
VueConf 2017
conf.vuejs.org
Wrocław, Pologne, Été 2017
La première conférence Vue.js officielle !
Merci !
@akryum
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405366/twitterbird_RGB.png)
Liens utiles
@vuejs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405366/twitterbird_RGB.png)
vuejs.org
vuejs.org/guide
vuejs.org/api
github.com/vuejs/awesome-vue
forum.vuejs.org
medium.com/the-vue-point
vuejobs.com
Copy of Introduction à Vue 2
By Eduardo San Martin Morote
Copy of Introduction à Vue 2
Slides du Meetup LyonJS le 17/01/2017 https://www.meetup.com/fr-FR/LyonJS/events/236644715/ https://vuejs.org https://vuejs.org/guide https://vuejs.org/api https://github.com/vuejs/awesome-vue https://forum.vuejs.org https://medium.com/the-vue-point https://vuejobs.com https://conf.vuejs.org
- 1,625