E-book details

Podręcznik frontendowca. The Big Nerd Ranch Guide

Podręcznik frontendowca. The Big Nerd Ranch Guide

Chris Aquino, Todd Gandee

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)

  • Title: Podręcznik frontendowca. The Big Nerd Ranch Guide
  • Author: Chris Aquino, Todd Gandee
  • Original title: Front-End Web Development: The Big Nerd Ranch Guide
  • Translation: Andrzej Watrak
  • ISBN: 978-83-283-3204-1, 9788328332041
  • Date of issue: 2017-04-09
  • Format: Ebook
  • Item ID: natero
  • Publisher: Helion