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

32. None

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

46. None
47. None
48. None

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