Vue.js 2. Tworzenie reaktywnych aplikacji WWW - ebook

Vue.js jest jednym z najnowszych frameworków. Dzięki swojej prostocie i wszechstronności wzbudza ogromne zainteresowanie twórców aplikacji WWW. Służy do budowy efektywnych, reaktywnych, złożonych i skalowalnych aplikacji WWW, przy czym pozwala na korzystanie z komponentów wielokrotnego użytku. Framework Vue.js powstał jako narzędzie do szybkiego prototypowania, a teraz rozwija się i ewoluuje, dzięki czemu liczba dostępnych funkcji stale rośnie. Vue jest na tyle elastyczny i neutralny względem struktury aplikacji, że z całą pewnością można go uznać za framework wspierający budowę kompleksowych aplikacji WWW.

Dzięki tej książce dowiesz się, jak rozpocząć pracę z tym znakomitym narzędziem. Zrozumiesz, czym jest Vue.js, i sprawdzisz, jakie ma możliwości. Będziesz też mieć okazję do przetestowania ich podczas tworzenia kilku ciekawych aplikacji. W trakcie lektury kolejnych rozdziałów przekonasz się, jak wykorzystać potencjał Vue.js do tworzenia niezwykle wydajnych, reaktywnych interfejsów WWW. Nie musisz być przy tym wybitnym deweloperem. Dzięki tej książce poznasz wszystkie etapy budowania interaktywnej aplikacji WWW za pomocą Vue.js: od planowania struktury aż do pełnego wdrożenia!

W książce między innymi:

• zarys budowy frameworku, jego instalacja i sposoby wykorzystywania
• system jednoplikowych komponentów oraz wiązanie danych
• architektura aplikacji w Vue.js
• korzystanie z istniejących wtyczek i tworzenie własnych
• testy i wdrażanie aplikacji

Vue.js 2: nowe narzędzie, większe możliwości, najlepsze wdrożenia!

Olga Filipova urodziła się w Kijowie. Dorastała w rodzinie fizyków, naukowców i profesorów. Ma duże doświadczenie jako programistka aplikacji WWW, szczególnie w zakresie języka JavaScript. Równocześnie od wielu lat rozwija swoje talenty dydaktyczne w dziedzinie technologii internetowych. Obecnie mieszka w Berlinie, gdzie pracuje jako lider zespołu w firmie Meetrics. Filipova ma męża Ruiego (również programistę), fantastyczną córkę Taissę, kota Patuscę i parę szynszyli o dźwięcznych imionach Barabashka i Cheburashka.

Podziękowania (11)

O autorze (13)

O recenzencie (14)

Wstęp (15)

Rozdział 1. Zakupy z Vue.js (19)

• Terminologia (20)
• Historia Vue.js (22)
• Rzeczy, które musisz wiedzieć o Vue (22)
• Idziemy na zakupy! (23)
  
  • Implementacja listy zakupów przy użyciu jQuery (23)
  • Implementacja listy zakupów za pomocą Vue.js (27)
  • Analiza wiązania danych za pomocą narzędzi programisty (28)
  • Modyfikacja modelu po wprowadzeniu danych przez użytkownika (29)
  • Wyświetlanie listy elementów za pomocą dyrektywy v-for (30)
  • Zaznaczanie elementów listy zakupów (31)
  • Dodawanie nowych elementów do listy zakupów za pomocą dyrektywy v-on (32)
• Korzystanie z Vue.js w istniejącym projekcie (34)
• Vue.js 2.0! (37)
• Projekty, w których wykorzystano Vue.js (38)
  
  • Grammarly (38)
  • Optimizely (39)
  • FilterBlend (40)
  • PushSilver (41)
• Organizacja książki (41)
• Zarządzamy czasem! (43)
  
  • Zmiana tytułu przy użyciu właściwości obliczanych (45)
  • Dopełnienie wartości za pomocą właściwości obliczanych (47)
  • Kontrola stanu przy użyciu przycisków startu, pauzy i stopu (48)
