Podręcznik frontendowca. The Big Nerd Ranch Guide - ebook

Tworzenie aplikacji WWW jest dziś dla programistów sporym wyzwaniem. Piszą kod dla platformy, którą jest przeglądarka — kłopot w tym, że na świecie istnieje całe mnóstwo różnych przeglądarek i jeszcze więcej urządzeń, na których można uruchomić aplikację. A ona oczywiście powinna zawsze działać bez zarzutu! Co więcej, pisanie aplikacji WWW oznacza konieczność zadbania zarówno o wygląd strony, jak i o poprawność algorytmów decydujących o sposobie działania. To wszystko oznacza, że dobry programista aplikacji WWW musi dobrze opanować wiele technik pracy!

Trzymasz w ręku książkę przeznaczoną dla projektantów, którzy znają podstawy programowania i chcą tworzyć funkcjonalne aplikacje WWW, opierającą się na materiale pięciodniowego szkolenia Big Nerd Ranch. Zaprezentowano w niej sporo nowoczesnych technik programistycznych i pokazano, w jaki sposób wykorzystywać je w praktyce. Opisano, jak zaimplementować responsywny interfejs użytkownika i aplikację współdziałającą z serwerem internetowym, przedstawiono platformy Ember i Node.js. Nie zabrakło tu także opisu najnowocześniejszych narzędzi do diagnozowania i testowania kodu. Dzięki tej książce szybko zaczniesz tworzyć nowoczesne, elastyczne i wydajne aplikacje WWW!

Niektóre zagadnienia omówione w książce:

• środowiska programistyczne i narzędzia do projektowania aplikacji WWW
• układy adaptacyjne i zapytania medialne
• moduły, obiekty i metody w kodzie aplikacji
• efekty wizualne i przetwarzanie danych w JavaScripcie
• wykorzystywanie protokołu WebSocket
• diagnostyka i testowanie kodu aplikacji

Programista WWW — mistrz wielu technologii!

Chris Aquino — jest dyrektorem działu rozwoju aplikacji WWW i instruktorem szkoleniowym w firmie Big Nerd Ranch. Niezwykle chętnie przekazuje innym wartościową wiedzę. Uwielbia nakręcane zabawki, espresso i wszelkie formy grillowania.

Todd Gandee — jest instruktorem i programistą aplikacji WWW w Big Nerd Ranch. Swoje umiejętności doskonalił przez 10 lat jako doradca w dziedzinie tworzenia aplikacji internetowych. Poza programowaniem lubi biegać, jeździć na rowerze i wspinać się.

Wprowadzenie (13)

• Nauka tworzenia stron WWW (13)
• Wymagania (14)
• Układ książki (14)
• Jak korzystać z tej książki (15)
• Wyzwania (15)
• Dla ambitnych (16)

CZĘŚĆ I. PODSTAWY TWORZENIA STRON WWW

1. Przygotowanie środowiska programistycznego (19)

• Instalacja przeglądarki Google Chrome (19)
• Instalacja i konfiguracja edytora Atom (19)
  • Wtyczki edytora Atom (21)
• Dokumentacja i źródła informacji (24)
• Błyskawiczny kurs obsługi wiersza polecenia (26)
  • Sprawdzanie bieżącego katalogu (27)
  • Tworzenie katalogu (28)
  • Zmiana katalogu (29)
  • Wyświetlanie listy plików w katalogu (31)
  • Uzyskiwanie uprawnień administratora (32)
  • Wyjście z programu (33)
• Instalacja Node.js i browser-sync (33)
• Dla ambitnych: zamienniki edytora Atom (35)

2. Utworzenie pierwszego projektu (37)

• Utworzenie projektu Wydrowisko (38)
  • Pierwszy kod HTML (39)
  • Dołączanie arkusza stylów (42)
  • Wpisywanie treści strony (43)
  • Umieszczanie obrazów (44)
• Wyświetlanie strony w przeglądarce (46)
• Narzędzia dla programistów w przeglądarce Chrome (48)
• Dla ambitnych: wersje języka CSS (50)
• Dla ambitnych: ikona favicon.ico (51)
• Wyzwanie srebrne: utworzenie pliku favicon.ico (52)

