Introduction à Vue 2

https://goo.gl/67anC7

https://goo.gl/67anC7

Un autre framework front-end...

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

devtools

Format .vue

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

Février 2014

Première version publique

Octobre 2015

Version 1.0

Septembre 2016

Version 2.0

Quoi de neuf

Dans la version 2.x

Performances

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

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

patreon.com/evanyou

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

Liens utiles

@vuejs

vuejs.org

vuejs.org/guide

vuejs.org/api

github.com/vuejs/awesome-vue

forum.vuejs.org

medium.com/the-vue-point

vuejobs.com

[FR] Introduction à Vue 2

By Guillaume Chau

Made with Slides.com

[FR] 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

  • 7,551

More from Guillaume Chau