• Ćwiczenie (50)
• Podsumowanie (50)

Rozdział 2. Podstawy - instalacja i użytkowanie (51)

• Wzorzec architektoniczny MVVM (52)
• Metoda defineProperty, gettery i settery (53)
• Porównanie z innymi frameworkami (56)
  
  • React (56)
  • Angular (58)
  • Vue (58)
• Podstawy Vue.js (59)
  
  • Komponenty (59)
  • Dyrektywy Vue.js (63)
  • Wtyczki Vue.js (64)
  • Ćwiczenie (67)
  • Stan aplikacji i Vuex (67)
  • vue-cli (68)
  • Wtyczki Vue dostępne w środowiskach IDE (70)
• Instalacja, użytkowanie i debugowanie aplikacji Vue.js (70)
  
  • Instalacja Vue.js (70)
• Debugowanie aplikacji Vue (80)
• Tworzenie szkieletu aplikacji (82)
  
  • Szkielet aplikacji Lista zakupów (82)
  • Szkielet aplikacji Pomodoro (85)
• Ćwiczenie (85)
• Podsumowanie (85)

Rozdział 3. Komponenty - zasada działania i zastosowanie (87)

• Powrót do komponentów (87)
• Korzyści z używania komponentów (88)
  
  • Deklaracja szablonów w formacie HTML (88)
  • Obsługa właściwości data i el w komponencie (89)
  • Zasięg komponentów (90)
  • Komponenty zawierające inne komponenty (92)
• Przebudowa aplikacji Lista zakupów za pomocą prostych komponentów (96)
  
  • Definiowanie szablonów dla wszystkich komponentów (97)
  • Definiowanie i rejestrowanie komponentów (99)
• Ćwiczenie (100)
• Komponenty jednoplikowe (100)
  
  • Wtyczki dla środowisk IDE (102)
  • Styl i zasięg (102)
  • Automatyczne odświeżanie (103)
  • Preprocesory (104)
• Przebudowa aplikacji Lista zakupów za pomocą jednoplikowych komponentów (105)
  
  • AddItemComponent (108)
  • Konfiguracja komponentów ItemComponent i ItemsComponent (109)
• Ćwiczenie (111)
• Przebudowa aplikacji Pomodoro za pomocą komponentów jednoplikowych (111)
• Reaktywne wiązanie efektów przejścia CSS (115)
• Podsumowanie (117)

Rozdział 4. Reaktywność - wiązanie danych (119)

• Wiązanie danych raz jeszcze (119)
• Interpolacja danych (120)
  
  • Dodajemy nagłówek ze stanem aplikacji (121)
  • Ćwiczenie (122)
• Wyrażenia i filtry (122)
  
  • Wyrażenia (122)
  • Filtry (126)
  • Ćwiczenie (127)
• Dyrektywy raz jeszcze (127)
  
  • Wiązanie dwukierunkowe przy użyciu dyrektywy v-model (128)
  • Dwukierunkowe wiązanie między komponentami (129)
  • Wiązanie atrybutów za pomocą dyrektywy v-bind (129)
  • Wyświetlanie warunkowe przy użyciu dyrektyw v-if i v-show (131)
  • Przetwarzanie tablicy za pomocą dyrektywy v-for (134)
  • Detektory zdarzeń i dyrektywa v-on (141)
  • Skróty (145)
  • Ćwiczenie (146)
• Koty (146)
• Podsumowanie (146)

Rozdział 5. Vuex - zarządzanie stanem aplikacji (149)

• Komunikacja typu rodzic - dziecko między komponentami, zdarzenia oraz łamigłówka (149)
• Dlaczego potrzebujemy globalnego magazynu stanu? (156)
• Czym jest Vuex? (156)
• Jak działa magazyn i co jest w nim takiego szczególnego? (157)
• Pozdrowienia z magazynu (159)
  
  • Stan magazynu i gettery (164)
  • Mutacje (168)
  • Akcje (169)
