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

Robert Witkowski

July 16, 2018
Tweet

More Decks by Robert Witkowski

Other Decks in Technology

Transcript

  1. 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ń
  2. 7

  3. 8

  4. 9

  5. 10

  6. 14

  7. 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?
  8. 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);
  9. 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
  10. 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
  11. 24

  12. 25

  13. 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
  14. 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
  15. 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>
  16. If/else <div v-if="filteredExercises && filteredExercises.length && filteredExercises.length > 0"> …………

    ………… </div> <div v-else class="not-found"> No exercises found. </div>
  17. 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>
  18. Single File Component <template> <div> …………………… </div> </template> <script> export

    default { name: '', data () { return {} } } </script> <style scoped> </style>
  19. 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; } }
  20. 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; } }
  21. 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; }); } } };
  22. 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); } }
  23. Ź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
  24. „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
  25. Kontakt: Altkom Software & Consulting Sp. z o.o. 00-867 Warszawa,

    ul. Chłodna 51, WTT tel.: (+48) 22 460 99 31 [email protected] Pytania? [email protected] Źródła: github.com/witek1902/atlas-kfd-api github.com/witek1902/atlas-kfd-web-app