Details zum E-Book

Podręcznik frontendowca. The Big Nerd Ranch Guide

Podręcznik frontendowca. The Big Nerd Ranch Guide

Chris Aquino, Todd Gandee

E-book

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)

  • Titel: Podręcznik frontendowca. The Big Nerd Ranch Guide
  • Autor: Chris Aquino, Todd Gandee
  • Originaler Titel: Front-End Web Development: The Big Nerd Ranch Guide
  • Übersetzung: Andrzej Watrak
  • ISBN: 978-83-283-3204-1, 9788328332041
  • Veröffentlichungsdatum: 2017-04-09
  • Format: E-book
  • Artikelkennung: natero
  • Verleger: Helion