SlideShare une entreprise Scribd logo
Vue, j’avais pas vu !
Bruno Bonnin - @_bruno_b_
#codeurs2016
Kissuije ?
Bruno Bonnin @_bruno_b_ - 24 novembre
Architecte logiciel / Développeur @MyScript
#Java #JavaScript #Python
#MongoDB #Elastisearch # NoSQL
#Hadoop #Spark #Storm #BigData
#HTML5 #AngularJS #VueJS #NodeJS
De plus en plus !De moins en
moins...
MyScript
Leader de la reconnaissance d’
écriture
Démo:
http://webdemo.myscript.com/
Join us:
http://myscript.com/about/join-us/
Java
Server
Pages
Un passé sombre...
Heureusement…
Et maintenant, que vais-je faireeeeeeuh ?
vue j'avais pas vu !!
Orienté composants
Dédié à la création d’interfaces
Web interactives
Performant
Très facile à
apprendre
Vue.js en quelques mots...
Focus sur la
couche View
Flexible
npm install vue-cli -g
vue init webpack mon-projet
C’est parti, on l’installe...
<script src="https://unpkg.com/vue/dist/vue.js">Le plus simple
Recommandé npm install vue
Encore mieux
… et on code !
<div id="app">
Bonjour {{ name }} !
</div>
var vm = new Vue({
el: '#app',
data: confdata
})
var confdata = {
name: 'Codeurs en
Seine'
}
Model ViewViewModel
confdata.name = 'BreizhCamp' Rien de plus
à faire !
?
Démo
(merci de votre tolérance concernant le style…)
Commençons par ...
Data binding, interpolation,
properties
<span>{{ name | capitalize }}</span>
Interpolation
<h1>Bonjour {{ name }} !</h1>
{{ ... }}
<h1 v-once>Bonjour {{ name }} !</h1>
<span>{{ name.toLowerCase() }}</span>
<p>{{ resultat === 1 ? ‘OK’ : ‘KO’ }}</p>
Filter => défini dans l’instance de Vue
Interpolation sur les attributs
v-bind
<a v-bind:href="search_url"> Search </a>
<div v-bind:id=" ’id’ + nb"> </div>
<span :title="message"> </span>
<a href="{{ search_url }}"> Search</a>
<div>{{ speakers.sort().join(‘, ‘) }}</div>
<script>
new Vue({
el: '#app',
data: {
speakers: [ 'Grincheux', ‘Prof’]
}
})
</script>
,
computed: {
allSpeakers () {
return this.speakers.sort().join(‘, ‘)
}
Computed properties
allSpeakers
Props en cache !
{{ ... }}
Watched properties
new Vue({
data: {
firstname: 'Archibald',
lastname: 'Haddock',
fullname: ''
},
watch: {
firstname (val) {
this.fullname = val + ‘ ‘ + this.lastname
},
lastname (val) {
this.fullname = this.firstname + ‘ ‘ + val
}
}
})
Peut être coûteux !
Préférez les computed props
computed: {
fullname () {
return this.firstname + ‘ ‘ +
this.lastname
}
Démo
(juste pour voir les properties)
Continuons avec …
Les directives v-*
Directives
Attributs commençant par v-
Avec un argument
Avec des modificateurs
<input v-model="name">
<a v-bind:href="search_url"> Search </a>
<input v-model.trim="name" type="text">
<form v-on:submit.prevent="updateData">
Two-way binding
<span>Hello {{ name }} !</span>
<input v-model="name">
<script>
new Vue({
el: '#app',
data: {
name: 'world'
}
})
</script>
v-model
Evénements DOM
<h3> Talk: {{ title }} </h3>
<button v-on:click="like"> J’aime </button>
<script>
new Vue({
data: {
title: "BeerScript, le langage pour l’apéro"
},
methods: {
like (event) { … },
}
})
</script>
v-on
Conditional rendering
<h3> Talk: {{ title }} </h3>
<div v-if="like"> Vous aimez ça ! </div>
<script>
new Vue({
data: {
title: "Pourquoi Angular3 ne
supportera que le VBScript",
like: true
}
})
</script>
v-if
v-else
<div v-else> Vous n’aimez pas </div>
List rendering
<div v-for="talk in talks">
<h3>{{ talk.title }}</h3>
</div>
<script>
new Vue({
data: {
talks: [
{ "title": "..." },
{ "title": "..." } ]
}
})
</script>
v-for
Peut être une
computed prop
ou une méthode
Custom directive
<button v-bigbutton:success> Yes ! </button>
v- ...
<script>
Vue.directive({ ‘bigbutton’, {
bind (el, binding, vnode) {
el.classList =
'btn btn-lg btn-' + binding.arg
}
}})
</script>
Démo
(cette fois, le style est top !)
Transition
<transition name="fade">
<p v-if="showTheBook">
<img src="..." />
</p>
</transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .8s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
Poursuivons avec …
La classe Vue
Une instance "Vue"
new Vue({
el: '#app',
template: '',
data: { … },
computed: { ... },
watch: { ... },
methods: { ... },
filters: { … }, // {{ name | capitalize }}
// Méthodes liées au
// cycle de vie de l’instance
created () { … },
mounted () { … },
beforeUpdate () { … },
updated () { … }
...
})
Cycle de vie
Source: https://vuejs.org/v2/guide/instance.html
Et maintenant...
Les composants
Les composants
Extension des éléments HTML de base
pour construire des éléments réutilisable
<talks>
...
...
...
...
</talks>
Les composants
<template id="talks-template">
<div v-for='talk in talks'>
{{ talk.title }}
</div>
</template>
new Vue({
el: '#app',
data: {
talks: [ { title: '...' }, { title: '...' } ]
}
})
Vue.component('talks', {
template: '#talks-template',
props: [ 'talks' ]
})
<div id="app">
<talks :talks="talks"></talks>
</div>
Le tout en un
=.CSS.HTML .JS .VUE
++
Composants: .vue
<div class="talks">
<div class="talk" v-for="talk in talks">
<h3 class="talk-title">{{ talk.titre }}</h3>
</div>
</div>
export default {
name: 'talks',
props: [ 'talks' ],
methods: {
...
}
}
.talks {
margin: 0 50px;
}
.HTML
.JS
.CSS
Composants: .vue
<template>
<div class="talks">
<div class="talk" v-for="talk in talks">
<h3 class="talk-title">{{ talk.titre }}</h3>
</div>
</div>
</template>
<script>
export default {
name: 'talks',
props: [ 'talks' ],
methods: {
...
}
}
</script>
<style scoped>
.talks {
margin: 0 50px;
}
</style>
.VUE
Démo
(si ça marche, tournée générale...)
Vue-router
Et y a quoi d’autres ?
Vue-router
<div id=”#app”>
<router-link to=”/talks” tag=”button”> Talks </router-link>
<router-link to=”/speakers” tag=”button”> Speakers </router-link>
<router-view></router-view>
</div>
Vue-router
const routes = [ {
path: '/talks',
name: 'talks',
component: require('./TalkList.vue')
}, {
path: '/talk/:id',
components: {
default: require('./Talk.vue'),
nav: require('./Nav.vue')
}
}, {
path: '*',
redirect: '/talks'
}]
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes : routes
})
new Vue({
el: '#app',
router : router
})
Démo
(grosse sérénité sur cette démo...)
Vuex
Et y a quoi d’autres ?
Vuex
Source: https://vuex.vuejs.org
Gestion centralisé de
state pour tous les
composants d’une
application
Inspiré par Flux
Création du store
const store = new Vuex.Store({
mutations: {
setTalks (state, talks) {
state.talks = talks
}
},
state: {
talks: []
},
getters: {
afternoonTalks: state => {
return state.talks.filter(...)
}
},
actions: {
fetchTalks ({ commit }) => {
api.fetchTalks()
.then(res => commit(’setTalks’, res.data))
}
}
Utilisation du store
import { mapState } from 'vuex'
new Vue({
store : store,
created () {
this.$store.dispatch('fetchTalks') // Action invoquée pour avoir
// les data à la création de la Vue
},
computed: mapState([ // Helper pour créer des accès au state
'talks' // Equivalent this.$store.state.talks
]),
}
Démo
(et après, c’est fini !!!)
Vue-devtools
Et y a quoi d’autres ?
Vue-devtools - Components
Vue-devtools - Vuex
https://github.com/vuejs/awesome-vue
Et y a quoi d’autres ?
En conclusion...
Après 2 ans d’existence, la
communauté grandit vite
● Focus sur la simplicité
● Orienté composant
● Montée en compétence
très rapide (des
connaissances standards
en JavaScript et HTML
suffisent)
Vue.js doit faire partie de votre
réflexion !
Source: https://github-ranking.com/
Merci !
@_bruno_b_
https://github.com/bbonnin/codeursenseine2016
vue j'avais pas vu !!

Contenu connexe

Tendances

HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
Frédéric Harper
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
Yoann Gotthilf
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
Bassem ABCHA
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
Horacio Gonzalez
 
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partieCours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
kadzaki
 
Comprendre et optimiser la base de données WordPress
Comprendre et optimiser la base de données WordPressComprendre et optimiser la base de données WordPress
Comprendre et optimiser la base de données WordPress
Tony Archambeau
 
Migrer les données de n'importe quel CMS vers WordPress
 Migrer les données de n'importe quel CMS vers WordPress Migrer les données de n'importe quel CMS vers WordPress
Migrer les données de n'importe quel CMS vers WordPress
Tony Archambeau
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
yllieth
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
Chi Nacim
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
krymo
 
Drupal - La puissance de Drush
Drupal - La puissance de DrushDrupal - La puissance de Drush
Drupal - La puissance de Drush
Alexandre Marie
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Ghilas BELHADJ
 
Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHP
kemenaran
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
Wordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsWordpress et la sécurité des plugins
Wordpress et la sécurité des plugins
Boiteaweb
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
Alexandre Marie
 
Cancellable Promises
Cancellable PromisesCancellable Promises
Cancellable Promises
Julien Rollet
 
10 façons de casser son site WordPress ... et de le réparer !
10 façons de casser son site WordPress ... et de le réparer !10 façons de casser son site WordPress ... et de le réparer !
10 façons de casser son site WordPress ... et de le réparer !
Boiteaweb
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
Frédéric Harper
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
Abdoulaye Dieng
 

Tendances (20)

HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partieCours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
 
Comprendre et optimiser la base de données WordPress
Comprendre et optimiser la base de données WordPressComprendre et optimiser la base de données WordPress
Comprendre et optimiser la base de données WordPress
 
Migrer les données de n'importe quel CMS vers WordPress
 Migrer les données de n'importe quel CMS vers WordPress Migrer les données de n'importe quel CMS vers WordPress
Migrer les données de n'importe quel CMS vers WordPress
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
 
Drupal - La puissance de Drush
Drupal - La puissance de DrushDrupal - La puissance de Drush
Drupal - La puissance de Drush
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
 
Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHP
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Wordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsWordpress et la sécurité des plugins
Wordpress et la sécurité des plugins
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
 
Cancellable Promises
Cancellable PromisesCancellable Promises
Cancellable Promises
 
10 façons de casser son site WordPress ... et de le réparer !
10 façons de casser son site WordPress ... et de le réparer !10 façons de casser son site WordPress ... et de le réparer !
10 façons de casser son site WordPress ... et de le réparer !
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 

En vedette

Letter of Recommendation - Mr. Louis Philippe Nkolo Fanga - August 6, 2014
Letter of Recommendation - Mr. Louis Philippe Nkolo Fanga - August 6, 2014Letter of Recommendation - Mr. Louis Philippe Nkolo Fanga - August 6, 2014
Letter of Recommendation - Mr. Louis Philippe Nkolo Fanga - August 6, 2014
Louis Philippe Nkolo Fanga
 
Franklin First Financial 2015 Summer Celebration Party Cruise
Franklin First Financial 2015 Summer Celebration Party CruiseFranklin First Financial 2015 Summer Celebration Party Cruise
Franklin First Financial 2015 Summer Celebration Party Cruise
Frank St. John
 
Patricia espinoza
Patricia espinozaPatricia espinoza
Patricia espinoza
1589belskoral
 
9.nociones de probabiidad 160811
9.nociones de probabiidad 1608119.nociones de probabiidad 160811
9.nociones de probabiidad 160811
Arturo Jorge Ramírez Rojas
 
Pension Planning 01 KO
Pension Planning 01 KOPension Planning 01 KO
Pension Planning 01 KO
nadinemohr555
 
Four reasons why dirty politics create “Bad” Leaders
Four reasons why dirty politics create “Bad” LeadersFour reasons why dirty politics create “Bad” Leaders
Four reasons why dirty politics create “Bad” Leaders
LGS, GBHS&IC, University Of South-Asia, TARA-Technologies
 
Grammar class VIII
Grammar class VIIIGrammar class VIII
Grammar class VIII
Bruno Otilio
 
UPenn-Corruption
UPenn-CorruptionUPenn-Corruption
UPenn-Corruption
Ricardo A. VanEgas
 
Probabilidades
ProbabilidadesProbabilidades
Job 7.4
Job 7.4Job 7.4
Job 7.4
Puri Puri
 
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
Publicis Sapient Engineering
 
Vue JS Intro
Vue JS IntroVue JS Intro
Vue JS Intro
Muhammad Rizki Rijal
 
An Introduction to Vuejs
An Introduction to VuejsAn Introduction to Vuejs
An Introduction to Vuejs
Paddy Lock
 
Vuejs testing
Vuejs testingVuejs testing
Vuejs testing
Greg TAPPERO
 
www.AulasDeHistoriaApoio.com - História - Revolução Industrial
www.AulasDeHistoriaApoio.com  - História -  Revolução Industrialwww.AulasDeHistoriaApoio.com  - História -  Revolução Industrial
www.AulasDeHistoriaApoio.com - História - Revolução Industrial
AulasDeHistoriaApoio
 

En vedette (20)

yeraym
yeraymyeraym
yeraym
 
Letter of Recommendation - Mr. Louis Philippe Nkolo Fanga - August 6, 2014
Letter of Recommendation - Mr. Louis Philippe Nkolo Fanga - August 6, 2014Letter of Recommendation - Mr. Louis Philippe Nkolo Fanga - August 6, 2014
Letter of Recommendation - Mr. Louis Philippe Nkolo Fanga - August 6, 2014
 
Franklin First Financial 2015 Summer Celebration Party Cruise
Franklin First Financial 2015 Summer Celebration Party CruiseFranklin First Financial 2015 Summer Celebration Party Cruise
Franklin First Financial 2015 Summer Celebration Party Cruise
 
PlaquetteEvolution
PlaquetteEvolutionPlaquetteEvolution
PlaquetteEvolution
 
Patricia espinoza
Patricia espinozaPatricia espinoza
Patricia espinoza
 
9.nociones de probabiidad 160811
9.nociones de probabiidad 1608119.nociones de probabiidad 160811
9.nociones de probabiidad 160811
 
W-G-Conte(1)
W-G-Conte(1)W-G-Conte(1)
W-G-Conte(1)
 
Pension Planning 01 KO
Pension Planning 01 KOPension Planning 01 KO
Pension Planning 01 KO
 
Four reasons why dirty politics create “Bad” Leaders
Four reasons why dirty politics create “Bad” LeadersFour reasons why dirty politics create “Bad” Leaders
Four reasons why dirty politics create “Bad” Leaders
 
Grammar class VIII
Grammar class VIIIGrammar class VIII
Grammar class VIII
 
Attestation réussite BEPC
Attestation réussite BEPCAttestation réussite BEPC
Attestation réussite BEPC
 
UPenn-Corruption
UPenn-CorruptionUPenn-Corruption
UPenn-Corruption
 
Probabilidades
ProbabilidadesProbabilidades
Probabilidades
 
Job 7.4
Job 7.4Job 7.4
Job 7.4
 
Job 7.2
Job 7.2Job 7.2
Job 7.2
 
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
 
Vue JS Intro
Vue JS IntroVue JS Intro
Vue JS Intro
 
An Introduction to Vuejs
An Introduction to VuejsAn Introduction to Vuejs
An Introduction to Vuejs
 
Vuejs testing
Vuejs testingVuejs testing
Vuejs testing
 
www.AulasDeHistoriaApoio.com - História - Revolução Industrial
www.AulasDeHistoriaApoio.com  - História -  Revolução Industrialwww.AulasDeHistoriaApoio.com  - História -  Revolução Industrial
www.AulasDeHistoriaApoio.com - História - Revolução Industrial
 

Similaire à vue j'avais pas vu !!

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
Netvibes
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
Pierric Cistac
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
HTML5
HTML5HTML5
HTML5
Neovov
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon
 
Web Matrix (Microsoft WebCamps Paris)
Web Matrix (Microsoft WebCamps Paris)Web Matrix (Microsoft WebCamps Paris)
Web Matrix (Microsoft WebCamps Paris)
LeTesteur
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
Sylvain Wallez
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
Rossi Oddet
 
Créer un site web moderne en 30 minutes
Créer un site web moderne en 30 minutesCréer un site web moderne en 30 minutes
Créer un site web moderne en 30 minutes
Valéry BERNARD
 
WebMardi [2020.10.08] - Efficient JavaScript development with Tailwind
WebMardi [2020.10.08] - Efficient JavaScript development with TailwindWebMardi [2020.10.08] - Efficient JavaScript development with Tailwind
WebMardi [2020.10.08] - Efficient JavaScript development with Tailwind
Yann Gouffon
 
Html5 2
Html5 2Html5 2
Html5 2
TECOS
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
hugomallet
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
Corinne Schillinger
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
Publicis Sapient Engineering
 
Conception de code javascript cote client dans la continuité du renouveau du web
Conception de code javascript cote client dans la continuité du renouveau du webConception de code javascript cote client dans la continuité du renouveau du web
Conception de code javascript cote client dans la continuité du renouveau du web
SOAT
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Renoir Boulanger
 
[Tuto] Big datatrack : Web Tracker
[Tuto] Big datatrack : Web Tracker[Tuto] Big datatrack : Web Tracker
[Tuto] Big datatrack : Web Tracker
Microsoft Technet France
 

Similaire à vue j'avais pas vu !! (20)

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
HTML5
HTML5HTML5
HTML5
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 
Web Matrix (Microsoft WebCamps Paris)
Web Matrix (Microsoft WebCamps Paris)Web Matrix (Microsoft WebCamps Paris)
Web Matrix (Microsoft WebCamps Paris)
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Créer un site web moderne en 30 minutes
Créer un site web moderne en 30 minutesCréer un site web moderne en 30 minutes
Créer un site web moderne en 30 minutes
 
WebMardi [2020.10.08] - Efficient JavaScript development with Tailwind
WebMardi [2020.10.08] - Efficient JavaScript development with TailwindWebMardi [2020.10.08] - Efficient JavaScript development with Tailwind
WebMardi [2020.10.08] - Efficient JavaScript development with Tailwind
 
Html5 2
Html5 2Html5 2
Html5 2
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
 
Conception de code javascript cote client dans la continuité du renouveau du web
Conception de code javascript cote client dans la continuité du renouveau du webConception de code javascript cote client dans la continuité du renouveau du web
Conception de code javascript cote client dans la continuité du renouveau du web
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
 
[Tuto] Big datatrack : Web Tracker
[Tuto] Big datatrack : Web Tracker[Tuto] Big datatrack : Web Tracker
[Tuto] Big datatrack : Web Tracker
 

vue j'avais pas vu !!

  • 1. Vue, j’avais pas vu ! Bruno Bonnin - @_bruno_b_ #codeurs2016
  • 2. Kissuije ? Bruno Bonnin @_bruno_b_ - 24 novembre Architecte logiciel / Développeur @MyScript #Java #JavaScript #Python #MongoDB #Elastisearch # NoSQL #Hadoop #Spark #Storm #BigData #HTML5 #AngularJS #VueJS #NodeJS De plus en plus !De moins en moins...
  • 3. MyScript Leader de la reconnaissance d’ écriture Démo: http://webdemo.myscript.com/ Join us: http://myscript.com/about/join-us/
  • 6. Et maintenant, que vais-je faireeeeeeuh ?
  • 8. Orienté composants Dédié à la création d’interfaces Web interactives Performant Très facile à apprendre Vue.js en quelques mots... Focus sur la couche View Flexible
  • 9. npm install vue-cli -g vue init webpack mon-projet C’est parti, on l’installe... <script src="https://unpkg.com/vue/dist/vue.js">Le plus simple Recommandé npm install vue Encore mieux
  • 10. … et on code ! <div id="app"> Bonjour {{ name }} ! </div> var vm = new Vue({ el: '#app', data: confdata }) var confdata = { name: 'Codeurs en Seine' } Model ViewViewModel confdata.name = 'BreizhCamp' Rien de plus à faire ! ?
  • 11. Démo (merci de votre tolérance concernant le style…)
  • 12. Commençons par ... Data binding, interpolation, properties
  • 13. <span>{{ name | capitalize }}</span> Interpolation <h1>Bonjour {{ name }} !</h1> {{ ... }} <h1 v-once>Bonjour {{ name }} !</h1> <span>{{ name.toLowerCase() }}</span> <p>{{ resultat === 1 ? ‘OK’ : ‘KO’ }}</p> Filter => défini dans l’instance de Vue
  • 14. Interpolation sur les attributs v-bind <a v-bind:href="search_url"> Search </a> <div v-bind:id=" ’id’ + nb"> </div> <span :title="message"> </span> <a href="{{ search_url }}"> Search</a>
  • 15. <div>{{ speakers.sort().join(‘, ‘) }}</div> <script> new Vue({ el: '#app', data: { speakers: [ 'Grincheux', ‘Prof’] } }) </script> , computed: { allSpeakers () { return this.speakers.sort().join(‘, ‘) } Computed properties allSpeakers Props en cache ! {{ ... }}
  • 16. Watched properties new Vue({ data: { firstname: 'Archibald', lastname: 'Haddock', fullname: '' }, watch: { firstname (val) { this.fullname = val + ‘ ‘ + this.lastname }, lastname (val) { this.fullname = this.firstname + ‘ ‘ + val } } }) Peut être coûteux ! Préférez les computed props computed: { fullname () { return this.firstname + ‘ ‘ + this.lastname }
  • 17. Démo (juste pour voir les properties)
  • 18. Continuons avec … Les directives v-*
  • 19. Directives Attributs commençant par v- Avec un argument Avec des modificateurs <input v-model="name"> <a v-bind:href="search_url"> Search </a> <input v-model.trim="name" type="text"> <form v-on:submit.prevent="updateData">
  • 20. Two-way binding <span>Hello {{ name }} !</span> <input v-model="name"> <script> new Vue({ el: '#app', data: { name: 'world' } }) </script> v-model
  • 21. Evénements DOM <h3> Talk: {{ title }} </h3> <button v-on:click="like"> J’aime </button> <script> new Vue({ data: { title: "BeerScript, le langage pour l’apéro" }, methods: { like (event) { … }, } }) </script> v-on
  • 22. Conditional rendering <h3> Talk: {{ title }} </h3> <div v-if="like"> Vous aimez ça ! </div> <script> new Vue({ data: { title: "Pourquoi Angular3 ne supportera que le VBScript", like: true } }) </script> v-if v-else <div v-else> Vous n’aimez pas </div>
  • 23. List rendering <div v-for="talk in talks"> <h3>{{ talk.title }}</h3> </div> <script> new Vue({ data: { talks: [ { "title": "..." }, { "title": "..." } ] } }) </script> v-for Peut être une computed prop ou une méthode
  • 24. Custom directive <button v-bigbutton:success> Yes ! </button> v- ... <script> Vue.directive({ ‘bigbutton’, { bind (el, binding, vnode) { el.classList = 'btn btn-lg btn-' + binding.arg } }}) </script>
  • 25. Démo (cette fois, le style est top !)
  • 26. Transition <transition name="fade"> <p v-if="showTheBook"> <img src="..." /> </p> </transition> <style> .fade-enter-active, .fade-leave-active { transition: opacity .8s } .fade-enter, .fade-leave-active { opacity: 0 } </style>
  • 28. Une instance "Vue" new Vue({ el: '#app', template: '', data: { … }, computed: { ... }, watch: { ... }, methods: { ... }, filters: { … }, // {{ name | capitalize }} // Méthodes liées au // cycle de vie de l’instance created () { … }, mounted () { … }, beforeUpdate () { … }, updated () { … } ... })
  • 29. Cycle de vie Source: https://vuejs.org/v2/guide/instance.html
  • 31. Les composants Extension des éléments HTML de base pour construire des éléments réutilisable <talks> ... ... ... ... </talks>
  • 32. Les composants <template id="talks-template"> <div v-for='talk in talks'> {{ talk.title }} </div> </template> new Vue({ el: '#app', data: { talks: [ { title: '...' }, { title: '...' } ] } }) Vue.component('talks', { template: '#talks-template', props: [ 'talks' ] }) <div id="app"> <talks :talks="talks"></talks> </div>
  • 33. Le tout en un =.CSS.HTML .JS .VUE ++
  • 34. Composants: .vue <div class="talks"> <div class="talk" v-for="talk in talks"> <h3 class="talk-title">{{ talk.titre }}</h3> </div> </div> export default { name: 'talks', props: [ 'talks' ], methods: { ... } } .talks { margin: 0 50px; } .HTML .JS .CSS
  • 35. Composants: .vue <template> <div class="talks"> <div class="talk" v-for="talk in talks"> <h3 class="talk-title">{{ talk.titre }}</h3> </div> </div> </template> <script> export default { name: 'talks', props: [ 'talks' ], methods: { ... } } </script> <style scoped> .talks { margin: 0 50px; } </style> .VUE
  • 36. Démo (si ça marche, tournée générale...)
  • 37. Vue-router Et y a quoi d’autres ?
  • 38. Vue-router <div id=”#app”> <router-link to=”/talks” tag=”button”> Talks </router-link> <router-link to=”/speakers” tag=”button”> Speakers </router-link> <router-view></router-view> </div>
  • 39. Vue-router const routes = [ { path: '/talks', name: 'talks', component: require('./TalkList.vue') }, { path: '/talk/:id', components: { default: require('./Talk.vue'), nav: require('./Nav.vue') } }, { path: '*', redirect: '/talks' }] import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', routes : routes }) new Vue({ el: '#app', router : router })
  • 40. Démo (grosse sérénité sur cette démo...)
  • 41. Vuex Et y a quoi d’autres ?
  • 42. Vuex Source: https://vuex.vuejs.org Gestion centralisé de state pour tous les composants d’une application Inspiré par Flux
  • 43. Création du store const store = new Vuex.Store({ mutations: { setTalks (state, talks) { state.talks = talks } }, state: { talks: [] }, getters: { afternoonTalks: state => { return state.talks.filter(...) } }, actions: { fetchTalks ({ commit }) => { api.fetchTalks() .then(res => commit(’setTalks’, res.data)) } }
  • 44. Utilisation du store import { mapState } from 'vuex' new Vue({ store : store, created () { this.$store.dispatch('fetchTalks') // Action invoquée pour avoir // les data à la création de la Vue }, computed: mapState([ // Helper pour créer des accès au state 'talks' // Equivalent this.$store.state.talks ]), }
  • 46. Vue-devtools Et y a quoi d’autres ?
  • 50. En conclusion... Après 2 ans d’existence, la communauté grandit vite ● Focus sur la simplicité ● Orienté composant ● Montée en compétence très rapide (des connaissances standards en JavaScript et HTML suffisent) Vue.js doit faire partie de votre réflexion ! Source: https://github-ranking.com/