VueJS 101: Què és Vue?

Breu introducció a VueJS.

Transcript

1. ...and beers
2. /vjuː/ (com “view”)
3. Les preguntes ens agraden!
4. Què és Vue.js?
5. Què és Vue.js? Framework Javascript per construir UIs Versió actual: 2.4 Publicat el 2014 (open source) Enfocat a desenvolupament per components https://vuejs.org/v2/guide/index.html https://vuejs.org/v2/guide/components.html
6. “I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?” - Evan You
7. 60412 ★ 109★ diàries 71262 ★ 74★ diàries 56484 ★ 11★ diàries 25953 ★ 30★ diàries
8. ≈ https://medium.com/js-dojo/switching-from-react-to-vue-js-badf34565a2d https://vuejs.org/v2/guide/components.html
9. Benvinguts a Javascript
10. imgs/ assets/ index.html app.js app.css For the lulz: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
11. Per què Vue.js?
12. Per què Vue.js? Progressiu: corba d’aprenentatge lleugera Templates: sintaxi més senzilla(?) Built-in transitions Top-down reactive data: com React. Canvi de paradigma. Data driven view. https://vuejs.org/v2/guide/reactivity.html
14. Component-based UI
15. <App /> <Home /> <Button /> <Email-Input /> <Form /> <Item /> <Item-list /> <Media /> <Hero-image /> <Image /> <Icon /> Component-based UI
17. UI = arbre de components
18. FilterableProductTable (taronja) contains the entirety of the example SearchBar (blau) receives all user input ProductTable (verd) displays and filters the data collection based on user input ProductCategoryRow (turquesa) displays a heading for each category ProductRow (vermell) displays a row for each product Un sol component? https://pusher.com/sessions/meetup/bristol-js/thinking-in-react https://facebook.github.io/react/docs/thinking-in-react.html
19. Composició, no herència! https://facebook.github.io/react/docs/composition-vs-inheritance.html https://medium.com/javascript-scene/composing-software-an-introduction-27b72500d6ea
20. Single Responsibility Principle https://en.wikipedia.org/wiki/SOLID_(object-oriented_design) https://scotch.io/bar-talk/s-o-l-i-d-the-first-five-principles-of-object-oriented-design Cada component fa una cosa, una de sola, i la fa bé
21. Declaratiu, no imperatiu! https://tylermcginnis.com/imperative-vs-declarative-programming/ https://medium.com/@ian.mundy/declarative-vs-imperative-programming-a8a7c93d9ad2 "This is what it should do” "This is how you should do it" Fes una pizza per sopar Vés a la cuina Obre la nevera Treu la base del congelador Treu el formatge de la nevera … Serveix el plat a taula
22. const double = arr => { let results = [ ] for (let i = 0; i < arr.length; i++) { results.push(arr[i] * 2) } return results } const double = arr => arr.map(item => item * 2) Declaratiu Imperatiu "This is what it should do” "This is how you should do it"
23. Més sobre desenvolupament basat en components: youtube.com/watch?v=40KBx30RcKo bradfrost.com/blog/post/atomic-web-design/ techblog.constantcontact.com/software-development/reactive-component -based-uis/ https://blog.prototypr.io/react-based-ui-frameworks-de70558dcc32
24. Demo time!
25. const vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) Declaratiu Imperatiu "This is what it should do” "This is how you should do it" const vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })
26. Separation of concerns HTML JS CSS
27. Separation of concerns Button Modal List Form Media HTML JS CSS
28. 1. Framework JS lleuger per desenvolupar UIs 2. Desenvolupament per components 3. Cal entendre ecosistema Javascript 2017(?) 4. Reactiu. Data-driven. 5. Progressiu: router, vuex, axios, vue-test-utils... 6. Single File Components 7. Ens agrada Recap: Vue.js
29. Per saber-ne més: vuejs.org/v2/guide gitter.im/vuejs/vue jdonsan.gitbooks.io/desarrolla-aplicaciones-con-vuejs alligator.io/vuejs vuejsdevelopers.com github.com/sdras/intro-to-vue css-tricks.com/guides/vue
30. Com començar? $ npm install vue-cli -g https://github.com/vuejs/vue-cli
31. Thanks! Dubtes? (segur que sí! L’altra cosa és que algú sàpiga resoldre’ls!)