Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00135 014263 16001351 na godz. na dobę w sumie
Podręcznik frontendowca. The Big Nerd Ranch Guide - ebook/pdf
Podręcznik frontendowca. The Big Nerd Ranch Guide - ebook/pdf
Autor: , Liczba stron: 488
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-3204-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> ajax
Porównaj ceny (książka, ebook (-40%), audiobook).

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:

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ę.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Front-End Web Development: The Big Nerd Ranch Guide Tłumaczenie: Andrzej Watrak ISBN: 978-83-283-3203-4 Authorized translation from the English language edition, entitled: FRONT-END WEB DEVELOPMENT: THE BIG NERD RANCH GUIDE, First Edition, ISBN 0134433947; by Chris Aquino; and by Todd Gandee; published by Pearson Education, Inc, publishing as The Big Nerd Ranch Guides. Copyright © 2016 Big Nerd Ranch, LLC All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education Inc. Polish language edition published by HELION S.A. Copyright © 2017. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/natero Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści 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 Poleć książkęKup książkę Podręcznik frontendowca. The Big Nerd Ranch Guide 4 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 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 Przygotowanie znaczników a .......................................................................................................122 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 6 Poleć książkęKup książkę Spis treści 7 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 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 7 Poleć książkęKup książkę Podręcznik frontendowca. The Big Nerd Ranch Guide 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 8 Poleć książkęKup książkę Spis treści 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 9 Poleć książkęKup książkę Podręcznik frontendowca. The Big Nerd Ranch Guide 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 10 Poleć książkęKup książkę Część IV Architektura aplikacji Spis treści 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 11 Poleć książkęKup książkę Podręcznik frontendowca. The Big Nerd Ranch Guide 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 dół, akcje w górę ...................................................................................................................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 12 Poleć książkęKup książkę 17 Wersja JavaScript ES6 i translator Babel Język JavaScript powstał w 1994 roku. W 1999 roku został kilkakrotnie zaktualizowany i do 2009 roku nie uległ zmianom. W 2009 roku wprowadzono w nim kilka niewielkich zmian, w wyniku których pojawiła się wersja ES5, czyli piąta edycja standardu języka JavaScript. W 2015 roku, w ramach szóstej edycji, opracowano kilka ulepszeń. Wiele nowych możliwości funkcjonalnych było wzorowanych na innych językach, na przykład Ruby i Python. Szósta edycja otrzymała techniczną nazwę ES2015, ale powszechnie jest znana jako wersja ES6. Wersja ES6 jest dobrze obsługiwana przez przeglądarki Google Chrome, Mozilla Firefox i Microsoft Edge. Są to przeglądarki „zawsze żywe”, tzn. aktualizujące się samoczynnie, bez konieczności ręcznego pobierania i instalowania kolejnych wersji przez użytkownika. Twórcy tych przeglądarek coraz ściślej dostosowują swoje produkty do wersji ES6 i szybko udostępniają je użytkownikom. Jednakże przeglądarki inne niż wyżej wymienione, jak również przeglądarki dla urządzeń przenośnych nie obsługują już tak dobrze wersji ES6. Rysunek 17.1 przedstawia odsetek możliwości funkcjonalnych wersji ES6 obsługiwanych przez najnowsze wersje przeglądarek dla komputerów stacjonarnych i urządzeń przenośnych. (Skróty na rysunku oznaczają, odpowiednio: IE = Internet Explorer, FF = Mozilla Firefox, CH = Google Chrome, SF = Safari, WK = Webkit, KQ = Konqueror i AN = Android). Rysunek 17.1. Odsetek możliwości funkcjonalnych wersji ES6 obsługiwanych przez przeglądarki (dane z wiosny 2016 roku) Poleć książkęKup książkę Rozdział 17. Wersja JavaScript ES6 i translator Babel Jeżeli chcesz uzyskać dokładniejsze lub bardziej aktualne informacje o obsłudze wersji ES6, odwiedź stronę kangax.github.io/compat-table/es6. Jej autor, Juriy Zaytsev, regularnie aktualizuje dane. Choć inne przeglądarki mogą gorzej obsługiwać wersję ES6, jednak my ją bardzo, ale to bardzo lubimy. Jest to doskonały język, który warto zacząć stosować jak najszybciej, nie czekając, aż będzie powszechnie obsługiwany. W tym rozdziale zajmiesz się kliencką częścią aplikacji Czatownik, w której wykorzystasz kilka nowych możliwości wersji ES6. Aby aplikacja działała we wszystkich przeglądarkach, zastosujesz otwarte narzędzie Babel zapewniające kompatybilność kodu. Zanim zaczniesz, musisz wykonać pewną operację porządkową. Abyś mógł skupić się na poznaniu wersji ES6 i narzędzia Babel, przygotowaliśmy gotowe pliki index.html i style\style.css. Pobierz plik ftp://ftp.helion.pl/przyklady/natero.zip rozpakuj go (włącznie z folderem style) do swojego folderu czatownik\aplikacja (istniejący plik index.html zostanie zastąpiony nowym). I jeszcze uwaga: gdy będziesz pracował nad kodem w tym rozdziale, w konsoli przeglądarki może się pojawiać komunikat o niekreślonym typie MIME pliku CSS. Możesz go bezpiecznie zignorować. Do biegu, gotowi, start! Na końcu tego rozdziału aplikacja Czatownik będzie komunikowała się za pomocą protokołu WebSocket z serwerem (patrz rysunek 17.2). Rysunek 17.2. Wygląd aplikacji Czatownik na końcu tego rozdziału Narzędzia do translacji kodu JavaScript Narzędzie Babel jest translatorem. Jego przeznaczeniem jest przekładanie kodu wykorzystującego wersję ES6 na równoważny mu kod w wersji ES5, wykonywany w przeglądarce (patrz rysunek 17.3). Rysunek 17.3. Tworzenie kodu w wersji ES5 na podstawie kodu z wersji ES6 340 Poleć książkęKup książkę Narzędzia do translacji kodu JavaScript Aby móc korzystać z narzędzia Babel, musisz zainstalować za pomocą polecenia npm kilka modułów umożliwiających zdefiniowanie automatycznego procesu translacji kodu. Narzędzie Babel wykorzystasz do przekładania kodu z wersji ES6 na wersję ES5, narzędzie Browserify — do grupowania modułów w jeden plik, a Babelify — do wykonywania obu tych operacji. Dodatkowo użyjesz narzędzia Watchify do uruchamiania procesu translacji po zapisaniu zmian wprowadzonych w kodzie (patrz rysunek 17.4). Rysunek 17.4. Proces translacji kodu Najpierw zainstaluj translator Babel. Narzędzie to składa się z kilku części, instalowanych w zależności od potrzeb. W naszym wypadku będzie wymagana translacja kodu na dwa sposoby: w wierszu poleceń i programie. Do wykonywania tych operacji będą potrzebne narzędzia, odpowiednio, babel-cli i babel-core. Będziesz również musiał zainstalować narzędzie babel-preset-es2015 umożliwiające translację kodu utworzonego w wersji ES6. Przejdź do folderu czatownik i wpisz poniższe polecenia instalujące odpowiednie narzędzia translatora Babel. (Jeżeli nie pamiętasz, jak uruchamiać polecenie npm install -g z uprawnieniami administratora, zajrzyj do rozdziału 1.). npm install -g babel-cli npm install --save-dev babel-core npm install --save-dev babel-preset-es2015 Teraz musisz skonfigurować narzędzie Babel, aby do translacji kodu wykorzystywało zainstalowane właśnie narzędzie babel-preset-es2015. W folderze czatownik utwórz plik o nazwie .babelrc i wpisz w nim następujące instrukcje: { presets : [ es2015 ], plugins : [] } Na koniec w folderze czatownik\node_modules zainstaluj narzędzia Babelify, Browserify i Watchify za pomocą następującego polecenia: npm install --save-dev browserify babelify watchify Z powyższych narzędzi będziesz korzystał w dalszej części rozdziału, po uruchomieniu translatora Babel. 341 Poleć książkęKup książkę Rozdział 17. Wersja JavaScript ES6 i translator Babel Część kliencka aplikacji Czatownik Utworzyłeś już część serwerową aplikacji Czatownik, wysyłającą statyczne pliki i obsługującą wymianę komunikatów za pomocą protokołu WebSocket. Z użyciem tego protokołu część kliencka będzie wysyłała komunikaty i odbierała je z serwera. W niej również zostanie zdefiniowany format komunikatów. Użytkownik będzie widział listę komunikatów, jak również będzie mógł tworzyć nowe komunikaty za pomocą formularza. Powyższe operacje będą realizowane przy użyciu trzech modułów:  modułu ws-klient do zarządzania komunikacją z wykorzystaniem protokołu WebSocket po stronie klienta,  modułu dom do wyświetlania danych w interfejsie użytkownika i wysyłania formularza,  modułu aplikacja definiującego strukturę komunikatów i przekazującego je do modułów ws-klient i dom. Rysunek 17.5 przedstawia zależności między powyższymi modułami. Rysunek 17.5. Moduły aplikacji Czatownik W folderze czatownik\aplikacja utwórz podfoldery skrypty, skrypty\oryg i skrypty\komp, jak na rysunku 17.6. Teraz w folderze skrypty\oryg utwórz cztery pliki, które będą zawierały kod JavaScript:  aplikacja.js,  dom.js,  podst.js,  ws-klient.js. Struktura plików powinna być taka jak na rysunku 17.7. 342 Poleć książkęKup książkę Pierwsze kroki z translatorem Babel Rysunek 17.6. Struktura folderu czatownik\aplikacja Rysunek 17.7. Zawartość folderu czatownik\aplikacja Pliki aplikacja.js, dom.js i ws-klient.js będą zawierały moduły pokazane na rysunku 17.5, natomiast plik podst.js będzie zawierał kod inicjujący aplikację. Pierwsze kroki z translatorem Babel Teraz, po zainstalowaniu narzędzi i utworzeniu plików, czas na rozpoczęcie kodowania w języku JavaScript ES6. Na razie z translatora Babel będziesz korzystał w wierszu poleceń. Później dodasz go do poleceń programu npm, aby translacja była wykonywana automatycznie. Dzięki temu będziesz mógł się skupić na nowych możliwościach funkcjonalnych i składni wersji ES6 i nie będziesz musiał dodatkowo wpisywać poleceń w terminalu. Słowo kluczowe class Pierwszą funkcjonalnością wersji ES6, którą wykorzystasz w części klienckiej aplikacji Czatownik, będzie słowo kluczowe class. Należy pamiętać, że słowo to nie służy do definiowania klas, jak w innych językach, a jedynie do tworzenia konstruktora i metod prototypu za pomocą prostszej składni. Otwórz plik aplikacja.js i zdefiniuj w nim nową klasę o nazwie CzatAplikacja: class CzatAplikacja { } 343 Poleć książkęKup książkę Rozdział 17. Wersja JavaScript ES6 i translator Babel W tym rozdziale klasa CzatAplikacja niewiele będzie robić, jednakże w swojej ostatecznej formie będzie realizowała prawie cały algorytm aplikacji. W tej chwili definicja wspomnianej klasy jest pusta. Dodaj do niej konstruktor zawierający metodę console.log: class CzatAplikacja { constructor() { console.log( Oto wersja ES6! ); } } Słowo constructor oznacza metodę wywoływaną podczas tworzenia instancji klasy. Zazwyczaj konstruktor jest wykorzystywany do ustalania wartości właściwości instancji. Teraz, zaraz za definicją klasy CzatAplikacja, wpisz kod tworzący jej instancję: class CzatAplikacja { constructor() { console.log( Oto wersja ES6! ); } } new CzatAplikacja(); Uruchom próbnie kod. Otwórz drugie okno terminala i przejdź do folderu czatownik, w którym znajdują się pliki package.json, index.js i podfolder aplikacja. W tym oknie będziesz wpisywał polecenia przekładające kod. W pierwszym oknie będzie działał serwer. Aby przetestować kod, przełóż plik aplikacja\skrypty\oryg\aplikacja.js za pomocą narzędzia Babel, a wynikowy kod zapisz w pliku aplikacja\skrypty\komp\podst.js: babel aplikacja/skrypty/oryg/aplikacja.js -o aplikacja/skrypty/komp/podst.js Jeżeli w terminalu nic się nie pojawi, będzie to dobry znak i normalne zjawisko. Jeżeli w kodzie nie ma błędów, wówczas translator Babel nie wyświetla żadnych informacji (patrz rysunek 17.8). Rysunek 17.8. Translator Babel działa niezauważalnie Sprawdź, czy w drugim oknie działa serwer Node (uruchamiany poleceniem npm run dev) i otwórz w przeglądarce stronę o adresie http://localhost:3000. Zobaczysz teraz efekt wykonania kodu (patrz rysunek 17.9). 344 Poleć książkęKup książkę Pakowanie modułów za pomocą narzędzia Browserify Rysunek 17.9. Oto wersja ES6! W pliku aplikacja\index.html znajduje się odnośnik do pliku podst.js utworzonego na bazie pliku aplikacja.js. Ponieważ w pliku aplikacja.js jest tworzona nowa instancja klasy CzatAplikacja, więc wywoływany jest jej konstruktor, wyświetlający w konsoli napis Oto wersja ES6!. Przekonałeś się zatem, że narzędzie Babel prawidłowo przekłada pojedynczy plik JavaScript, czas więc utworzyć kilka modułów. Pakowanie modułów za pomocą narzędzia Browserify Jedną z rzeczy, której brakuje w wersji JavaScript ES5, jest wbudowany system modułów. Podczas tworzenia aplikacji Kafejka wykorzystałeś zastępczy sposób tworzenia modularnego kodu, wymagający jednak użycia zmiennej globalnej. W wersji ES6 dostępne są prawdziwe moduły, takie jak w innych językach. Narzędzie Babel obsługuje składnię wersji ES6, ale nie jest w stanie przełożyć jej na równoważną jej składnię w wersji ES5. Dlatego w takiej sytuacji konieczne jest użycie narzędzia Browserify. Rysunek 17.10 przedstawia współpracę narzędzi Browserify i Babel. Rysunek 17.10. Konwersja modułów utworzonych w wersji ES6 na wersję ES5 za pomocą narzędzi Babel i Browserify Domyślnie narzędzie Babel konwertuje kod modułu utworzonego w wersji ES6 na równoważny mu kod dostosowany do platformy Node.js, wykorzystujący instrukcje require i module.exports. Kod ten jest następnie konwertowany przez narzędzie Browserify na funkcje zgodne z wersją ES5. 345 Poleć książkęKup książkę Rozdział 17. Wersja JavaScript ES6 i translator Babel Otwórz plik package.json i wpisz w nim opcje konfiguracyjne narzędzia Browserify: ... scripts : { test : echo \ Error: no test specified\ exit 1 , start : node index.js , dev : nodemon index.js }, browserify : { transform : [ [ babelify , { presets : [ es2015 ], sourceMap : true}] ] }, ... Powyższy kod powoduje, że narzędzie Browserify będzie wywoływało narzędzie Babelify z dwoma parametrami. Pierwszy z nich, es2015, określa wersję kodu, a drugi — opcję sourceMap (mapa źródłowa) ułatwiającą jego diagnostykę. Podczas tworzenia pozostałych części aplikacji Czatownik dowiesz się, jak diagnozować kod za pomocą map źródłowych. Podobnie jak w wypadku programu nodemon, musisz dla narzędzia Browserify zdefiniować polecenia do wykonywania podstawowych operacji. Wpisz je w pliku package.json, w sekcji scripts. (Pamiętaj o umieszczeniu przecinka na końcu wiersza z poleceniem dev). ... scripts : { test : echo \ Error: no test specified\ exit 1 , start : node index.js , dev : nodemon index.js , build : browserify -d aplikacja/skrypty/oryg/podst.js -o aplikacja/ skrypty/komp/podst.js , watch : watchify -v -d aplikacja/skrypty/oryg/podst.js -o aplikacja/ skrypty/komp/podst.js }, browserify : { transform : [ [ babelify , { presets : [ es2015 ], sourceMap : true}] ] }, ... W pierwszym poleceniu, build, narzędzie Browserify jest wykorzystywane bezpośrednio, natomiast w drugim, watch, wykorzystywane jest narzędzie Watchify wywołujące narzędzie Browserify, gdy w kodzie zostaną wprowadzone zmiany (na czym również skorzysta program nodemon). W kodzie modułu utworzonego w wersji ES6 należy jawnie eksportować klasy, które będą wykorzystywane w innych modułach. W pliku aplikacja.js zamiast instrukcji new, która jedynie tworzy instancję klasy CzatAplikacja, wpisz instrukcję export: class CzatAplikacja { constructor() { console.log( Oto wersja ES6! ); 346 Poleć książkęKup książkę Pakowanie modułów za pomocą narzędzia Browserify } } new CzatAplikacja(); export default CzatAplikacja; W ten sposób określisz, że CzatAplikacja jest domyślną klasą modułu. W innych modułach będziesz eksportował wiele klas. Jeżeli trzeba wyeksportować tylko jedną klasę, najlepiej jest użyć instrukcji export default. W pliku podst.js wpisz instrukcje importujące klasę CzatAplikacja i tworzące jej instancję: import CzatAplikacja from ./aplikacja ; new CzatAplikacja(); W pliku podst.js importowana jest klasa CzatAplikacja wyeksportowana z pliku aplikacja.js. Po zaimportowaniu tworzona jest instancja tej klasy. Należy w tym momencie zwrócić uwagę na ważną rzecz: nazwa klasy użyta w pliku podst.js może być dowolna. Ponieważ klasa CzatAplikacja jest domyślną klasą eksportowaną z pliku aplikacja.js, więc można użyć na przykład instrukcji import MojaAplikacja from ./aplikacja , która przypisze eksportowaną klasę do lokalnego identyfikatora MojaAplikacja. Jednak zgodnie z przyjętą dobrą praktyką należy zastosować nazwę CzatAplikacja, ponieważ taka nazwa została użyta w pliku aplikacja.js. Uruchomienie procesu translacji Teraz w terminalu wpisz następujące polecenie: npm run build Program npm wykona polecenie build wywołujące narzędzie Browserify. W terminalu będą pojawiały się informacje o wykonywanych operacjach. Jednak samo narzędzie Browserify nie wyświetli żadnych informacji, chyba że w kodzie będzie błąd (patrz rysunek 17.11). Rysunek 17.11. Użycie narzędzia Browserify za pomocą polecenia npm run build Jeżeli proces translacji przebiegnie pomyślnie, narzędzie Browserify utworzy w folderze aplikacja\komp plik podst.js, który wcześniej utworzyłeś, ręcznie uruchamiając translację. Teraz odśwież stronę w przeglądarce i sprawdź efekt. Nie wprowadziłeś w kodzie żadnych nowych możliwości funkcjonalnych. Zmieniłeś jedynie miejsce, w którym wywoływany jest konstruktor klasy CzatAplikacja. W konsoli pojawi się zatem ten sam komunikat co poprzednio (patrz rysunek 17.12). 347 Poleć książkęKup książkę Rozdział 17. Wersja JavaScript ES6 i translator Babel Rysunek 17.12. Oto znów wersja ES6! Kolejnym zintegrowanym narzędziem jest Watchify. O ile program nodemon automatycznie restartuje serwer platformy Node.js po każdorazowej zmianie plików źródłowych, o tyle narzędzie Watchify automatycznie konwertuje zmienione pliki za pomocą narzędzia Browserify. Uruchom narzędzie Watchify, aby za każdym razem po wprowadzeniu zmian w kodzie był uruchamiany proces translacji: npm run watch W terminalu pojawi się informacja potwierdzająca, że narzędzie Watchify zostało uruchomione (patrz rysunek 17.13). Rysunek 17.13. Użycie narzędzia Watchify za pomocą polecenia npm run watch Narzędzie Watchify wyświetla nieco więcej informacji niż Browserify. Za każdym razem, gdy zostaną wprowadzone zmiany w kodzie, wyświetla ono komunikat o liczbie zapisanych bajtów. Nie jest to nadzwyczaj interesująca informacja, ale przynajmniej wiadomo, że zmienił się plik wynikowy. Narzędzie Watchify niech działa w jednym z okien terminala (w drugim będzie działał serwer), a Ty teraz zajmij się z powrotem kodem aplikacji Czatownik. Utworzenie klasy CzatKomunikat Przesyłanie komunikatów pomiędzy oknami terminala jest fajne, ale czas ulepszyć aplikację, aby można było przesyłać je pomiędzy przeglądarkami. Zdefiniujesz teraz klasę pomocniczą służącą do tworzenia i formatowania danych przesyłanych w komunikatach. 348 Poleć książkęKup książkę Utworzenie klasy CzatKomunikat W każdym komunikacie musi być zawarty pewien zestaw informacji, czyli treść, informacja o nadawcy i czas wysłania. Do przesyłania danych często wykorzystywany jest format JSON (ang. JavaScript Object Notation; notacja obiektów w JavaScripcie). Zastosowałeś go już w pliku package.json. Jest to czytelny dla człowieka i wspólny dla różnych języków programowania format, idealnie nadający się do przesyłania informacji w aplikacji Czatownik. Poniżej przedstawiony jest przykładowy komunikat zapisany w formacie JSON: { komunikat : Cześć! , użytkownik : Andrzej , czas : 1479067465066 } Komunikaty w aplikacji Czatownik będą pochodziły z dwóch źródeł. Jednym z nich będzie użytkownik wysyłający komunikat po wypełnieniu formularza, a drugim — serwer rozsyłający komunikat do innych użytkowników za pomocą protokołu WebSocket. Po wypełnieniu formularza przez użytkownika należy uzupełnić komunikat przed wysłaniem go do serwera o nazwę użytkownika i bieżący czas. Wszystkie te informacje muszą być również zawarte w komunikatach wysyłanych przez serwer. W jaki sposób można to osiągnąć? Jest kilka możliwości. Przeanalizujmy ogólnie niektóre z nich, zapoznając się przy okazji z paroma ciekawymi możliwościami wersji ES6. W pliku aplikacja.js utwórz klasę, która będzie reprezentowała komunikaty: class CzatAplikacja { constructor() { console.log( Oto wersja ES6! ); } } class CzatKomunikat { constructor(dane) { } } export default CzatAplikacja; Pierwszym sposobem jest utworzenie prostego konstruktora z parametrami zawierającymi treść komunikatu, nazwę użytkownika i czas (nie wprowadzaj tych zmian w pliku, to tylko przykład): ... class CzatKomunikat { constructor(komunikat, użytkownik, czas) { this.komunikat = komunikat; this.użytkownik = użytkownik || Andrzej ; this.czas = czas || (new Date()).getTime(); } } ... Z kodem w takiej postaci już się kilkakrotnie spotkałeś. Wartości parametrów są przypisywane właściwościom obiektu, a za pomocą operatora || określane są ich domyślne wartości. 349 Poleć książkęKup książkę Rozdział 17. Wersja JavaScript ES6 i translator Babel Jest to poprawny kod, ale w wersji ES6 można wykorzystać domyślne argumenty, dzięki którym kod jest bardziej zwarty: ... class CzatKomunikat { constructor(komunikat, użytkownik = Andrzej , czas = (new Date()).getTime();) { this.komunikat = komunikat; this.użytkownik = użytkownik; this.czas = czas; } } ... W powyższym zapisie jest oczywiste, które parametry są obowiązkowe, a które opcjonalne. W tym wypadku wymagany jest tylko parametr komunikat, pozostałym nadawane są domyślne wartości. Konstruktor w takiej postaci może obsługiwać komunikaty odbierane z serwera lub tworzone za pomocą formularza. Jednak w wywołującym go kodzie argumenty muszą być podawane w ściśle określonej kolejności, co w wypadku funkcji i metod z trzema parametrami lub ich większą liczbą może być kłopotliwe. Innym sposobem jest utworzenie konstruktora z jednym parametrem, zawierającym obiekt, w którym za pomocą par klucz/wartość określone są treść komunikatu, nazwa użytkownika i czas. Jest to tzw. przypisanie destrukturyzujące. ... class CzatKomunikat { constructor({komunikat: k, użytkownik: u, czas: c}) { this.komunikat = k; this.użytkownik = u; this.czas = c; } } ... Powyższy kod może się wydawać dziwny, ale działa w następujący sposób: Najpierw wywoływany je
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Podręcznik frontendowca. The Big Nerd Ranch Guide
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: