Vue.js - najpopularniejszy framework JS w 2017 roku

Transcript

1. Robert Witkowski Senior Software Engineer Vue.js – najpopularniejszy framework JS w 2017
2. 2 Agenda • Czy tytuł prezentacji to tylko marketingowy slogan czy jednak prawda? • Zalety i wady Vue.js • Kto używa? • Składnia • DEMO – aplikacja webowa Atlas ćwiczeń
3. 3 Czy Vue naprawdę tak szybko zyskuje na popularności?
4. 4 Most Popular Front-end Frameworks in 2017
5. 5 Most Popular Projects Overall in 2017
6. 6 Most Popular Projects Overall in 2017
7. 7
8. 8
9. 9
10. 10
11. 11 Evan You - State of VueJS 2018 | Vue.js Amsterdam Conference
12. 12 Evan You - State of VueJS 2018 | Vue.js Amsterdam Conference
13. 13 https://w3techs.com/
14. 14
15. 15 Progressive JavaScript Framework – co to oznacza? Vue using like jQuery – Amsterdam Conference
16. 16 • Świetna dokumentacja! • Nie trzeba rozglądać się pomiędzy dziesiątkami konkurencyjnych rozwiązań, ponieważ istnieją dobrze udokumentowane oficjalne rozwiązania; • Żeby używać Vue nie potrzebujesz żadnego systemu do budowania typu webpack, wystarczy wkleić dodać bibliotekę do pliku HTML; • Ma za sobą wsparcie dużych graczy; Brzmi fajnie… Co dalej?
17. 17 Brzmi fajnie… Co dalej? Pora na kilka buzzwords  • Virtual DOM; • Component Based Architecture; • Server-side rendering; • TypeScript support; • Hot reloading; • Regular-old-HTML (vs. React JSX);
18. 18 Brzmi za fajnie… Czy Vue ma jakieś wady?
19. 19 1. Projekt jednego człowieka
20. 20 Od dawna NIE jest to prawdą  „Vue.js has also grown from “yet another side project” into an ecosystem with over 300 contributors across the Vue.js organization and maintained by a core team of over 20 active members across the globe” Evan You, the author of Vue.js
21. 21 2. Vue nie jest przeznaczone do dużych aplikacji
22. 22 Jest przeznaczony i do małych (prototypowania) i do dużych aplikacji. „Vue is built on the component-based model for UI development which is a proven pattern shared among all major frameworks, with solid official solutions for SPA routing and large-scale state management. It is designed for approachability, but is also designed with scale in mind.” Evan You, the author of Vue.js
23. 23 3. Może z wydajnością jest coś nie tak?
24. 24
25. 25
26. 26 Od czego by tu tak naprawdę zacząć? 1. Visual Studio Code 2. Vue CLI 3. Vue Router 4. Axios 5. Element.io / Vuetify / Bulma / MD Bootstrap 6. Vuex
27. 27 PAMIĘTAJ! Nie zawsze potrzebujesz Vuex. Czasami wystarczy prosty global event bus, a czasami żaden z powyższych nie jest potrzebny  „Flux libraries are like glasses: you’ll know when you need them.” Dan Abramov, the author of Redux
28. 28 Kto używa?
29. 29 http://biznesmysli.pl/chiny-staja-sie-nowym-centrum-swiata/
30. 30 Kto używa?
31. State of Vue.js Report - Monterail
33. Składnia
34. Wyświetlanie zmiennej jako tekstu <el-tab-pane label="Pracujące mięśnie" name="main"> <h3>Główne</h3> <p>{{ details.mainMuscles }}</p> <h3>Pomocnicze</h3> <p>{{ details.auxiliaryMuscles }}</p> <h3>Stabilizatory</h3> <p>{{ details.stabilizers }}</p> </el-tab-pane>
35. Używanie dyrektyw <img :src="details.muscleImageUrl" class="muscle-image" /> <iframe v-bind:src="details.embedVideoUrl" width="80%" height="100%"></iframe>
36. If/else <div v-if="filteredExercises && filteredExercises.length && filteredExercises.length > 0"> ………… ………… </div> <div v-else class="not-found"> No exercises found. </div>
37. Pętla for + użycie routera <div v-for="section in sections" :key="section.id"> <router-link :to="{ name: 'ExerciseSectionDetails', params: { sectionId: section.id } }"> <p>{{ section.title }}</p> <img class="section-image"" :src="section.image" /> </router-link> </div>
38. Single File Component <template> <div> …………………… </div> </template> <script> export default { name: '', data () { return {} } } </script> <style scoped> </style>
39. Two way data binding <input placeholder="Wyszukaj po kodzie lub tytule..." v-model="searchQuery"/>
40. Obsługa zdarzeń <button @click="changeTitle()">Zmień tytuł</button> <h1>{{ title }}</h1> data() { return { title: 'Atlas ćwiczeń', anotherTitle: 'Inżynierskie Targi Pracy' }; }, methods: { changeTitle () { let newTitle = this.anotherTitle; this.anotherTitle = this.title; this.title = newTitle; } }
41. Obsługa zdarzeń – reakcja na przyciski <button @keyup.enter="changeTitle()">Zmień tytuł</button> <h1>{{ title }}</h1> data() { return { title: 'Atlas ćwiczeń', anotherTitle: 'Inżynierskie Targi Pracy' }; }, methods: { changeTitle () { let newTitle = this.anotherTitle; this.anotherTitle = this.title; this.title = newTitle; } }
42. Cykl życia komponentów beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed
43. Cykl życia komponentów export default { name: "ExerciseSectionDetails", data() { return {}; }, created() { this.getSections(); }, methods: { getSections() { HTTP.get("sections/" + this.sectionId) .then(response => { this.details = response.data; }); } } };
44. Computed properties data() { return { details: {} }; }, computed: { filteredExercises() { if (!this.details || !this.details.exercises) return []; return this.details.exercises.filter(e => e.title.toLowerCase().indexOf( this.searchQuery.toLowerCase()) !== -1); } }
45. Stworzenie projektu za pomocą vue-cli
49. DEMO
50. Źródła wiedzy • [ENG] Documentation + Cookbook • [PL] Kurs Vue.js od podstaw - eduweb.pl • [ENG] Learn Vue 2: Step By Step – laracasts.com • [ENG] The Net Ninja – Vue JS 2 Tutorial – youtube.com • [ENG] Awesome Vue.js • [ENG] news.vuejs.org • [ENG] ($) Vue JS 2 - The Complete Guide – udemy.com 4.8 (11,697 ratings) 41,042 students enrolled
51. „I’m not building Vue to compete with React, but I’m building it for users who really like using it.” Evan You, the author of Vue.js
52. Kontakt: Altkom Software & Consulting Sp. z o.o. 00-867 Warszawa, ul. Chłodna 51, WTT tel.: (+48) 22 460 99 31 robert.witkowski@altkom.pl Pytania? robert.witkowski@altkom.pl Źródła: github.com/witek1902/atlas-kfd-api github.com/witek1902/atlas-kfd-web-app