3. Style (53)

• Zastosowanie stylów bazowych (54)
• Przygotowanie kodu HTML do zastosowania stylów (56)
• Budowa stylu (57)
• Twoja pierwsza reguła (58)
  • Model pudełkowy (60)
• Dziedziczenie stylów (62)
• Dopasowanie obrazów do wielkości okna (69)
• Kolory (71)
• Dopasowanie odstępów między elementami listy (74)
  • Selektory relacyjne (75)
• Definiowanie czcionek (79)
• Wyzwanie brązowe: zmiana kolorów (81)
• Dla ambitnych: precyzja kolidujących selektorów (82)

4. Responsywne strony WWW i model flexbox (85)

• Rozbudowa interfejsu użytkownika (86)
  • Umieszczenie dużego obrazu (87)
  • Poziomy układ miniatur (89)
• Model flexbox (91)
  • Tworzenie elastycznego kontenera (92)
  • Zmiana kierunku rozmieszczenia elementów (93)
  • Grupowanie elementów w elastyczne jednostki (95)
  • Właściwość flex (96)
  • Kolejność, wyrównanie i rozmieszczenie elastycznych jednostek (98)
  • Wyśrodkowanie dużego obrazu (102)
• Położenie względne i bezwzględne elementu (105)

5. Układy adaptacyjne i zapytania medialne (111)

• Resetowanie obszaru roboczego (113)
• Stosowanie zapytań medialnych (115)
• Wyzwanie brązowe: pionowa orientacja ekranu (118)
• Dla ambitnych: model flexbox - popularne układy i błędy (118)
• Wyzwanie złote: układ Holy Grail (119)

6. Obsługa zdarzeń za pomocą JavaScriptu (121)

 

• Twój pierwszy skrypt (126)
• Opis kodu JavaScript w projekcie Wydrowisko (127)
• Deklarowanie zmiennych tekstowych (128)
• Praca z konsolą (129)
• Odwołania do elementów modelu DOM (131)
• Utworzenie funkcji zmieńObraz (135)
  • Deklarowanie parametrów funkcji (137)
• Funkcje zwracające wartości (140)
• Tworzenie obserwatora zdarzeń (142)
• Obsługa wszystkich miniatur (147)
• Przetwarzanie tablicy miniatur (149)
• Wyzwanie srebrne: przechwytywanie odnośników (151)
• Wyzwanie złote: losowe zdjęcia wydr (151)
• Dla ambitnych: tryb ścisły (151)
• Dla ambitnych: domknięcia (152)
• Dla ambitnych: listy obiektów i kolekcje elementów HTML (152)
• Dla ambitnych: typy danych w JavaScripcie (153)

 

7. Efekty wizualne i style CSS (155)

• Ukrywanie i pokazywanie dużego obrazu (156)
  • Utworzenie stylów ukrywających duży obraz (157)
  • Utworzenie kodu JavaScript ukrywającego duży obraz (159)
  • Obserwowanie zdarzeń związanych z naciśnięciami klawiszy (161)
  • Ponowne wyświetlenie dużego obrazu (163)
• Zmiany stanów elementów i efekty przejścia (165)
  • Właściwość transform (166)
  • Zdefiniowanie efektu przejścia (168)
  • Funkcje czasu (171)
  • Wywołanie efektu przejścia poprzez zmianę klasy (172)
  • Wywołanie efektu przejścia za pomocą kodu JavaScript (173)
• Własne funkcje czasu (175)
• Dla ambitnych: zasady koercji typów (177)

CZĘŚĆ II. MODUŁY, OBIEKTY I FORMULARZE

8. Moduły, obiekty i metody (181)

• Moduły (182)
  • Szablon modułu (183)
  • Modyfikacja obiektu za pomocą wyrażenia IIFE (185)
• Utworzenie projektu Kafejka (186)
• Utworzenie modułu BazaDanych (187)
• Dodawanie modułów do przestrzeni nazw (188)
• Konstruktory (190)
  • Właściwość prototype konstruktora (191)
  • Tworzenie metod konstruktora (193)
