Single Page Web Applications. Programowanie aplikacji internetowych z javascript

Gdy uruchamiasz aplikację na swoim komputerze, tak naprawdę nie wiesz, czy jest to tradycyjna aplikacja działająca na Twoim sprzęcie czy też może aplikacja internetowa. Nie widać przejść między stronami, a atrakcyjny interfejs użytkownika pozwala Ci błyskawicznie wykonać konieczne zadania. Być może za wyświetlanie interfejsu odpowiedzialna jest wyłącznie przeglądarka, która z serwerem komunikuje się tylko w celu wymiany danych. Tak właśnie działają jednostronicowe aplikacje internetowe (ang. Single Page Applications). Jeżeli masz pomysł na taką aplikację, a nie wiesz, od czego zacząć, sięgnij po tę książkę. Dzięki niej zbudujesz swoją pierwszą jednostronicową aplikację internetową oraz poznasz możliwości współczesnego języka JavaScript. W kolejnych rozdziałach będziesz budować aplikację, jednocześnie zdobywając wiedzę na temat wzorca MVC, modelu danych, modułów oraz interfejsu. Kiedy już opanujesz tworzenie klienta, przyjdzie czas na implementację serwera. Jest on odpowiedzialny za przetwarzanie danych otrzymywanych z przeglądarki. W trakcie lektury poznasz możliwości Node.js oraz skonfigurujesz bazę danych. Na sam koniec przygotujesz Twoją aplikację do pracy w środowisku produkcyjnym. Dzięki tej książce: poznasz możliwości języka JavaScript skorzystasz ze wzorca MVC zbudujesz jednostronicową aplikację internetową skonfigurujesz serwer współdziałający z Twoją aplikacją wykorzystasz potencjał Node.js Zbuduj swoją pierwszą jednostronicową aplikację internetową! Spis treści 5 Przedmowa 11 Wstęp 13 Podziękowania 15 O książce 17 Zawartość książki 17 Dla kogo jest ta książka 19 Konwencje użyte w tej książce 19 Przykłady kodu 19 Wymagania programowe i sprzętowe 20 O autorach 20 Część I. Wprowadzenie do aplikacji SPA 21 Rozdział 1. Pierwsza aplikacja jednostronicowa 23 1.1. Definicja, trochę historii oraz nasze cele 24 1.1.1. Trochę historii 24 1.1.2. Dlaczego musieliśmy tak długo czekać na aplikacje SPA JavaScript? 25 1.1.3. Cele 28 1.2. Budowanie pierwszej aplikacji SPA 29 1.2.1. Definiowanie celu 30 1.2.2. Zainicjowanie struktury plików 30 1.2.3. Konfigurowanie narzędzi dla programistów przeglądarki Google Chrome 31 1.2.4. Projektowanie kodów HTML i CSS 31 1.2.5. Dodawanie kodu JavaScript 33 1.2.6. Sprawdzanie działania aplikacji za pomocą narzędzi dla programistów przeglądarki Google Chrome 38 1.3. Korzyści dla użytkownika z dobrze napisanej aplikacji SPA 42 1.4. Podsumowanie 43 Rozdział 2. JavaScript wraca do łask 45 2.1. Zakres zmiennej 47 2.2. Wynoszenie zmiennej 49 2.3. Zaawansowane wynoszenie zmiennej i obiekt kontekstu wykonywania 51 2.3.1. Wynoszenie 51 2.3.2. Kontekst wykonywania i obiekt kontekstu wykonywania 52 2.4. Łańcuch zakresów 56 2.5. Obiekty i łańcuch prototypów języka JavaScript 59 2.5.1. Łańcuch prototypów 62 2.6. Głębsze spojrzenie na funkcje 67 2.6.1. Funkcje oraz funkcje anonimowe 68 2.6.2. Samowykonujące się funkcje anonimowe 68 2.6.3. Wzorzec modułu — wprowadzanie do języka JavaScript zmiennych prywatnych 71 2.6.4. Domknięcia 76 2.7. Podsumowanie 79 Część II. Klient aplikacji SPA 81 Rozdział 3. Projektowanie powłoki 83 3.1. Gruntowne zrozumienie powłoki 84 3.2. Konfigurowanie plików i przestrzeni nazw 85 3.2.1. Tworzenie struktury plików 85 3.2.2. Pisanie kodu HTML aplikacji 86 3.2.3. Tworzenie głównej przestrzeni nazw CSS 87 3.2.4. Tworzenie głównej przestrzeni nazw JavaScript 89 3.3. Tworzenie kontenerów funkcji 90 3.3.1. Wybór strategii 90 3.3.2. Pisanie kodu HTML powłoki 91 3.3.3. Pisanie kodu CSS powłoki 92 3.4. Renderowanie kontenerów funkcji 95 3.4.1. Konwersja HTML na JavaScript 95 3.4.2. Dodawanie szablonu HTML do JavaScript 96 3.4.3. Pisanie arkusza stylów powłoki 97 3.4.4. Nakazanie aplikacji, aby korzystała z powłoki 99 3.5. Zarządzanie kontenerami funkcji 100 3.5.1. Pisanie metody rozwijania i zwijania suwaka czatu 101 3.5.2. Dodanie procedury obsługi zdarzeń kliknięcia suwaka czatu 103 3.6. Zarządzanie stanem aplikacji 107 3.6.1. Zachowania przeglądarki oczekiwane przez użytkowników 107 3.6.2. Wybór strategii zarządzania kontrolkami historii 108 3.6.3. Zmiana kotwicy przy wystąpieniu zdarzenia historii 109 3.6.4. Użycie kotwicy do sterowania stanem aplikacji 111 3.7. Podsumowanie 116 Rozdział 4. Dodawanie modułów funkcji 119 4.1. Strategia modułu funkcji 120 4.1.1. Porównanie z modułami zewnętrznymi 121 4.1.2. Moduły funkcji i fraktalowy wzorzec MVC 123 4.2. Konfigurowanie plików modułu funkcji 125 4.2.1. Planowanie struktury plików 125 4.2.2. Zapełnianie plików 126 4.2.3. Co mamy napisane 132 4.3. Projektowanie interfejsów API metod 132 4.3.1. Wzorzec interfejsu kotwicy 133 4.3.2. Interfejsy API konfiguracji Czatu 134 4.3.3. Interfejs API inicjowania Czatu 135 4.3.4. Interfejs API metody setSliderPosition Czatu 136 4.3.5. Kaskada konfiguracji i inicjowania 137 4.4. Implementowanie interfejsu API funkcji 139 4.4.1. Arkusze stylów 139 4.4.2. Modyfikacja Czatu 144 4.4.3. Czyszczenie powłoki 149 4.4.4. Prześledzenie wykonywania aplikacji 154 4.5. Dodanie często potrzebnych metod 156 4.5.1. Metoda removeSlider 157 4.5.2. Metoda handleResize 158 4.6. Podsumowanie 162 Rozdział 5. Budowanie Modelu 163 5.1. Czym jest Model 164 5.1.1. Co zamierzamy zbudować 165 5.1.2. Zadania Modelu 166 5.1.3. Czego Model nie robi 167 5.2. Konfigurowanie Modelu oraz innych plików 168 5.2.1. Planowanie struktury plików 168 5.2.2. Wypełnianie plików 169 5.2.3. Zastosowanie ujednoliconej biblioteki do obsługi wprowadzania danych za pomocą dotyku i myszy 174 5.3. Projektowanie obiektu people 175 5.3.1. Projektowanie obiektów person 176 5.3.2. Projektowanie interfejsu API obiektu people 178 5.3.3. Dokumentowanie interfejsu API obiektu people 181 5.4. Budowanie obiektu people 182 5.4.1. Tworzenie listy symulowanych osób 182 5.4.2. Rozpoczęcie budowy obiektu people 185 5.4.3. Dokończenie obiektu people 189 5.4.4. Testowanie interfejsu API obiektu people 195 5.5. Implementacja logowania i wylogowania w powłoce 197 5.5.1. Projektowanie wrażeń użytkownika podczas logowania 198 5.5.2. Aktualizacja kodu JavaScript powłoki 199 5.5.3. Aktualizacja arkusza stylów powłoki 201 5.5.4. Testowanie procesów logowania i wylogowania za pomocą interfejsu użytkownika 202 5.6. Podsumowanie 203 Rozdział 6. Dokończenie budowy modułów modelu i danych 205 6.1. Projektowanie obiektu chat 206 6.1.1. Projektowanie metod i zdarzeń 206 6.1.2. Dokumentowanie interfejsu API obiektu chat 209 6.2. Budowanie obiektu chat 210 6.2.1. Rozpoczęcie budowy obiektu chat przez utworzenie metody join 210 6.2.2. Aktualizacja Atrapy, aby reagowała na metodę chat.join 213 6.2.3. Testowanie metody chat.join 214 6.2.4. Dodanie do obiektu chat obsługi przesyłania wiadomości 216 6.2.5. Aktualizacja Atrapy w celu emulowania komunikatów 220 6.2.6. Testowanie obsługi komunikatów dla obiektu chat 222 6.3. Dodanie obsługi Awatara do Modelu 224 6.3.1. Dodanie obsługi Awatara do obiektu chat 224 6.3.2. Modyfikacja Atrapy w celu emulacji awatarów 225 6.3.3. Testowanie obsługi awatarów 226 6.3.4. Technika projektowania sterowanego testami 227 6.4. Dokończenie modułu funkcji czatu 229 6.4.1. Aktualizacja kodu JavaScript Czatu 230 6.4.2. Aktualizacja arkuszy stylów 237 6.4.3. Testowanie interfejsu użytkownika Czatu 241 6.5. Tworzenie modułu funkcji awatara 242 6.5.1. Utworzenie pliku JavaScript Awatara 243 6.5.2. Tworzenie arkusza stylów Awatara 248 6.5.3. Aktualizacja powłoki i dokumentu przeglądarkowego 249 6.5.4. Testowanie modułu funkcji awatara 250 6.6. Wiązanie danych oraz jQuery 250 6.7. Tworzenie modułu danych 252 6.8. Podsumowanie 255 Część III. Serwer aplikacji SPA 257 Rozdział 7. Serwer WWW 259 7.1. Rola serwera 259 7.1.1. Uwierzytelnianie i autoryzacja 260 7.1.2. Walidacja 260 7.1.3. Przechowywanie i synchronizacja danych 261 7.2. Node.js 261 7.2.1. Dlaczego Node.js? 262 7.2.2. Tworzenie aplikacji „Witaj, świecie!” za pomocą serwera Node.js 262 7.2.3. Instalowanie frameworku Connect i korzystanie z niego 266 7.2.4. Dodawanie funkcji pośredniczących frameworku Connect 267 7.2.5. Instalowanie frameworku Express i korzystanie z niego 268 7.2.6. Dodawanie funkcji pośredniczących frameworku Express 271 7.2.7. Korzystanie z różnych środowisk za pomocą frameworku Express 272 7.2.8. Serwowanie plików statycznych za pomocą frameworku Express 273 7.3. Zaawansowany routing 274 7.3.1. Trasy operacji CRUD obiektu user 275 7.3.2. Ogólny routing operacji CRUD 281 7.3.3. Umieszczenie routingu w osobnym module Node.js 284 7.4. Dodanie uwierzytelniania i autoryzacji 288 7.4.1. Uwierzytelnianie podstawowe 288 7.5. Technologia WebSocket i biblioteka Socket.IO 289 7.5.1. Prosta aplikacja Socket.IO 290 7.5.2. Socket.IO oraz serwery wymiany komunikatów 293 7.5.3. Aktualizacja kodu JavaScript z wykorzystaniem Socket.IO 294 7.6. Podsumowanie 297 Rozdział 8. Baza danych serwera 299 8.1. Rola bazy danych 300 8.1.1. Wybór magazynu danych 300 8.1.2. Eliminacja transformacji danych 300 8.1.3. Przeniesienie logiki w wymagane miejsce 301 8.2. Wprowadzenie do MongoDB 302 8.2.1. Przechowywanie dokumentowe 303 8.2.2. Dynamiczna struktura dokumentów 303 8.2.3. Pierwsze kroki z MongoDB 304 8.3. Użycie sterownika MongoDB 305 8.3.1. Przygotowanie plików projektu 306 8.3.2. Instalacja i podłączenie do MongoDB 307 8.3.3. Zastosowanie metod CRUD bazy danych MongoDB 308 8.3.4. Dodanie operacji CRUD do aplikacji serwera 311 8.4. Walidacja danych klienta 315 8.4.1. Walidacja typu obiektu 316 8.4.2. Walidacja obiektu 317 8.5. Tworzenie osobnego modułu CRUD 325 8.5.1. Przygotowanie struktury plików 326 8.5.2. Przeniesienie logiki operacji CRUD do osobnego modułu 329 8.6. Budowanie modułu czatu 334 8.6.1. Rozpoczęcie budowy modułu czatu 334 8.6.2. Tworzenie procedury obsługi komunikatu adduser 337 8.6.3. Tworzenie procedury obsługi komunikatu updatechat 341 8.6.4. Tworzenie procedur obsługi komunikatów rozłączania 343 8.6.5. Tworzenie procedury obsługi komunikatu updateavatar 345 8.7. Podsumowanie 348 Rozdział 9. Przygotowanie aplikacji SPA do pracy w środowisku produkcyjnym 349 9.1. Optymalizacja naszej aplikacji SPA dla wyszukiwarek 350 9.1.1. Jak Google indeksuje aplikację SPA 350 9.2. Chmura i usługi zewnętrzne 354 9.2.1. Analityka stron WWW 354 9.2.2. Rejestrowanie błędów po stronie klienta 356 9.2.3. Systemy CDN 358 9.3. Buforowanie i pomijanie pamięci podręcznej 359 9.3.1. Możliwości buforowania 359 9.3.2. Web Storage 360 9.3.3. Buforowanie HTTP 362 9.3.4. Buforowanie serwera 365 9.3.5. Buforowanie zapytań bazy danych 371 9.4. Podsumowanie 372 Dodatki 375 Dodatek A Standard kodowania JavaScript 377 A.1. Dlaczego potrzebujemy standardu kodowania 378 A.2. Układ kodu i komentarze 379 A.2.1. Stosuj układ kodu zapewniający czytelność 379 A.2.2. Komentarze objaśniające i dokumentujące 386 A.3. Nazwy zmiennych 389 A.3.1. Redukcja liczby komentarzy i poprawienie ich jakości dzięki zastosowaniu konwencji nazewnictwa 389 A.3.2. Stosowanie wytycznych dotyczących nazw 391 A.3.3. Zastosowanie wskazówek dotyczących nazewnictwa 397 A.4. Deklarowanie i przypisywanie zmiennych 398 A.5. Funkcje 400 A.6. Przestrzenie nazw 402 A.7. Nazwy i układ plików 403 A.8. Składnia 404 A.8.1. Etykiety 404 A.8.2. Instrukcje 405 A.8.3. Pozostała składnia 407 A.9. Walidacja kodu 408 A.9.1. Instalacja JSLint 408 A.9.2. Konfiguracja JSLint 409 A.9.3. Zastosowanie JSLint 410 A.10. Szablon dla modułów 411 A.11. Podsumowanie 413 Dodatek B Testowanie aplikacji SPA 415 B.1. Konfiguracja trybów testowych 416 B.2. Wybór frameworku testowego 420 B.3. Konfiguracja frameworku nodeunit 421 B.4. Tworzenie zestawu testów 422 B.4.1. Ładowanie modułów przez serwer Node.js 422 B.4.2. Konfiguracja pojedynczego testu nodeunit 425 B.4.3. Przygotowanie pierwszego prawdziwego testu 426 B.4.4. Mapowanie zdarzeń i testów 427 B.4.5. Tworzenie zestawu testów 429 B.5. Dostosowanie modułów SPA do testów 441 B.6. Podsumowanie 444 Skorowidz 445