Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Vue, j’avais pas vu !

1.059 visualizaciones

Publicado el

Présentation de Vue.js faite lors de Codeurs en seine 2016.

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

Vue, j’avais pas vu !

  1. 1. Vue, j’avais pas vu ! Bruno Bonnin - @_bruno_b_ #codeurs2016
  2. 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. 3. MyScript Leader de la reconnaissance d’ écriture Démo: http://webdemo.myscript.com/ Join us: http://myscript.com/about/join-us/
  4. 4. Java Server Pages Un passé sombre...
  5. 5. Heureusement…
  6. 6. Et maintenant, que vais-je faireeeeeeuh ?
  7. 7. 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
  8. 8. 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
  9. 9. … 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 ! ?
  10. 10. Démo (merci de votre tolérance concernant le style…)
  11. 11. Commençons par ... Data binding, interpolation, properties
  12. 12. <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
  13. 13. 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>
  14. 14. <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 ! {{ ... }}
  15. 15. 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 }
  16. 16. Démo (juste pour voir les properties)
  17. 17. Continuons avec … Les directives v-*
  18. 18. 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">
  19. 19. Two-way binding <span>Hello {{ name }} !</span> <input v-model="name"> <script> new Vue({ el: '#app', data: { name: 'world' } }) </script> v-model
  20. 20. 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
  21. 21. 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>
  22. 22. 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
  23. 23. 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>
  24. 24. Démo (cette fois, le style est top !)
  25. 25. 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>
  26. 26. Poursuivons avec … La classe Vue
  27. 27. 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 () { … } ... })
  28. 28. Cycle de vie Source: https://vuejs.org/v2/guide/instance.html
  29. 29. Et maintenant... Les composants
  30. 30. Les composants Extension des éléments HTML de base pour construire des éléments réutilisable <talks> ... ... ... ... </talks>
  31. 31. 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>
  32. 32. Le tout en un =.CSS.HTML .JS .VUE ++
  33. 33. 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
  34. 34. 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
  35. 35. Démo (si ça marche, tournée générale...)
  36. 36. Vue-router Et y a quoi d’autres ?
  37. 37. 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>
  38. 38. 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 })
  39. 39. Démo (grosse sérénité sur cette démo...)
  40. 40. Vuex Et y a quoi d’autres ?
  41. 41. Vuex Source: https://vuex.vuejs.org Gestion centralisé de state pour tous les composants d’une application Inspiré par Flux
  42. 42. 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)) } }
  43. 43. 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 ]), }
  44. 44. Démo (et après, c’est fini !!!)
  45. 45. Vue-devtools Et y a quoi d’autres ?
  46. 46. Vue-devtools - Components
  47. 47. Vue-devtools - Vuex
  48. 48. https://github.com/vuejs/awesome-vue Et y a quoi d’autres ?
  49. 49. 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/
  50. 50. Merci ! @_bruno_b_ https://github.com/bbonnin/codeursenseine2016

×