• Utworzenie modułu Furgonetka (195)
  • Składanie zamówień (196)
  • Usuwanie zamówień (198)
• Diagnostyka kodu (200)
  • Wyszukiwanie błędów za pomocą debugera (201)
  • Przypisanie właściwości this wartości za pomocą metody bind (206)
• Inicjowanie aplikacji Kafejka po załadowaniu strony (206)
  • Utworzenie instancji obiektu typu Furgonetka (208)
• Dla ambitnych: prywatne dane modułu (210)
• Wyzwanie srebrne: dane prywatne (211)
• Dla ambitnych: przypisywanie wartości właściwości this w funkcji zwrotnej w metodzie forEach (211)

9. Wprowadzenie do platformy Bootstrap (213)

• Dołączenie platformy Bootstrap (214)
  • Jak działa platforma Bootstrap? (215)
• Utworzenie formularza zamówień (216)
  • Dodanie pól tekstowych (217)
  • Podejmowanie decyzji za pomocą pól wyboru (221)
  • Dodanie rozwijanej listy (222)
  • Dodanie suwaka (224)
  • Dodanie przycisków Wyślij i Resetuj (225)

10. Przetwarzanie danych w formularzu za pomocą JavaScriptu (227)

• Utworzenie modułu ObsługaFormularza (228)
  • Wprowadzenie do biblioteki jQuery (229)
  • Zaimportowanie biblioteki jQuery (230)
  • Konfigurowanie obiektu typu ObsługaFormularza za pomocą selektora (230)
• Dodanie obsługi zdarzenia submit (232)
  • Wyodrębnienie danych (233)
  • Przekazanie i wywołanie funkcji zwrotnej (235)
• Użycie obiektu typu ObsługaFormularza (237)
  • Rejestracja metody złóżZamówienie do obsługi zdarzenia submit (238)
• Udoskonalenia interfejsu użytkownika (239)
• Wyzwanie brązowe: zestaw powiększony (241)
• Wyzwanie srebrne: wyświetlanie wartości ustawianej za pomocą suwaka (241)
• Wyzwanie złote: gratulacje (241)

11. Od danych do modelu DOM (243)

• Utworzenie listy zamówień (244)
• Utworzenie modułu ListaZamówień (245)
• Utworzenie konstruktora Wiersz (246)
  • Tworzenie elementów modelu DOM za pomocą biblioteki jQuery (247)
• Tworzenie wierszy listy zamówień po wystąpieniu zdarzenia submit (252)
  • Modyfikowanie obiektu this za pomocą metody call (253)
• Realizacja zamówienia po kliknięciu pozycji na liście (255)
  • Utworzenie metody ListaZamówień.prototype.usuńWiersz (255)
  • Usuwanie nadpisanych wierszy (256)
  • Utworzenie metody dodajObsługęKliknięcia (257)
  • Wywołanie metody dodajObsługęKliknięcia (259)
• Wyzwanie brązowe: umieszczenie mocy kawy w opisie zamówienia (260)
• Wyzwanie srebrne: kolorowanie smaków kawy (260)
• Wyzwanie złote: edycja zamówień (260)

12. Weryfikacja formularzy (261)

• Atrybut required (261)
• Weryfikacja formularza za pomocą wyrażeń regularnych (263)
• Interfejs Constraint Validation API (263)
  • Obserwacja zdarzenia input (265)
  • Powiązanie metody weryfikującej dane ze zdarzeniem input (266)
  • Uruchamianie mechanizmu weryfikacyjnego (267)
• Definiowanie stylów dla elementów zawierających poprawne i błędne dane (269)
• Wyzwanie brązowe: weryfikacja zamówienia na kawę bezkofeinową (270)
• Dla ambitnych: biblioteka Webshim (270)

13. Ajax (273)

• Klasa XMLHttpRequest (274)
• Usługa REST (275)
• Moduł ZdalnaBazaDanych (275)
• Wysyłanie danych do serwera (276)
  • Zastosowanie metody $.post z biblioteki jQuery (277)
  • Utworzenie funkcji zwrotnej (278)
  • Badanie zapytań i odpowiedzi Ajax (279)
