Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

149 Aufrufe

Veröffentlicht am

Intro à Vue.js

Veröffentlicht in: Technologie
  • Hello! I do no use writing service very often, only when I really have problems. But this one, I like best of all. The team of writers operates very quickly. It's called ⇒ www.HelpWriting.net ⇐ Hope this helps!
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • You might get some help from ⇒ www.HelpWriting.net ⇐ Success and best regards!
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Have you ever used the help of ⇒ www.WritePaper.info ⇐? They can help you with any type of writing - from personal statement to research paper. Due to this service you'll save your time and get an essay without plagiarism.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×