SlideShare une entreprise Scribd logo
À la découverte de
Vue.js
Bruno Bonnin
Old developer, Dashboard maker, Data
architect @MyScript
webdemo.myscript.com/
myscript.com/about/join-us/
Orienté composants
Dédié à la création
d’interfaces Web
Performant
Très facile à
apprendre
Vue.js en quelques mots...
Focus sur la
couche View
Flexible
npm install vue-cli -g
vue init webpack monprojet
npm run dev
Et vous êtes prêt à coder !
C’est parti, on l’installe...
<script src="https://.../path/to/vue.js">Le plus simple
Mieux npm install vue
Encore mieux
… et on code !
<div id="app">
Bonjour {{ name }} !
</div>
new Vue({
el: '#app',
data: confdata
})
var confdata = {
name: 'BreizhCamp'
}
Model ViewViewModel
confdata.name = 'Codeurs en Seine' Rien de plus
à faire !
?
Démo
vue init webpack-simple first-app
cd my-first-app
npm install
npm run dev
Les concepts de base
La base: l’instance "Vue" (et ses options)
new Vue({
el: '#hero-app',
data: {
name: 'Deadpool'
},
computed: {
uppercaseName: function () {
return this.name.toUpperCase();
}
},
methods: {
clearName: function () {
this.name = '';
}
}
})
La totale sur : https://vuejs.org/v2/api/
Les données (réactives: Vue
détectera toute modification et fera
les màj du DOM nécessaire)
Les données calculées (utilisables
comme les autres données et mises
en cache)
Les fonctions utilisables via l’instance
de Vue ou dans les directives
La base: l’instance "Vue" et
Hooks sur le cycle de vie
Source: https://vuejs.org/v2/guide/instance.html
La base: l'interpolation
<h1>Bonjour {{ name }} !</h1>
{{ ... }}
v-bind
<a v-bind:href="search_url">Search</a>
<span :title="message"> </span>
La base: les directives (v-...)
<input type="text" v-model="name" >
<button v-on:click="like"> J’aime </button>
<div v-if="talk.liked"> Vous aimez ça ! </div>
<div v-else> Vous n’aimez pas </div>
<div v-for="talk in talks">
<h3>{{ talk.title }}</h3>
</div>
Les composants
Les composants
<barchart
v-bind:values="dataset"
v-bind:title="chartTitle"/>
Les composants Vue.component('barchart', {
template: '...',
props: [ 'title', 'values' ],
data: function () {
return {
chart: null
}
},
methods: { … } ,
mounted: function () { … }
})
<barchart
:values="dataset"
:title="chartTitle"/>
Les composants: définition du template
Vue.component('barchart', {
template:
'<div><h2>{{title}}</h2><canvas/></div>',
})
Les composants: définition du template
Vue.component('barchart', {
})
<barchart inline-template>
<div>
<h2>{{ title }}</h2>
<canvas/>
</div>
</barchart>
<script
type="text/x-template"
id="barchart-templ">
<div>
<h2>{{ title }}</h2>
<canvas/>
</div>
</script>
Vue.component('barchart', {
template: '#barchart-templ'
})
Les composants: définition du template
Y a aussi JSX...
Les composants
.CSS
.HTML
.JS .VUE
+
+
<template>
<div>
<h2>{{ title }}</h2>
<canvas/>
</div>
</template>
<script>
export default {
props: [ 'title', 'values' ],
data: function () {
return { … }
},
methods: { … } ,
mounted: function () { … }
}
</script>
<style scoped>
</style>
Démo : un chart en 2 secondes !
(avec un composant qui contient un composant qui contient un composant qui …)
App.vue
Dataview.vue
Chart.vue
vue-router
Vue-router
const appRroutes = [ {
…
}, {
path: '/dataview',
name: 'dataview',
component: require('./Dataview.vue')
}, {
path: '*',
redirect: '/'
}
]
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const appRouter = new VueRouter({
mode: 'history',
routes : appRoutes
})
new Vue({
el: '#app',
router : appRouter
})
Vue-router
<div id=”#app”>
<router-link to=”/” tag=”button”> Home </router-link>
<router-link to=”/dataview” tag=”button”> Dataview </router-link>
<router-view></router-view>
</div>
vuex
Vuex
Source: https://vuex.vuejs.org
Gestion centralisé de state
pour tous les composants
d’une application
Inspiré par le pattern Flux
Création du store
const store = new Vuex.Store({
mutations: {
setTalks (state, talks) {
state.talks = talks
}
},
state: {
talks: []
},
actions: {
fetchTalks (context) => {
api.fetchTalks()
.then(res => context.commit(’setTalks’, res.data))
}
Utilisation du store
import Vue from ‘vue’
import Vuex from 'vuex'
import store from ‘./store’
Vue.use(Vuex)
new Vue({
store,
components: { ‘talkview’: TalkView },
created () {
this.store.dispatch('fetchTalks')
}
}
<template>...</template>
<script>
export default {
name: 'talkview',
computed: {
talks() {
return this.$store.state.talks
}
},
}
</script>
vue-devtools
Vue-devtools - Components
Quoi d’autres ?
https://github.com/vuejs/awesome-vue
En conclusion...
Après plus de 2 ans d’existence, la communauté grandit vite
!
Vue.js doit faire partie de votre réflexion !
● Focus sur la simplicité
● Orienté composant
● Montée en compétence très
rapide (des connaissances
standards en JavaScript et
HTML suffisent)
Merci !
@_bruno_b_
https://github.com/bbonnin/demos/tree/master/vuejs

Contenu connexe

Tendances

Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
Présentation de ECMAScript 6
Présentation de ECMAScript 6Présentation de ECMAScript 6
Présentation de ECMAScript 6
Julien CROUZET
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
Sonam TCHEUTSEUN
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
Abdoulaye Dieng
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
Antoine Rey
 
Gestion comptes bancaires Spring boot
Gestion comptes bancaires Spring bootGestion comptes bancaires Spring boot
Gestion comptes bancaires Spring boot
Abdelhakim HADI ALAOUI
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
ENSET, Université Hassan II Casablanca
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
ENSET, Université Hassan II Casablanca
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
MOHAMMED MOURADI
 
MVVM de A à Z
MVVM de A à ZMVVM de A à Z
MVVM de A à Z
Microsoft
 
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2Support du cours : Programmation Web 2
Support du cours : Programmation Web 2
Faycel Chaoua
 
cours javascript.pptx
cours javascript.pptxcours javascript.pptx
cours javascript.pptx
YaminaGh1
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 
Vue.js
Vue.jsVue.js
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
Cynapsys It Hotspot
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
Ines Ouaz
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
 
Modele mvc
Modele mvcModele mvc
Modele mvc
Soulef riahi
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
Hamid Tasra
 

Tendances (20)

Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Présentation de ECMAScript 6
Présentation de ECMAScript 6Présentation de ECMAScript 6
Présentation de ECMAScript 6
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Gestion comptes bancaires Spring boot
Gestion comptes bancaires Spring bootGestion comptes bancaires Spring boot
Gestion comptes bancaires Spring boot
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
 
MVVM de A à Z
MVVM de A à ZMVVM de A à Z
MVVM de A à Z
 
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2Support du cours : Programmation Web 2
Support du cours : Programmation Web 2
 
cours javascript.pptx
cours javascript.pptxcours javascript.pptx
cours javascript.pptx
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Vue.js
Vue.jsVue.js
Vue.js
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
 
Modele mvc
Modele mvcModele mvc
Modele mvc
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 

Similaire à A la découverte de vue.js

Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Bruno Bonnin
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
Manuel Adele
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
Bruno Bonnin
 
Vue.js, même un dev java peut en faire !
Vue.js, même un dev java peut en faire !Vue.js, même un dev java peut en faire !
Vue.js, même un dev java peut en faire !
Bruno Bonnin
 
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
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
DNG Consulting
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
Netvibes
 
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...
Alphorm
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Tarik Zakaria Benmerar
 
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
 
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Microsoft
 
Grunt, Bower, Yeoman ou comment automatiser un projet web SPA
Grunt, Bower, Yeoman ou comment automatiser un projet web SPAGrunt, Bower, Yeoman ou comment automatiser un projet web SPA
Grunt, Bower, Yeoman ou comment automatiser un projet web SPA
Touchify
 
Intégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CIIntégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CI
Hugo Hamon
 
Gradle
GradleGradle
Gradle
ylemoigne
 
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
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
Pierric Cistac
 
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
 
cours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptxcours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptx
radjadjouambi1
 
WPF.pptx
WPF.pptxWPF.pptx
WPF.pptx
AmeniRajhi1
 

Similaire à A la découverte de vue.js (20)

Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
Vue.js, même un dev java peut en faire !
Vue.js, même un dev java peut en faire !Vue.js, même un dev java peut en faire !
Vue.js, même un dev java peut en faire !
 
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
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
 
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Comp...
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
 
Grunt, Bower, Yeoman ou comment automatiser un projet web SPA
Grunt, Bower, Yeoman ou comment automatiser un projet web SPAGrunt, Bower, Yeoman ou comment automatiser un projet web SPA
Grunt, Bower, Yeoman ou comment automatiser un projet web SPA
 
Intégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CIIntégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CI
 
Gradle
GradleGradle
Gradle
 
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
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
 
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
 
cours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptxcours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptx
 
WPF.pptx
WPF.pptxWPF.pptx
WPF.pptx
 

Plus de Bruno Bonnin

[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)
[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)
[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)
Bruno Bonnin
 
Stream processing avec Apache Pulsar
Stream processing avec Apache PulsarStream processing avec Apache Pulsar
Stream processing avec Apache Pulsar
Bruno Bonnin
 
Stream processing et SQL
Stream processing et SQLStream processing et SQL
Stream processing et SQL
Bruno Bonnin
 
Stream processing et SQL
Stream processing et SQLStream processing et SQL
Stream processing et SQL
Bruno Bonnin
 
Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...
Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...
Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...
Bruno Bonnin
 
Stream processing et SQL
Stream processing et SQLStream processing et SQL
Stream processing et SQL
Bruno Bonnin
 
Stream processing et SQL
Stream processing et SQLStream processing et SQL
Stream processing et SQL
Bruno Bonnin
 
Explorez vos données présentes dans MongoDB avec Apache Zeppelin
Explorez vos données présentes dans MongoDB avec Apache ZeppelinExplorez vos données présentes dans MongoDB avec Apache Zeppelin
Explorez vos données présentes dans MongoDB avec Apache Zeppelin
Bruno Bonnin
 
Apache Spark avec NodeJS ? Oui, c'est possible avec EclairJS !
Apache Spark avec NodeJS ? Oui, c'est possible avec EclairJS !Apache Spark avec NodeJS ? Oui, c'est possible avec EclairJS !
Apache Spark avec NodeJS ? Oui, c'est possible avec EclairJS !
Bruno Bonnin
 
Big Data Viz (and much more!) with Apache Zeppelin
Big Data Viz (and much more!) with Apache ZeppelinBig Data Viz (and much more!) with Apache Zeppelin
Big Data Viz (and much more!) with Apache Zeppelin
Bruno Bonnin
 
Tout ce que le getting started mongodb ne vous dira pas
Tout ce que le getting started mongodb ne vous dira pasTout ce que le getting started mongodb ne vous dira pas
Tout ce que le getting started mongodb ne vous dira pas
Bruno Bonnin
 
Explorez vos données avec apache zeppelin
Explorez vos données avec apache zeppelinExplorez vos données avec apache zeppelin
Explorez vos données avec apache zeppelin
Bruno Bonnin
 
Tout ce que le getting started MongoDB ne vous dira pas
Tout ce que le getting started MongoDB ne vous dira pasTout ce que le getting started MongoDB ne vous dira pas
Tout ce que le getting started MongoDB ne vous dira pas
Bruno Bonnin
 
MUG Nantes - MongoDB et son connecteur pour hadoop
MUG Nantes - MongoDB et son connecteur pour hadoopMUG Nantes - MongoDB et son connecteur pour hadoop
MUG Nantes - MongoDB et son connecteur pour hadoop
Bruno Bonnin
 
Breizhcamp 2015 - Comment (ne pas réussir à) modéliser ses data dans elastics...
Breizhcamp 2015 - Comment (ne pas réussir à) modéliser ses data dans elastics...Breizhcamp 2015 - Comment (ne pas réussir à) modéliser ses data dans elastics...
Breizhcamp 2015 - Comment (ne pas réussir à) modéliser ses data dans elastics...
Bruno Bonnin
 

Plus de Bruno Bonnin (15)

[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)
[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)
[Devoxx MA 2023] R2DBC = R2D2 + JDBC (enfin presque...)
 
Stream processing avec Apache Pulsar
Stream processing avec Apache PulsarStream processing avec Apache Pulsar
Stream processing avec Apache Pulsar
 
Stream processing et SQL
Stream processing et SQLStream processing et SQL
Stream processing et SQL
 
Stream processing et SQL
Stream processing et SQLStream processing et SQL
Stream processing et SQL
 
Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...
Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...
Guide (un tout petit peu) pratique (et totalement subjectif) du stream proces...
 
Stream processing et SQL
Stream processing et SQLStream processing et SQL
Stream processing et SQL
 
Stream processing et SQL
Stream processing et SQLStream processing et SQL
Stream processing et SQL
 
Explorez vos données présentes dans MongoDB avec Apache Zeppelin
Explorez vos données présentes dans MongoDB avec Apache ZeppelinExplorez vos données présentes dans MongoDB avec Apache Zeppelin
Explorez vos données présentes dans MongoDB avec Apache Zeppelin
 
Apache Spark avec NodeJS ? Oui, c'est possible avec EclairJS !
Apache Spark avec NodeJS ? Oui, c'est possible avec EclairJS !Apache Spark avec NodeJS ? Oui, c'est possible avec EclairJS !
Apache Spark avec NodeJS ? Oui, c'est possible avec EclairJS !
 
Big Data Viz (and much more!) with Apache Zeppelin
Big Data Viz (and much more!) with Apache ZeppelinBig Data Viz (and much more!) with Apache Zeppelin
Big Data Viz (and much more!) with Apache Zeppelin
 
Tout ce que le getting started mongodb ne vous dira pas
Tout ce que le getting started mongodb ne vous dira pasTout ce que le getting started mongodb ne vous dira pas
Tout ce que le getting started mongodb ne vous dira pas
 
Explorez vos données avec apache zeppelin
Explorez vos données avec apache zeppelinExplorez vos données avec apache zeppelin
Explorez vos données avec apache zeppelin
 
Tout ce que le getting started MongoDB ne vous dira pas
Tout ce que le getting started MongoDB ne vous dira pasTout ce que le getting started MongoDB ne vous dira pas
Tout ce que le getting started MongoDB ne vous dira pas
 
MUG Nantes - MongoDB et son connecteur pour hadoop
MUG Nantes - MongoDB et son connecteur pour hadoopMUG Nantes - MongoDB et son connecteur pour hadoop
MUG Nantes - MongoDB et son connecteur pour hadoop
 
Breizhcamp 2015 - Comment (ne pas réussir à) modéliser ses data dans elastics...
Breizhcamp 2015 - Comment (ne pas réussir à) modéliser ses data dans elastics...Breizhcamp 2015 - Comment (ne pas réussir à) modéliser ses data dans elastics...
Breizhcamp 2015 - Comment (ne pas réussir à) modéliser ses data dans elastics...
 

A la découverte de vue.js

  • 1. À la découverte de Vue.js
  • 2. Bruno Bonnin Old developer, Dashboard maker, Data architect @MyScript webdemo.myscript.com/ myscript.com/about/join-us/
  • 3. Orienté composants Dédié à la création d’interfaces Web Performant Très facile à apprendre Vue.js en quelques mots... Focus sur la couche View Flexible
  • 4. npm install vue-cli -g vue init webpack monprojet npm run dev Et vous êtes prêt à coder ! C’est parti, on l’installe... <script src="https://.../path/to/vue.js">Le plus simple Mieux npm install vue Encore mieux
  • 5. … et on code ! <div id="app"> Bonjour {{ name }} ! </div> new Vue({ el: '#app', data: confdata }) var confdata = { name: 'BreizhCamp' } Model ViewViewModel confdata.name = 'Codeurs en Seine' Rien de plus à faire ! ?
  • 6. Démo vue init webpack-simple first-app cd my-first-app npm install npm run dev
  • 8. La base: l’instance "Vue" (et ses options) new Vue({ el: '#hero-app', data: { name: 'Deadpool' }, computed: { uppercaseName: function () { return this.name.toUpperCase(); } }, methods: { clearName: function () { this.name = ''; } } }) La totale sur : https://vuejs.org/v2/api/ Les données (réactives: Vue détectera toute modification et fera les màj du DOM nécessaire) Les données calculées (utilisables comme les autres données et mises en cache) Les fonctions utilisables via l’instance de Vue ou dans les directives
  • 9. La base: l’instance "Vue" et Hooks sur le cycle de vie Source: https://vuejs.org/v2/guide/instance.html
  • 10. La base: l'interpolation <h1>Bonjour {{ name }} !</h1> {{ ... }} v-bind <a v-bind:href="search_url">Search</a> <span :title="message"> </span>
  • 11. La base: les directives (v-...) <input type="text" v-model="name" > <button v-on:click="like"> J’aime </button> <div v-if="talk.liked"> Vous aimez ça ! </div> <div v-else> Vous n’aimez pas </div> <div v-for="talk in talks"> <h3>{{ talk.title }}</h3> </div>
  • 14. Les composants Vue.component('barchart', { template: '...', props: [ 'title', 'values' ], data: function () { return { chart: null } }, methods: { … } , mounted: function () { … } }) <barchart :values="dataset" :title="chartTitle"/>
  • 15. Les composants: définition du template Vue.component('barchart', { template: '<div><h2>{{title}}</h2><canvas/></div>', })
  • 16. Les composants: définition du template Vue.component('barchart', { }) <barchart inline-template> <div> <h2>{{ title }}</h2> <canvas/> </div> </barchart> <script type="text/x-template" id="barchart-templ"> <div> <h2>{{ title }}</h2> <canvas/> </div> </script> Vue.component('barchart', { template: '#barchart-templ' })
  • 17. Les composants: définition du template Y a aussi JSX...
  • 18. Les composants .CSS .HTML .JS .VUE + + <template> <div> <h2>{{ title }}</h2> <canvas/> </div> </template> <script> export default { props: [ 'title', 'values' ], data: function () { return { … } }, methods: { … } , mounted: function () { … } } </script> <style scoped> </style>
  • 19. Démo : un chart en 2 secondes ! (avec un composant qui contient un composant qui contient un composant qui …) App.vue Dataview.vue Chart.vue
  • 21. Vue-router const appRroutes = [ { … }, { path: '/dataview', name: 'dataview', component: require('./Dataview.vue') }, { path: '*', redirect: '/' } ] import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const appRouter = new VueRouter({ mode: 'history', routes : appRoutes }) new Vue({ el: '#app', router : appRouter })
  • 22. Vue-router <div id=”#app”> <router-link to=”/” tag=”button”> Home </router-link> <router-link to=”/dataview” tag=”button”> Dataview </router-link> <router-view></router-view> </div>
  • 23. vuex
  • 24. Vuex Source: https://vuex.vuejs.org Gestion centralisé de state pour tous les composants d’une application Inspiré par le pattern Flux
  • 25. Création du store const store = new Vuex.Store({ mutations: { setTalks (state, talks) { state.talks = talks } }, state: { talks: [] }, actions: { fetchTalks (context) => { api.fetchTalks() .then(res => context.commit(’setTalks’, res.data)) }
  • 26. Utilisation du store import Vue from ‘vue’ import Vuex from 'vuex' import store from ‘./store’ Vue.use(Vuex) new Vue({ store, components: { ‘talkview’: TalkView }, created () { this.store.dispatch('fetchTalks') } } <template>...</template> <script> export default { name: 'talkview', computed: { talks() { return this.$store.state.talks } }, } </script>
  • 30. En conclusion... Après plus de 2 ans d’existence, la communauté grandit vite ! Vue.js doit faire partie de votre réflexion ! ● Focus sur la simplicité ● Orienté composant ● Montée en compétence très rapide (des connaissances standards en JavaScript et HTML suffisent)