Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
2 j'aime269 vues
Bruno Bonnin présente Vue.js comme une plateforme simple et performante pour créer des interfaces web, accessible même aux développeurs Java. Il explique les fondamentaux de Vue.js, tels que l'instance 'vue', les directives, et les composants, tout en mettant en avant sa rapidité d'apprentissage et l'importance de sa communauté en pleine croissance. La présentation se termine en encourageant les développeurs à intégrer Vue.js dans leurs projets d'applications.
![Les composants
Vue.component('barchart', {
template: `
<h2>{{title}}</h2>
<canvas/>`,
props: [ 'title', 'values' ],
data: function () {
return {
chart: null
}
},
methods: { … } ,
mounted: function () { … }
})
<div id="app">
<barchart
v-bind:values="dataset"
title="Nice chart !"/>
</div>
new Vue({
el: 'app',
data: {
dataset: []
},
mounted: function () {
// init dataset
}
})](https://image.slidesharecdn.com/jugsummercamp2017-vue-170917171816/85/Jug-summer-camp-2017-Vue-js-meme-un-dev-java-peut-en-faire-12-320.jpg)
![Les composants
.CSS
.HTML
.JS .VUE
+
+
<template>
<div>
<h2>{{ title }}</h2>
<canvas/>
</div>
</template>
<script>
export default {
props: [ 'title', 'values' ],
data: function () { … },
methods: { … } ,
mounted: function () { … }
}
</script>
<style scoped>
/* Je déteste le css, donc j’en mettrai pas une ligne… */
</style>](https://image.slidesharecdn.com/jugsummercamp2017-vue-170917171816/85/Jug-summer-camp-2017-Vue-js-meme-un-dev-java-peut-en-faire-13-320.jpg)
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
- 1. Speaker : Bruno Bonnin - @_bruno_b_ Vue.js, même un dev Java peut en faire !
- 2. Bruno Bonnin @_bruno_b_ - 15 septembre Solution Architect @saagie_io #Java #JavaScript #Python #Elastisearch #MongoDB #ArangoDB #NoSQL #Hadoop #BigData #HTML5 #AngularJS #VueJS #WebAPI Nantes, France
- 3. Smart Data Platform Une véritable ligne d’assemblage Big Data (Data Fabric)
- 4. 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
- 5. npm install vue-cli -g vue init webpack monprojet npm run dev C’est parti, on l’installe... <script src="https://unpkg.com/vue">Le plus simple Mieux npm install vue Encore mieux
- 6. … et on code un bon vieux hello world ! <div id="app"> <h1>Hello {{ name }} !</h1> </div> <script> new Vue({ el: '#app', data: { name: 'JUG Summer Camp' } }) </script> Véritable snapshot réalisé sans trucage !!
- 7. 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
- 8. La base: l’instance "Vue" et Hooks sur le cycle de vie Source: https://vuejs.org/v2/guide/instance.html
- 9. La base: l'interpolation <h1>Bonjour {{ name }} !</h1> {{ ... }} v-bind <a v-bind:href="search_url">Search</a> <span :title="message"> </span>
- 10. 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>
- 12. Les composants Vue.component('barchart', { template: ` <h2>{{title}}</h2> <canvas/>`, props: [ 'title', 'values' ], data: function () { return { chart: null } }, methods: { … } , mounted: function () { … } }) <div id="app"> <barchart v-bind:values="dataset" title="Nice chart !"/> </div> new Vue({ el: 'app', data: { dataset: [] }, mounted: function () { // init dataset } })
- 13. Les composants .CSS .HTML .JS .VUE + + <template> <div> <h2>{{ title }}</h2> <canvas/> </div> </template> <script> export default { props: [ 'title', 'values' ], data: function () { … }, methods: { … } , mounted: function () { … } } </script> <style scoped> /* Je déteste le css, donc j’en mettrai pas une ligne… */ </style>
- 14. 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
- 15. J’aurais pu en parler... vue-router vuex vue-devtools Effets de transition, mixins, custom directives, server-side rendering, tests unitaires, ... vue-test-utils
- 17. En conclusion... Après plus de 2 ans d’existence, la communauté grandit vite ! Nombre de stars > 65 000 675k downloads sur le dernier mois Focus sur la simplicité Orienté composant Montée en compétence très rapide Vue.js doit faire partie de votre réflexion vos apps !