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.

Vue, j’avais pas vu !

957 vues

Publié le

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

Publié dans : Technologie
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×