• Odbieranie danych z serwera (282)
  • Badanie odpowiedzi z serwera (282)
  • Utworzenie funkcji zwrotnej (283)
• Usuwanie danych z serwera (285)
  • Zastosowanie metody $.ajax z biblioteki jQuery (285)
• Zamiana modułu BazaDanych na ZdalnaBazaDanych (286)
• Wyzwanie srebrne: weryfikacja danych z odwołaniem do serwera (289)
• Dla ambitnych: narzędzie Postman (289)

14. Obiekty Deferred i Promise (291)

• Obiekty Promise i Deferred (292)
• Zwracanie obiektów Deferred (293)
• Rejestrowanie funkcji zwrotnych za pomocą metody then (295)
• Obsługa błędów za pomocą metody then (296)
• Zastosowanie obiektów Deferred z obiektami wykorzystującymi tylko funkcje zwrotne (298)
• Zastosowanie obiektów Promise w module BazaDanych (303)
  • Tworzenie i zwracanie obiektów Promise (304)
  • Akceptacja obiektu Promise (305)
  • Zastosowanie obiektów Promise w pozostałych metodach modułu BazaDanych (305)
• Wyzwanie srebrne: automatyczne przełączanie na moduł BazaDanych (307)

CZĘŚĆ III. PRZETWARZANIE DANYCH W CZASIE RZECZYWISTYM

15. Wprowadzenie do platformy Node.js (311)

• Platforma Node.js i program npm (313)
  • Polecenie npm init (313)
  • Polecenie npm scripts (313)
• Program "Witaj, świecie!" (315)
• Utworzenie skryptu dla programu npm (316)
• Udostępnianie plików (318)
  • Odczytywanie pliku za pomocą modułu fs (319)
  • Przetwarzanie adresu URL zapytania (319)
  • Zastosowanie modułu path (320)
  • Utworzenie własnego modułu (322)
  • Zastosowanie własnego modułu (322)
• Obsługa błędów (323)
• Dla ambitnych: rejestr modułów programu npm (325)
• Wyzwanie brązowe: tworzenie własnej strony z komunikatem o błędzie (325)
• Dla ambitnych: typy danych MIME (325)
• Wyzwanie srebrne: dynamiczne wysyłanie informacji o typie MIME (327)
• Wyzwanie złote: przeniesienie kodu obsługującego błędy do osobnego modułu (327)

16. Komunikacja w czasie rzeczywistym z wykorzystaniem protokołu WebSocket (329)

• Konfiguracja protokołu WebSocket (331)
• Test serwera WebSocket (333)
• Utworzenie funkcjonalności pogawędki (333)
• Pierwsza pogawędka! (335)
• Dla ambitnych: biblioteka socket.io (336)
• Dla ambitnych: usługa WebSocket (337)
• Wyzwanie brązowe: czy ja się powtarzam? (337)
• Wyzwanie srebrne: hasło dostępu (337)
• Wyzwanie złote: automatyczny klient (337)

17. Wersja JavaScript ES6 i translator Babel (339)

• Narzędzia do translacji kodu JavaScript (340)
• Część kliencka aplikacji Czatownik (342)
• Pierwsze kroki z translatorem Babel (343)
  • Słowo kluczowe class (343)
• Pakowanie modułów za pomocą narzędzia Browserify (345)
  • Uruchomienie procesu translacji (347)
• Utworzenie klasy CzatKomunikat (348)
• Utworzenie modułu ws-klient (352)
  • Obsługa połączeń (353)
  • Obsługa zdarzeń i wysyłanie komunikatów (355)
  • Wysyłanie i wyświetlanie komunikatów (357)
• Dla ambitnych: konwersja na JavaScript kodu utworzonego w innych językach (358)
• Wyzwanie brązowe: domyślna nazwa importowanej zmiennej (358)
• Wyzwanie srebrne: komunikat o zamkniętym połączeniu (359)
• Dla ambitnych: podnoszenie deklaracji (359)
• Dla ambitnych: funkcja strzałkowa (361)

18. Ciąg dalszy przygody z wersją ES6 (363)

