Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Jug summer camp 2017 - Vue.js, même un dev java peut en faire !

119 vues

Publié le

Intro à Vue.js

Publié dans : Technologie
  • Soyez le premier à commenter

Jug summer camp 2017 - Vue.js, même un dev java peut en faire !

  1. 1. Speaker : Bruno Bonnin - @_bruno_b_ Vue.js, même un dev Java peut en faire !
  2. 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. 3. Smart Data Platform Une véritable ligne d’assemblage Big Data (Data Fabric)
  4. 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. 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. 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. 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. 8. La base: l’instance "Vue" et Hooks sur le cycle de vie Source: https://vuejs.org/v2/guide/instance.html
  9. 9. La base: l'interpolation <h1>Bonjour {{ name }} !</h1> {{ ... }} v-bind <a v-bind:href="search_url">Search</a> <span :title="message"> </span>
  10. 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>
  11. 11. Les composants <barchart v-bind:values="dataset" v-bind:title="chartTitle"/>
  12. 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. 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. 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. 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
  16. 16. Quoi d’autres ? https://github.com/vuejs/awesome-vue
  17. 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 !
  18. 18. Merci ! @_bruno_b_ https://github.com/bbonnin/jugsummercamp2017

×