Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js - najpopularniejszy framework JS w 2017 roku

Vue.js - najpopularniejszy framework JS w 2017 roku

B30c151ccb4d043a2028691515db4130?s=128

Robert Witkowski

July 16, 2018
Tweet

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