• Instalacja biblioteki jQuery jako modułu platformy Node.js (364)
• Utworzenie klasy CzatFormularz (364)
  • Połączenie klasy CzatFormularz z obiektem gniazdo (367)
• Utworzenie klasy CzatLista (368)
• Gravatar (370)
• Pytanie o nazwę użytkownika (372)
• Przechowywanie danych sesji użytkownika (374)
• Formatowanie i aktualizowanie znaczników czasu (377)
• Wyzwanie brązowe: dodanie efektów wizualnych do komunikatów (379)
• Wyzwanie złote: osobne pokoje do pogawędek (379)

CZĘŚĆ IV. ARCHITEKTURA APLIKACJI

19. Wprowadzenie do architektury MVC i platformy Ember (383)

• Aplikacja Tropiciel (384)
• Ember: platforma architektury MVC (385)
  • Instalacja platformy Ember (386)
  • Utworzenie aplikacji opartej na platformie Ember (388)
  • Uruchomienie serwera (389)
• Zewnętrzne biblioteki i dodatki (390)
• Konfiguracja środowiska (391)
• Dla ambitnych: instalacja bibliotek za pomocą programów npm i Bower (395)
• Wyzwanie brązowe: ograniczanie importu bibliotek (395)
• Wyzwanie srebrne: dodanie czcionki Awesome (395)
• Wyzwanie złote: dostosowanie paska nawigacyjnego (395)

20. Sterownik, ścieżki i modele danych (397)

• Polecenie ember generate (398)
• Zagnieżdżanie ścieżek (402)
• Dodatek Ember Inspector (404)
• Przypisanie modeli danych (404)
• Metoda beforeModel (407)
• Dla ambitnych: metody setupController i afterModel (407)

21. Modele danych i wiązanie rekordów (409)

• Definicje modeli (409)
• Metoda createRecord (412)
• Metody get i set (413)
• Właściwości wyliczeniowe (415)
• Dla ambitnych: odczytywanie danych (417)
• Dla ambitnych: modyfikowanie i usuwanie danych (418)
• Wyzwanie brązowe: zmiana właściwości wyliczeniowej (419)
• Wyzwanie srebrne: oznaczanie nowych obserwacji (419)
• Wyzwanie złote: dodawanie tytułów (419)

22. Adaptery, serializatory i transformaty (421)

• Adaptery (423)
• Zasady ochrony treści (427)
• Serializatory (427)
• Transformaty (429)
• Dla ambitnych: dodatek Mirage (430)
• Wyzwanie srebrne: bezpieczeństwo treści (430)
• Wyzwanie złote: dodatek Mirage (431)

23. Widoki i szablony (433)

• Język Handlebars (434)
• Modele (434)
• Elementy pomocnicze (434)
  • Warunkowe elementy pomocnicze (435)
  • Pętla {{#each}} (437)
  • Wiązanie właściwości modelu danych (439)
  • Odnośniki (441)
• Niestandardowe elementy pomocnicze (444)
• Wyzwanie brązowe: dodatkowe informacje do odnośników (446)
• Wyzwanie srebrne: zmiana formatu danych (446)
• Wyzwanie złote: niestandardowy element ikony (447)

24. Kontrolery (449)

• Nowe obserwacje (450)
• Edycja danych obserwacji (457)
• Usuwanie danych o obserwacji (460)
• Akcje ścieżek (462)
• Wyzwanie brązowe: strona ze szczegółami obserwacji (464)
• Wyzwanie srebrne: data obserwacji (464)
• Wyzwanie złote: dodawanie i usuwanie danych świadków (464)

25. Komponenty (465)

• Zawartość pętli jako komponent (466)
• Komponenty w kodzie DRY (469)
• Dane w górę, akcje w dół (470)
• Wiązanie nazw klas (471)
• Dane w dół (473)
• Akcje w górę (475)
• Wyzwanie brązowe: dostosowanie komunikatu (478)
• Wyzwanie srebrne: przekształcenie paska nawigacyjnego w komponent (478)
• Wyzwanie złote: tablica komunikatów (478)

Posłowie (479)

• Ostatnie wyzwanie (479)
• Dziękujemy (479)

Skorowidz (481)