• Instalacja magazynu Vuex i jego wykorzystanie w naszych aplikacjach (174)
• Zastosowanie magazynu Vuex w aplikacjach Lista zakupów i Pomodoro (176)
• Zastosowanie magazynu Vuex w aplikacji Pomodoro (180)
  
  • Ożywiamy przyciski startu, pauzy i stopu (180)
  • Obsługa minut i sekund w aplikacji Pomodoro (185)
  • Tworzenie zegara Pomodoro (188)
  • Modyfikacja kota (190)
• Podsumowanie (193)

Rozdział 6. Wtyczki - buduj dom ze swoich własnych cegieł (195)

• Specyfika wtyczek Vue (195)
• Zastosowanie wtyczki vue-resource w aplikacji Lista zakupów (196)
  
  • Tworzenie prostego serwera (197)
  • Instalacja vue-resource, tworzenie zasobów oraz metod (198)
  • Pobieranie list zakupów przy uruchamianiu aplikacji (199)
  • Aktualizowanie danych na serwerze po zmianach (201)
  • Tworzenie nowej listy zakupów (206)
  • Usuwanie istniejących list zakupów (210)
  • Ćwiczenie (212)
• Niestandardowa wtyczka w aplikacji Pomodoro (212)
  
  • Wtyczka NoiseGenerator (213)
  • Zastosowanie wtyczki w aplikacji Pomodoro (216)
  • Przycisk do przełączania dźwięku (218)
  • Ćwiczenie (222)
• Podsumowanie (222)

Rozdział 7. Testy - sprawdzanie poprawności działania aplikacji (225)

• Dlaczego testy jednostkowe? (225)
• Testy jednostkowe dla aplikacji Vue (228)
• Testowanie jednostkowe aplikacji Lista zakupów (229)
  
  • Testowanie akcji, getterów i mutacji (230)
  • Kryteria dobrego testu (233)
  • Stopień pokrycia kodu (234)
  • Symulowanie odpowiedzi serwera i tworzenie asynchronicznych testów (237)
  • Testowanie komponentów (243)
• Tworzenie testów jednostkowych dla aplikacji Pomodoro (245)
• Co to są testy E2E? (249)
• Nightwatch do testów E2E (249)
• Tworzenie testów E2E dla aplikacji Pomodoro (250)
• Podsumowanie (253)

Rozdział 8. Wdrażanie - startujemy w sieci! (255)

• Wdrażanie oprogramowania (255)
  
  • GitHub - co to? (258)
  • Travis - co to? (258)
  • Heroku - co to? (258)
• Przeniesienie aplikacji do repozytorium GitHuba (258)
• Konfiguracja procesu ciągłej integracji za pomocą Travisa (260)
• Wdrażanie aplikacji Pomodoro (265)
  
  • Dziennik zdarzeń (266)
  • Przygotowanie aplikacji do uruchomienia w Heroku (267)
• Wdrażanie aplikacji Lista zakupów (270)
  
  • Używanie Heroku lokalnie (272)
• Podsumowanie (273)

Rozdział 9. Co dalej? (275)

• Co już wiemy (275)
• Vue 2.0 (277)
• Aplikacje raz jeszcze (278)
  
  • Aplikacja Lista zakupów (278)
  • Aplikacja Pomodoro (279)
• Dlaczego to dopiero początek? (281)
  
  • Dodawanie funkcji do naszych aplikacji (281)
  • Upiększamy nasze aplikacje (284)
  • Rozszerzanie dostępności naszych aplikacji na inne urządzenia (285)
• Podsumowanie (285)

Dodatek A. Rozwiązania ćwiczeń (287)

• Ćwiczenie do rozdziału 1. (287)
• Ćwiczenia do rozdziału 2. (289)
  
  • Poszerzenie możliwości wtyczki MathPlugin (289)
  • Zegar Pomodoro jako aplikacja Chrome (290)
• Ćwiczenia do rozdziału 3. (290)
  
  • Ćwiczenie 1. (290)
  • Ćwiczenie 2. (292)

Skorowidz (293)