Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00345 007244 15916340 na godz. na dobę w sumie
Responsywne i wydajne projekty internetowe. Szybkie aplikacje dla każdego - ebook/pdf
Responsywne i wydajne projekty internetowe. Szybkie aplikacje dla każdego - ebook/pdf
Autor: Liczba stron: 160
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-0841-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook (-40%), audiobook).

Superwydajne aplikacje i strony WWW!

1024×768, 800×600 — czy te liczby coś Ci mówią? To najpopularniejsze rozdzielczości ekranu, które obowiązywały w czasach przed mobilną rewolucją. Obecnie użytkownicy korzystają z przeróżnych ekranów, wyświetlających obrazy w wielu innych rozdzielczościach. Jak sobie z tym poradzić? Jak tworzyć strony WWW, które będą działać poprawnie na każdym dostępnym urządzeniu? Jak rozwiązać problemy z wydajnością? Na te i dziesiątki innych pytań odpowiada ta niezwykła książka.

Sięgnij po nią i zapoznaj się z najnowszymi trendami w tworzeniu responsywnych i wydajnych stron WWW oraz aplikacji internetowych. W trakcie lektury zdobędziesz bezcenną wiedzę na temat mierzenia wydajności aplikacji oraz czynników, które mają na nią wpływ. Kolejne rozdziały dostarczą Ci wyczerpujących informacji dotyczących ciekawych rozwiązań problemu wydajności po stronie klienta oraz serwera, a ponadto zaprezentują techniki ciągłego testowania wydajności. Przekonaj się, jak istotne jest zapewnianie obrazów dopasowanych do urządzenia oraz stosowanie pamięci podręcznej. Poznaj dostępne responsywne szkielety oraz ich ocenę według osobistych kryteriów autora. Jest to doskonała lektura dla wszystkich osób podążających za trendami w tworzeniu stron WWW i aplikacji internetowych.

Poznaj sposoby tworzenia wydajnych i responsywnych aplikacji internetowych!



Tom Barker — jest związany z wytwarzaniem oprogramowania od lat 90. XX wieku. Aktualnie pełni funkcję dyrektora ds. wytwarzania oprogramowania w firmie Comcast. Interesuje się analizą danych i ich wizualizacją. Szczególną uwagę przykłada do tworzenia kodu wysokiej jakości.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: High Performance Responsive Design Tłumaczenie: Jakub Hubisz ISBN: 978-83-283-0838-1 © 2015 Helion S.A. Authorized Polish translation of the English edition of High Performance Responsive Design, ISBN 9781491949986 © 2015 Tom Barker This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. 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 the Publisher. 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) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/rewypr.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/rewypr 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(cid:316)ci Przedmowa ...................................................................................... 7 O autorze .........................................................................................(cid:3)1(cid:26) Problem projektowania responsywnego Podsumowanie Podstawy mierzenia wydajno(cid:264)ci Czym jest wydajno(cid:264)(cid:232) sieciowa? Liczba (cid:276)(cid:241)da(cid:254) HTTP Waga strony Czas (cid:228)adowania strony Wnioski z analizy porównawczej Jak mogli(cid:264)my tego nie zauwa(cid:276)y(cid:232)? Jak znale(cid:274)li(cid:264)my si(cid:246) w tym punkcie? Dlaczego nie skorzysta(cid:232) z mdot? To ma znaczenie ze wzgl(cid:246)du na skal(cid:246) 1. Stan rynku projektowania responsywnego ..................................11 11 14 23 23 26 28 28 2. Podstawy wydajno(cid:316)ci aplikacji internetowych ............................ 31 31 32 38 38 38 39 50 52 54 58 3. Zacznij od planowania ..................................................................59 59 60 61 65 Podsumowanie ca(cid:228)ego zadania Okre(cid:264)lenie ogólnych kamieni milowych i terminów Narz(cid:246)dzia pozwalaj(cid:241)ce (cid:264)ledzi(cid:232) wydajno(cid:264)(cid:232) sieciow(cid:241) Wydajno(cid:264)(cid:232) wykonywania Klatki na sekund(cid:246) Profilowanie pami(cid:246)ci Podsumowanie Podró(cid:276) po równi pochy(cid:228)ej Plany projektowe 3 Poleć książkęKup książkę Podsumowanie Informacja o kliencie Us(cid:228)ugi wykrywania urz(cid:241)dzenia Wyszczególnienie zale(cid:276)no(cid:264)ci i ryzyka KPI b(cid:246)d(cid:241)ce miar(cid:241) sukcesu Zachowaj SLA Stos internetowy Stos sieciowy Warstwa aplikacji Stos aplikacji sieciowej Odpowiadanie po stronie serwera 66 69 69 69 4. Po stronie serwera ......................................................................... 71 71 71 73 77 78 80 82 90 91 93 5. Po stronie klienta ...........................................................................95 95 96 99 103 110 112 6. Ci(cid:233)g(cid:293)e testowanie wydajno(cid:316)ci .....................................................113 113 114 Trzymanie kursu Automatyzacja testów wydajno(cid:264)ci sieciowej Implikacje cache’owania Wtyczki brzegowe Podsumowanie Praca z obrazami Atrybut srcset Element picture Biblioteki wykrywania urz(cid:241)dze(cid:254) Leniwe (cid:228)adowanie Podsumowanie Automatyczne testy z wykorzystaniem przegl(cid:241)darki bez interfejsu Podsumowanie Ci(cid:241)g(cid:228)a integracja Przyk(cid:228)adowy skrypt PhantomJS Jenkins 115 121 123 129 134 7. Frameworki .................................................................................. 135 135 137 140 140 142 Przegl(cid:241)d stanu frameworków responsywnych Bootstrap Ocena Foundation Ocena 4 (cid:95) Spis tre(cid:316)ci Poleć książkęKup książkę Skeleton Ocena Semantic UI Ocena Porównanie frameworków dzia(cid:228)aj(cid:241)cych po stronie klienta Ripple Podsumowanie 144 147 147 151 151 153 155 Skorowidz ............................................................................................... 156 Spis tre(cid:316)ci (cid:95) 5 Poleć książkęKup książkę 6 (cid:95) Spis tre(cid:316)ci Poleć książkęKup książkę ROZDZIA(cid:292) 1. Stan rynku projektowania responsywnego Problem projektowania responsywnego Bra(cid:228)em udzia(cid:228) w sesji planowania mapy drogowej z jednym z moich zespo- (cid:228)ów i nasz(cid:241) w(cid:228)a(cid:264)cicielk(cid:241) produktu. Dyskutowali(cid:264)my o zmianie wygl(cid:241)du naszej sekcji wideo, kiedy lider zespo(cid:228)u zacz(cid:241)(cid:228) mówi(cid:232) o planach jej respon- sywno(cid:264)ci. Opisali(cid:264)my stworzenie pojedynczej strony z wy(cid:264)wietlanym na niej naszym domy(cid:264)lnym odtwarzaczem wideo, który zmienia(cid:228)by rozmiary i (cid:228)adowa(cid:228) zasoby oraz listy odtwarzania ró(cid:276)nych typów filmów, zale(cid:276)nie od urz(cid:241)dzenia wykorzystanego do uruchomienia strony. Rozwi(cid:241)zanie to mia(cid:228)o by(cid:232) pi(cid:246)kne i wszechstronne, a tak(cid:276)e mia(cid:228)o rozszerza(cid:232) mo(cid:276)liwo(cid:264)ci ogl(cid:241)dania filmów dla wielu urz(cid:241)dze(cid:254), na których wcze(cid:264)niej nie by(cid:228)o to mo(cid:276)liwe. Nasza w(cid:228)a(cid:264)cicielka produktu zmarszczy(cid:228)a nos i powiedzia(cid:228)a: „Có(cid:276), po tym jak responsywna okaza(cid:228)a si(cid:246) strona g(cid:228)ówna, pozosta(cid:228) nam pewien niesmak”. Zaskoczy(cid:228)o mnie to. Co by(cid:228)o nie tak z nasz(cid:241) responsywn(cid:241) stron(cid:241) g(cid:228)ówn(cid:241)? Musia(cid:228)em zbada(cid:232) ten temat. Zespó(cid:228) mia(cid:228) wra(cid:276)enie, (cid:276)e strona g(cid:228)ówna jest ci(cid:246)(cid:276)ka i wolno si(cid:246) (cid:228)aduje. Kiedy programi(cid:264)ci demonstrowali j(cid:241) na swoich laptopach, wygl(cid:241)da(cid:228)a (cid:264)wietnie, kiedy jednak zespó(cid:228) próbowa(cid:228), korzystaj(cid:241)c ze s(cid:228)abszych urz(cid:241)dze(cid:254), zaprezen- towa(cid:232) stron(cid:246) osobom decyzyjnym, (cid:228)adowanie jej trwa(cid:228)o d(cid:228)ugo — zbyt d(cid:228)ugo. 11 Poleć książkęKup książkę Spojrza(cid:228)em na wykres wodospadowy1 dla renderowania strony g(cid:228)ównej na urz(cid:241)dzeniu mobilnym i laptopie. Zauwa(cid:276)y(cid:228)em co(cid:264), co — kiedy ju(cid:276) wie- dzia(cid:228)em, czego szuka(cid:232) — zacz(cid:241)(cid:228)em dostrzega(cid:232) na wielu stronach. Podczas (cid:228)adowania strony dla smartfona wykorzystywane by(cid:228)y te same zasoby co w wersji dla komputerów oraz dodatkowy arkusz stylów CSS i plik ze sprite’ami. Rysunek 1.1 obrazuje to, (cid:276)e rozmiar strony renderowanej dla urz(cid:241)dzenia mobilnego by(cid:228) nieznacznie wi(cid:246)kszy ni(cid:276) w wersji dla kom- puterów (1,2 MB kontra 952 kB) i (cid:276)e wykonywane by(cid:228)y dwa dodatkowe (cid:276)(cid:241)dania. Rysunek 1.1. Wykres wodospadowy dla strony g(cid:228)ównej renderowanej dla smartfona Zauwa(cid:276), (cid:276)e na rysunku 1.1 rozmiar przes(cid:228)anych plików wynosi 1,2 MB w 134 (cid:276)(cid:241)daniach. Ale jest to przecie(cid:276) wersja dla telefonów i rozmiar powinien by(cid:232) mniejszy. Tak jednak nie jest — co pokazuje rysunek 1.2. Ca(cid:228)kowity rozmiar dla komputerów wynosi 952 kB w 132 (cid:276)(cid:241)daniach. To jasne, (cid:276)e w wersji dla telefonów (cid:228)aduje si(cid:246) ta sama zawarto(cid:264)(cid:232) co w wersji dla komputerów oraz dodatkowe dwa pliki. Nie trzeba dodawa(cid:232), (cid:276)e nie wspó(cid:228)gra to z ograniczeniami przepustowo(cid:264)ci wyst(cid:246)puj(cid:241)cymi na urz(cid:241)dzeniach mobilnych. 1 Wykresy wodospadowe wizualizuj(cid:241) dane dotycz(cid:241)ce (cid:276)(cid:241)da(cid:254) HTTP, czas potrzebny do za(cid:228)adowania zasobów oraz wielko(cid:264)(cid:232) plików zwi(cid:241)zanych z ka(cid:276)dym (cid:276)(cid:241)daniem, sk(cid:228)adaj(cid:241)cych si(cid:246) na stron(cid:246) internetow(cid:241). Bardziej dog(cid:228)(cid:246)bna analiza wykresów wodospadowych zostanie przedstawiona w rozdziale 2. 12 (cid:95) Rozdzia(cid:293) 1. Stan rynku projektowania responsywnego Poleć książkęKup książkę Rysunek 1.2. Wykres wodospadowy dla strony renderowanej dla komputera Taka sytuacja przeczy ca(cid:228)kowicie naszym intencjom stworzenia strony mobilnej. A nie byli(cid:264)my sami. Otworzy(cid:228)em przegl(cid:241)dark(cid:246) na laptopie oraz program HTTPWatch na iPhonie i aby mie(cid:232) porównanie, przeanalizowa(cid:228)em pierw- szych 50 stron z rankingu Alexa.com. Zauwa(cid:276)y(cid:228)em, (cid:276)e oko(cid:228)o 30 tych stron przesy(cid:228)a(cid:228)o wi(cid:246)cej danych w wersji dla telefonów ni(cid:276) dla komputerów — w(cid:264)ród nich by(cid:228)y strony firm technologicznych, banków i sprzedawców deta- licznych. Oprócz moich w(cid:228)asnych spostrze(cid:276)e(cid:254) taki stan rzeczy potwierdza(cid:228)o tak(cid:276)e kilka znacz(cid:241)cych raportów. Globalna cyfrowa agencja marketingowa, The Search Agency, przeanalizowa(cid:228)a 100 najbardziej znanych stron sklepów in- ternetowych oraz strony firm z listy Fortune 100 i opublikowa(cid:228)a nast(cid:246)puj(cid:241)ce raporty: (cid:120) „Multichannel Retailers” („Sprzedawcy wielokana(cid:228)owi” — http://bit.ly/1vqYUPh), (cid:120) „Fortune 100 Companies” („Firmy Fortune 100” — http://bit.ly/1r1SDlA). Wskazówka Aby uzyska(cid:232) dost(cid:246)p do tych raportów, b(cid:246)dziesz musia(cid:228) przekaza(cid:232) agencji swój adres e-mail, a raport dostaniesz poczt(cid:241). Problem projektowania responsywnego (cid:95) 13 Poleć książkęKup książkę W jednym z raportów znalaz(cid:228) si(cid:246) wykres przedstawiony na rysunku 1.3, pokazuj(cid:241)cy, (cid:276)e strony, które wykorzystywa(cid:228)y (lub raczej b(cid:228)(cid:246)dnie wykorzy- stywa(cid:228)y) koncepcj(cid:246) projektowania responsywnego, (cid:228)adowa(cid:228)y si(cid:246) (cid:264)rednio 1,91 sekundy d(cid:228)u(cid:276)ej od zwyk(cid:228)ych stron. Co wi(cid:246)cej, te strony (cid:228)adowa(cid:228)y si(cid:246) o 10,74 sekundy d(cid:228)u(cid:276)ej ni(cid:276) strony dedykowane dla urz(cid:241)dze(cid:254) mobilnych. Rysunek 1.3. Porównanie (cid:264)rednich czasów (cid:228)adowania dla stron responsywnych oraz stron dedykowanych dla urz(cid:241)dze(cid:254) mobilnych i dla komputerów Guy Podjarny, dyrektor techniczny w firmie Akamai, na swym blogu tak(cid:276)e opisa(cid:228) swoje wnioski z wykonywania podobnych testów. Porównywa(cid:228) rozmiary stron dla ró(cid:276)nych rozdzielczo(cid:264)ci i przekona(cid:228) si(cid:246), (cid:276)e ró(cid:276)nice pomi(cid:246)- dzy nimi s(cid:241) bardzo nieznaczne. Artyku(cid:228) mo(cid:276)esz znale(cid:274)(cid:232) pod adresem http:// bit.ly/1tBv6cT. Czy wszyscy mylili(cid:264)my si(cid:246) w naszej interpretacji koncepcji projektowania responsywnego? Wnioski z analizy porównawczej Moje obserwacje stron z listy Alexa tak(cid:276)e pozwoli(cid:228)y uzyska(cid:232) interesuj(cid:241)ce dane. Mi(cid:246)dzy innymi zauwa(cid:276)y(cid:228)em nast(cid:246)puj(cid:241)ce rzeczy: (cid:120) 47 z najbardziej znanych stron w USA nadal korzysta(cid:228)o ze stron de- dykowanych dla mdot2. Zastanówmy si(cid:246) przez chwil(cid:246) nad t(cid:241) liczb(cid:241). S(cid:241) 2 Strona mdot to strona dedykowana tylko dla urz(cid:241)dze(cid:254) mobilnych, maj(cid:241)ca swój w(cid:228)asny adres URL, zazwyczaj w konwencji wykorzystuj(cid:241)cej m jako subdomen(cid:246) (np. m.comcast.net lub m.homedepot.com). Istniej(cid:241) nawet nowsze, dedykowane dla tabletów, wersje stron mdot, dla których subdomen(cid:246) stanowi litera t (np. t.homedepot.com). 14 (cid:95) Rozdzia(cid:293) 1. Stan rynku projektowania responsywnego Poleć książkęKup książkę to najcz(cid:246)(cid:264)ciej odwiedzane strony, prawdopodobnie nale(cid:276)(cid:241) do liderów w swoich dziedzinach — w(cid:264)ród nich znajduj(cid:241) si(cid:246) tacy giganci jak YouTube, eBay czy Target — a jednak ci liderzy rezygnuj(cid:241) z responsywnych stron na rzecz osobnych dedykowanych stron. (cid:120) Te dedykowane strony by(cid:228)y (cid:264)rednio o 55 mniejsze od stron respon- sywnych. Przeci(cid:246)tny rozmiar dla podzbioru wykorzystuj(cid:241)cego strony mdot wynosi(cid:228) 383 kB, podczas gdy dla stron responsywnych a(cid:276) 851 kB (patrz rysunek 1.4). Pokazuje to ogromn(cid:241) rozbie(cid:276)no(cid:264)(cid:232) pomi(cid:246)dzy inten- cjami a implementacj(cid:241). Rysunek 1.4. (cid:263)redni rozmiar dla stron dedykowanych i responsywnych (w kB) (cid:120) Rozmiary plików stron responsywnych by(cid:228)y bardzo ró(cid:276)ne i si(cid:246)ga(cid:228)y na- wet 4 MB, podczas gdy rozmiary stron mdot nie przekracza(cid:228)y 1 MB. Co wi(cid:246)cej, strony mdot znajduj(cid:241) si(cid:246) w wi(cid:246)kszo(cid:264)ci w przedziale od 0 do 200 kB i od 200 do 400 kB. Opracowa(cid:228)em histogramy pozwalaj(cid:241)ce spojrze(cid:232) na rozk(cid:228)ad rozmiarów plików dla stron mdot i responsywnych (znajdziesz je na rysunkach 1.5 i 1.6). Zwró(cid:232) uwag(cid:246) na skal(cid:246) osi X na ka(cid:276)dym z wykresów. Dla dedykowanych stron trzy pierwsze s(cid:228)upki s(cid:241) zdecydowanie wi(cid:246)ksze ni(cid:276) ostatni, reprezentu- j(cid:241)cy strony o rozmiarze 1 MB. Dla stron responsywnych strony o rozmiarze 1 MB stanowi(cid:241) drug(cid:241) najliczniejsz(cid:241) grup(cid:246), a rozmiary si(cid:246)gaj(cid:241) nawet 4 MB. Problem projektowania responsywnego (cid:95) 15 Poleć książkęKup książkę Rysunek 1.5. Rozk(cid:228)ad rozmiarów plików dla stron dedykowanych urz(cid:241)dzeniom mobilnym (w kB) Rysunek 1.6. Rozk(cid:228)ad rozmiarów plików dla stron responsywnych (w kB) 16 (cid:95) Rozdzia(cid:293) 1. Stan rynku projektowania responsywnego Poleć książkęKup książkę (cid:120) Spo(cid:264)ród stron responsywnych 43 mia(cid:228)o prawie tyle samo lub nie- znacznie wi(cid:246)cej (cid:276)(cid:241)da(cid:254) HTTP dla urz(cid:241)dze(cid:254) mobilnych co dla komputerów. W przypadku stron dedykowanych tylko 1,5 z nich mia(cid:228)o tyle samo lub wi(cid:246)cej (cid:276)(cid:241)da(cid:254) HTTP co ich odpowiedniki dla komputerów. Rysunki 1.7 i 1.8 obrazuj(cid:241) te dane. Rysunek 1.7. Wykres (cid:276)(cid:241)da(cid:254) HTTP dla urz(cid:241)dze(cid:254) mobilnych i komputerów w przypadku stron responsywnych Zauwa(cid:276), (cid:276)e na rysunku 1.7 w ka(cid:276)dej grupie ciemniejszy s(cid:228)upek obrazuje liczb(cid:246) (cid:276)(cid:241)da(cid:254) HTTP dla strony przeznaczonej dla komputera, podczas gdy s(cid:228)upek ja(cid:264)niejszy to liczba (cid:276)(cid:241)da(cid:254) HTTP dla smartfona. Rysunek 1.8. Wykres (cid:276)(cid:241)da(cid:254) HTTP dla urz(cid:241)dze(cid:254) mobilnych i komputerów w przypadku dedykowanych stron mdot Problem projektowania responsywnego (cid:95) 17 Poleć książkęKup książkę I znów: zauwa(cid:276), (cid:276)e dla ka(cid:276)dej grupy s(cid:228)upki ciemniejsze reprezentuj(cid:241) (cid:276)(cid:241)- dania HTTP dla komputerów, a s(cid:228)upki ja(cid:264)niejsze dla smartfonów. Jak wida(cid:232), sposób implementacji projektów responsywnych sprawia pro- blemy. Istniej(cid:241) te(cid:276) niezaprzeczalne korzy(cid:264)ci wynikaj(cid:241)ce z oferowania stron dedykowanych dla poszczególnych urz(cid:241)dze(cid:254), przynajmniej w kontek(cid:264)cie liczby (cid:276)(cid:241)da(cid:254) HTTP i obj(cid:246)to(cid:264)ci plików wykorzystywanych do renderowania strony (chocia(cid:276) nale(cid:276)y zaznaczy(cid:232), (cid:276)e strony mdot obarczone s(cid:241) swoimi w(cid:228)a- snymi problemami, które omówimy wkrótce). Moja teoria i my(cid:264)l przewod- nia, któr(cid:241) powiniene(cid:264) wielokrotnie zauwa(cid:276)y(cid:232) podczas czytania tej ksi(cid:241)(cid:276)ki, mówi, (cid:276)e projektowanie responsywne i strony dedykowane nie s(cid:241) wyklu- czaj(cid:241)cymi si(cid:246) rozwi(cid:241)zaniami, ale s(cid:241) aspektami tej samej filozofii. Oprócz przedstawionych wy(cid:276)ej wska(cid:274)ników zaobserwowa(cid:228)em równie(cid:276) kilka antywzorców3 i wzorców, które zastosowane zosta(cid:228)y przy tworzeniu sprawdzanych przeze mnie stron. Antywzorce Kiedy przygl(cid:241)da(cid:228)em si(cid:246) ka(cid:276)dej ze stron z rankingu Alexa, zacz(cid:241)(cid:228)em do- strzega(cid:232) cz(cid:246)sto powtarzaj(cid:241)ce si(cid:246) problemy — antywzorce, które zosta(cid:228)y w nich zastosowane. Poni(cid:276)ej przyjrzymy si(cid:246) kilku takim antywzorcom. (cid:292)adowanie tych samych zasobów Niektóre ze stron (cid:228)adowa(cid:228)y dok(cid:228)adnie te same zasoby zarówno dla wersji mobilnej, jak i dla komputerów. W obu przypadkach (cid:228)adowa(cid:228)y ten sam plik CSS zawieraj(cid:241)cy zapytania o media, które obs(cid:228)ugiwa(cid:228)y zmiany w roz- dzielczo(cid:264)ci. (cid:227)adowa(cid:228)y te same obrazy, które by(cid:228)y przeskalowywane przez przegl(cid:241)dark(cid:246), kiedy wykrywa(cid:228)a, (cid:276)e wymaga tego rozdzielczo(cid:264)(cid:232). Za ten b(cid:228)(cid:241)d p(cid:228)aci si(cid:246) zwi(cid:246)kszonym transferem. Strony, które mia(cid:228)y dok(cid:228)adnie tyle samo (cid:276)(cid:241)da(cid:254) dla wszystkich urz(cid:241)dze(cid:254), najprawdopodobniej by(cid:228)y zbu- dowane w ten sposób. To rozwi(cid:241)zanie nie sprawdza si(cid:246) jednak w przy- padku urz(cid:241)dze(cid:254) o wi(cid:246)kszej rozdzielczo(cid:264)ci, takich jak ekran Retina firmy Apple czy telewizory Ultra HD. (cid:292)adowanie dodatkowych zasobów Chocia(cid:276) (cid:228)adowanie tych samych zasobów dla wszystkich urz(cid:241)dze(cid:254) ignoruje ró(cid:276)nice pomi(cid:246)dzy nimi, (cid:228)adowanie dodatkowych, oprócz standardowego 3 Antywzorce to cz(cid:246)sto wykorzystywane niewydajne, nieefektywne lub nieproduktywne rozwi(cid:241)zania problemów. S(cid:241) przeciwie(cid:254)stwem wzorców projektowych, które s(cid:241) przetestowanymi i niezawodnymi rozwi(cid:241)zaniami powszechnych problemów. 18 (cid:95) Rozdzia(cid:293) 1. Stan rynku projektowania responsywnego Poleć książkęKup książkę zestawu, zasobów dla smartfonów stoi ca(cid:228)kowicie w sprzeczno(cid:264)ci ze wszystkim, co wiemy o tworzeniu rozwi(cid:241)za(cid:254) dla urz(cid:241)dze(cid:254) mobilnych. Te dodatkowe zasoby to zazwyczaj dodatkowy plik CSS i dodatkowy plik ze sprite’ami. Takie rozwi(cid:241)zania obserwowa(cid:228)em w przypadku stron, które mia(cid:228)y wi(cid:246)cej (cid:276)(cid:241)da(cid:254) HTTP i wi(cid:246)ksze zapotrzebowanie na przepustowo(cid:264)(cid:232) dla urz(cid:241)dze(cid:254) mobilnych. Jak ju(cid:276) wcze(cid:264)niej wspomnia(cid:228)em, ten antywzorzec znalaz(cid:228) za- stosowanie tak(cid:276)e na mojej stronie. (cid:292)adowanie obrazów o dwukrotnie za du(cid:348)ym rozmiarze Najgorszym b(cid:228)(cid:246)dem by(cid:228)o to, (cid:276)e niektóre strony dla wersji mobilnej (cid:228)adowa(cid:228)y dodatkowy zestaw obrazów o rozmiarze dwukrotnie wi(cid:246)kszym ni(cid:276) te z wer- sji dla komputerów. Oczywi(cid:264)cie, oprócz standardowego zestawu obrazów. Powodem (cid:228)adowania wi(cid:246)kszych obrazów i przeskalowywaniem ich jest to, (cid:276)e wtedy obrazy wydaj(cid:241) si(cid:246) by(cid:232) ostrzejsze. Niestety, efektem ubocznym jest to, (cid:276)e takie strony maj(cid:241) cz(cid:246)sto w przypadku urz(cid:241)dze(cid:254) mobilnych o 30 wi(cid:246)ksze zapotrzebowanie na przepustowo(cid:264)(cid:232) ni(cid:276) w przypadku komputerów. Wszystkie te problemy maj(cid:241) kilka wspólnych cech: (cid:120) Wersja dla komputerów uznawana by(cid:228)a za wersj(cid:246) bazow(cid:241), do której dodawane s(cid:241) elementy. Poprawne podej(cid:264)cie to rozpoczynanie od naj- mniejszej wersji i rozbudowywanie jej. (cid:120) Nie brano pod uwag(cid:246) ogranicze(cid:254) ka(cid:276)dej z platform. (cid:120) Próbowano rozwi(cid:241)za(cid:232) problem wy(cid:228)(cid:241)czenie po stronie klienta. Wzorce Nie wszystkie strony z listy Alexa robi(cid:228)y to (cid:274)le — niektóre oferowa(cid:228)y dosko- na(cid:228)e wra(cid:276)enia zoptymalizowane dla urz(cid:241)dzenia i rozdzielczo(cid:264)ci, na które by(cid:228)y przeznaczone. Przyjrzyjmy si(cid:246) kilku zastosowanym w nich wzorcom projektowym. (cid:292)adowanie zasobów dostosowanych do urz(cid:233)dzenia Zamiast dla urz(cid:241)dze(cid:254) mobilnych (cid:228)adowa(cid:232) obrazy o dwa razy wi(cid:246)kszym roz- miarze ni(cid:276) dla komputera, niektóre strony (cid:228)adowa(cid:228)y obrazy o po(cid:228)ow(cid:246) mniej- sze ni(cid:276) dla komputerów. Rysunki 1.9 i 1.10 przedstawiaj(cid:241) taki przyk(cid:228)ad. Problem projektowania responsywnego (cid:95) 19 Poleć książkęKup książkę Rysunek 1.9. (cid:227)adowanie przystosowanych do urz(cid:241)dzenia mobilnego obrazów o rozmiarze 120(cid:117)72 pikseli i o wielko(cid:264)ci 2 kB (sprawdzane przy wykorzystaniu Narz(cid:246)dzi dla programistów w przegl(cid:241)darce Chrome) Rysunek 1.10. (cid:227)adowanie przystosowanych dla komputerów obrazów o rozmiarze 120(cid:117)180 pikseli i wielko(cid:264)ci 8,8 kB (sprawdzane przy wykorzystaniu Narz(cid:246)dzi dla programistów w przegl(cid:241)darce Chrome) Zauwa(cid:276), (cid:276)e obrazy na rysunkach 1.9 i 1.10 s(cid:241) takie same; s(cid:241) po prostu prze- skalowane z uwzgl(cid:246)dnieniem zasobów urz(cid:241)dzenia klienta. Niektóre strony w ten sam sposób (cid:228)adowa(cid:228)y dostosowane do urz(cid:241)dzenia sprite’y i style CSS — zamiast, a nie oprócz standardowego zestawu dla komputerów. Takie rozwi(cid:241)zanie bierze pod uwag(cid:246) ograniczenia przepu- stowo(cid:264)ci i koszty sieci komórkowych. Niestety, wi(cid:246)kszo(cid:264)(cid:232) takich stron z listy Alexa stanowi(cid:228)y dedykowane strony mdot. Mo(cid:276)emy jednak wykorzysta(cid:232) ten wzorzec tak(cid:276)e w przypadku stron responsywnych, co dok(cid:228)adniej omó- wimy w rozdziale 4. 20 (cid:95) Rozdzia(cid:293) 1. Stan rynku projektowania responsywnego Poleć książkęKup książkę Serwowanie dedykowanych stron z serwera Najlepiej dostosowane by(cid:228)y strony, które serwowa(cid:228)y ca(cid:228)kowicie dedyko- wan(cid:241) zawarto(cid:264)(cid:232). Niektóre by(cid:228)y odr(cid:246)bnymi stronami mdot, inne mia(cid:228)y de- dykowany uk(cid:228)ad i zasoby przystosowane do urz(cid:241)dzenia i przesy(cid:228)ane do strony z serwera. Takie rozwi(cid:241)zane nazywane jest czasami RESS (Responsive Design + Server-Side Components), ale tak naprawd(cid:246) oznacza po prostu wyko- rzystanie tej samej logiki, za pomoc(cid:241) której ruch kierowany jest na strony mdot, do za(cid:228)adowania odpowiednich zasobów dla predefiniowanego przedzia(cid:228)u rozdzielczo(cid:264)ci. To rozwi(cid:241)zanie zostanie dok(cid:228)adniej omówione w rozdziale 4. Aby lepiej zrozumie(cid:232) t(cid:246) architektur(cid:246), rzu(cid:232) okiem na diagram sekwencji na rysunku 1.11. Rysunek 1.11. Diagram sekwencji dla przesy(cid:228)ania z serwera zawarto(cid:264)ci dostosowanej do urz(cid:241)dzenia Zauwa(cid:276), (cid:276)e strony, które dostarcza(cid:228)y dedykowan(cid:241) zawarto(cid:264)(cid:232), mia(cid:228)y naj- mniejszy rozmiar i by(cid:228)y najbardziej wydajne. Prawdopodobnie dlatego 47 sprawdzanych stron nadal oferuje dedykowan(cid:241) zawarto(cid:264)(cid:232). Problem projektowania responsywnego (cid:95) 21 Poleć książkęKup książkę Leniwe (cid:293)adowanie dedykowanej zawarto(cid:316)ci po stronie klienta Niektóre strony stosowa(cid:228)y leniwe (cid:228)adowanie4 nie tylko dla obrazów, lecz tak(cid:276)e dla ca(cid:228)ych modu(cid:228)ów zawarto(cid:264)ci, zarówno poni(cid:276)ej, jak i powy(cid:276)ej aktu- alnej pozycji. Dzi(cid:246)ki temu unikn(cid:246)(cid:228)y (cid:228)adowania zawarto(cid:264)ci dla ka(cid:276)dego punktu przerwania i mog(cid:228)y inteligentnie (cid:228)adowa(cid:232) tylko zawarto(cid:264)(cid:232) niezb(cid:246)dn(cid:241) do aktualnego dzia(cid:228)ania i dostosowan(cid:241) do mo(cid:276)liwo(cid:264)ci klienta. Zamiast jednak sprawdza(cid:232) to po stronie serwera, mo(cid:276)na to zrobi(cid:232) po stronie klienta. T(cid:246) tak- tyk(cid:246) omówimy w rozdziale 5. Rysunek 1.12 przedstawia diagram sekwencji dok(cid:228)adniej obrazuj(cid:241)cy to po- dej(cid:264)cie. Rysunek 1.12. (cid:227)adowanie zawarto(cid:264)ci dostosowanej dla urz(cid:241)dzenia po stronie klienta 4 Leniwe (cid:228)adowanie jest wzorcem projektowym polegaj(cid:241)cym na tym, (cid:276)e inicjalizacja obiektu lub pobranie zasobu jest odroczone do momentu, w którym ten obiekt lub zasób ma zosta(cid:232) wykorzystany. 22 (cid:95) Rozdzia(cid:293) 1. Stan rynku projektowania responsywnego Poleć książkęKup książkę Jak mogli(cid:316)my tego nie zauwa(cid:348)y(cid:235)? Wcze(cid:264)niej opisywa(cid:228)em jak demonstrowali(cid:264)my nasz(cid:241) responsywn(cid:241) stron(cid:246) g(cid:228)ówn(cid:241) naszym w(cid:228)a(cid:264)cicielom produktu. Podczas analizy w sprincie otwo- rzyli(cid:264)my stron(cid:246) na jednym z naszych laptopów, przes(cid:228)ali(cid:264)my obraz na ekran i zmieniali(cid:264)my rozmiar naszej przegl(cid:241)darki, aby odwzorowa(cid:232) ró(cid:276)ne punkty prze(cid:228)amania. Chocia(cid:276) dobrze by(cid:228)o zobaczy(cid:232) jak strona p(cid:228)ynnie si(cid:246) zmienia, takie testy zupe(cid:228)nie nie bra(cid:228)y pod uwag(cid:246) podstawowego zadania — ofero- wania zawarto(cid:264)ci dla ró(cid:276)nych urz(cid:241)dze(cid:254). Testowali(cid:264)my j(cid:241) w ten sam sposób, w jaki j(cid:241) tworzyli(cid:264)my: na komputerze Macbook Pro, korzystaj(cid:241)c z firmowego (cid:228)(cid:241)cza. Oczywi(cid:264)cie wydajno(cid:264)(cid:232) nie bu- dzi(cid:228)a naszych zastrze(cid:276)e(cid:254). Nie mieli(cid:264)my (cid:276)adnych predefiniowanych za(cid:228)o(cid:276)e(cid:254) odno(cid:264)nie wydajno(cid:264)ci (np. SLA — Service Level Agreement5). Nie korzystali(cid:264)my z urz(cid:241)dzenia mobilnego i sieci komórkowej. Wtedy nie mieli(cid:264)my nawet (cid:276)ad- nych urz(cid:241)dze(cid:254) do testów — poza naszymi osobistymi urz(cid:241)dzeniami. Najwa(cid:276)niejsze by(cid:228)o to, (cid:276)e nie mieli(cid:264)my ustalonego SLA dotycz(cid:241)cego wy- dajno(cid:264)ci. Spójno(cid:264)(cid:232) z nasz(cid:241) istniej(cid:241)c(cid:241) stron(cid:241) stanowi(cid:228)a jedyne kryterium ak- ceptacji i nie umie(cid:264)cili(cid:264)my (cid:276)adnych czerwonych flag w istniej(cid:241)cych systemach monitorowania wydajno(cid:264)ci. Wi(cid:246)cej na ten temat dowiesz si(cid:246) z rozdzia(cid:228)u 3. Jak znale(cid:346)li(cid:316)my si(cid:253) w tym punkcie? Dawno temu, w 2008 roku, zanim narodzi(cid:228)o si(cid:246) poj(cid:246)cie projektowania respon- sywnego, utrzymywaliby(cid:264)my dwa adresy URL: mojastrona.pl i m.mojastrona.pl (nasza strona mdot). Obie strony by(cid:228)yby ró(cid:276)nymi stronami tej samej apli- kacji internetowej, albo te(cid:276) mog(cid:228)yby by(cid:232) osobnymi aplikacjami, by(cid:232) mo(cid:276)e nawet utrzymywanymi przez ró(cid:276)ne zespo(cid:228)y. Jednak mog(cid:228)oby si(cid:246) tak zda- rzy(cid:232) tylko wtedy, je(cid:264)li wykazaliby(cid:264)my si(cid:246) dalekowzroczno(cid:264)ci(cid:241) lub mieliby(cid:264)my inne strony mobilne, co w tamtym czasie nie by(cid:228)o zbyt cz(cid:246)ste. Potem, w 2011 roku, zosta(cid:228)a uruchomiona nowa wersja strony „The Bo- ston Globe”, a terminy projektowanie responsywne i progresywne ulepszanie sta(cid:228)y si(cid:246) tematami wszystkich publikacji na blogach i paneli dyskusyjnych. 5 SLA definiuje regu(cid:228)y kontraktu us(cid:228)ugi. Definicja ta mo(cid:276)e by(cid:232), zgodnie z potrzebami, formalna lub nie. Mo(cid:276)e dotyczy(cid:232) dostawcy interfejsu programistycznego aplikacji (API — Application Programming Interface), który zobowi(cid:241)zuje si(cid:246) zapewni(cid:232) pewien minimalny czas dzia(cid:228)ania i reagowa(cid:232) na problemy w okre(cid:264)lonym czasie. Mo(cid:276)e równie(cid:276) dotyczy(cid:232) zespo(cid:228)u programistów i zobowi(cid:241)zania do naprawienia wszystkich b(cid:228)(cid:246)dów ujawnionych w okre(cid:264)lonym czasie. Problem projektowania responsywnego (cid:95) 23 Poleć książkęKup książkę Wszyscy czytali(cid:264)my artyku(cid:228)y opisuj(cid:241)ce sposoby tworzenia stron dostosowa- nych do mo(cid:276)liwo(cid:264)ci urz(cid:241)dzenia u(cid:276)ytkownika, wszyscy te(cid:276) eksperymen- towali(cid:264)my z t(cid:241) koncepcj(cid:241) i dali(cid:264)my si(cid:246) uwie(cid:264)(cid:232). Byli ludzie, którzy pami(cid:246)tali tworzenie w pierwszych latach XXI wieku p(cid:228)ynnych uk(cid:228)adów graficznych z relatywnie ustalonymi wysoko(cid:264)ciami i szeroko(cid:264)ciami; na pocz(cid:241)tku nie dostrzegali ró(cid:276)nicy, ale kiedy zobaczyli, jak skalowane s(cid:241) rozmiary czcionek i obrazy, nawet oni zostali porwani przez koncepcj(cid:246) projektowania respon- sywnego. Napisano ksi(cid:241)(cid:276)ki, poczyniono s(cid:228)owne ustalenia i wszyscy zacz(cid:246)li tworzy(cid:232) responsywne strony. Wszyscy zacz(cid:246)li korzysta(cid:232) i mówi(cid:232) o zapytaniach o media pozwalaj(cid:241)cych enkapsulowa(cid:232) style dla ró(cid:276)nych rozdzielczo(cid:264)ci. Eksperymentowali(cid:264)my te(cid:276) z ró(cid:276)nymi sposobami skalowania obrazów. Kiedy przyszed(cid:228) czas, aby nowe koncepcje wykorzysta(cid:232) „naprawd(cid:246)”, wszy- scy wiedzieli(cid:264)my, (cid:276)e powinni(cid:264)my zacz(cid:241)(cid:232) od najmniejszego rozmiaru ekra- nu i progresywnie go rozbudowywa(cid:232). W praktyce jednak osoby decyzyjne chcia(cid:228)y widzie(cid:232) „kompletn(cid:241)” wersj(cid:246) (np. wersj(cid:246) dla komputerów) tego, co b(cid:246)d(cid:241) pokazywa(cid:232) swoim zwierzchnikom. Zespo(cid:228)y projektowe traktowa(cid:228)y wi(cid:246)c te prace priorytetowo i takie w(cid:228)a(cid:264)nie wersje by(cid:228)y budowane jako pierw- sze. Mogli(cid:264)my jednak korzysta(cid:232) z zapyta(cid:254) o media utrzymuj(cid:241)cych style CSS dla punktów prze(cid:228)amania i minimalizuj(cid:241)cych niepo(cid:276)(cid:241)dane wra(cid:276)enia wizualne — wszystko wydawa(cid:228)o si(cid:246) by(cid:232) w porz(cid:241)dku, prawda? Nasze podstawowe pliki CSS i JavaScript by(cid:228)y wersjami dla komputerów (najprawdopodobniej mia(cid:228)y po kilkaset kilobajtów), a pliki dla smartfonów i tabletów by(cid:228)y nak(cid:228)adane jako nast(cid:246)pna warstwa po zdeterminowaniu mo(cid:276)- liwo(cid:264)ci urz(cid:241)dzenia po stronie klienta. Nast(cid:246)pnie demonstrowali(cid:264)my wyniki osobom decyzyjnym, one demonstrowa(cid:228)y je swoim zwierzchnikom, a(cid:276) w ko(cid:254)- cu produkt trafia(cid:228) na (cid:264)rodowisko produkcyjne. W ko(cid:254)cu jaki(cid:264) programista wpada(cid:228) na pomys(cid:228), (cid:276)e powinni(cid:264)my pomy(cid:264)le(cid:232) o refaktoryzacji, poniewa(cid:276) nasz podstawowy CSS przeznaczony jest dla komputerów i — no w(cid:228)a(cid:264)nie — wszystkie nasze (cid:228)(cid:241)cza s(cid:241) i tak podpi(cid:246)te do wersji dla komputerów. Niestety, nigdy nie by(cid:228)o zbytniego zapa(cid:228)u, aby to zmieni(cid:232) — produkt dzia(cid:228)a(cid:228) i nie by(cid:228)o czasu na zmiany, bo wkrótce przecie(cid:276) startowa(cid:228) nast(cid:246)pny projekt i po- trzebni byli wszyscy pracownicy. Produkt dzia(cid:228)a(cid:228), ale problem polega(cid:228) na tym, (cid:276)e wci(cid:241)(cid:276) patrzyli(cid:264)my tylko na front-end. Zapytania o media i skalowanie obrazów wygl(cid:241)da(cid:228)y dobrze, ale skupianie si(cid:246) tylko na nich mija(cid:228)o si(cid:246) z podstawowym celem tworzenia holistycznego do(cid:264)wiadczenia dla urz(cid:241)dzenia, z którego w danej chwili korzysta u(cid:276)ytkownik. By(cid:228)y to tylko pozory responsywno(cid:264)ci bez prawdziwej responsywno(cid:264)ci. 24 (cid:95) Rozdzia(cid:293) 1. Stan rynku projektowania responsywnego Poleć książkęKup książkę Nie skupiali(cid:264)my si(cid:246) tylko na tym, jak wygl(cid:241)da aplikacja; po stronie klienta umieszczali(cid:264)my tak(cid:276)e logik(cid:246). Polegaj(cid:241)c wy(cid:228)(cid:241)cznie na zapytaniach o media przy okre(cid:264)leniu rozdzielczo(cid:264)ci i testuj(cid:241)c mo(cid:276)liwo(cid:264)ci urz(cid:241)dzenia w JavaScript po stronie klienta, pobierali(cid:264)my niepotrzebne zasoby. To doprowadzi(cid:228)o do powstania antywzorców, które zidentyfikowali(cid:264)my wcze(cid:264)niej. Rysunek 1.13 przedstawia diagram sekwencji dla wszystkich tych antywzorców. Rysunek 1.13. Diagram sekwencji dla antywzorców Problem projektowania responsywnego (cid:95) 25 Poleć książkęKup książkę Je(cid:276)eli skupiamy si(cid:246) na wygl(cid:241)dzie strony tylko po stronie klienta, ró(cid:276)nice pomi(cid:246)dzy urz(cid:241)dzeniami, w(cid:228)(cid:241)czaj(cid:241)c w to infrastruktur(cid:246) internetow(cid:241), moc ob- liczeniow(cid:241), czas pracy baterii i dost(cid:246)pn(cid:241) pami(cid:246)(cid:232), s(cid:241) ignorowane. W rzeczy- wisto(cid:264)ci s(cid:241) to jednak czynniki, które powinni(cid:264)my bra(cid:232) pod uwag(cid:246). S(cid:241) g(cid:228)ów- nymi powodami, dla których g(cid:228)ówni gracze w internecie nadal wspieraj(cid:241) odr(cid:246)bne strony mdot. Dlaczego nie skorzysta(cid:235) z mdot? Czytaj(cid:241)c o tych wszystkich zaletach stron mdot, mo(cid:276)esz zastanawia(cid:232) si(cid:246), czemu nie pisz(cid:246) o tym, dlaczego wszyscy powinni(cid:264)my zacz(cid:241)(cid:232) z nich ko- rzysta(cid:232). Nie mam zamiaru promowa(cid:232) stron mdot. Chocia(cid:276) pod wzgl(cid:246)dem wydajno(cid:264)ci góruj(cid:241) nad wi(cid:246)kszo(cid:264)ci(cid:241) aktualnie istniej(cid:241)cych stron responsyw- nych, maj(cid:241) kilka minusów. Narzut zasobów Moja pierwsza strona mdot powsta(cid:228)a na pocz(cid:241)tku XXI wieku i wymaga(cid:228)a powo(cid:228)ania nowego zespo(cid:228)u dedykowanego do jej stworzenia i utrzymywa- nia. Pierwszym powodem by(cid:228)o to, (cid:276)e aktualny zespó(cid:228) nie chcia(cid:228) po(cid:264)wi(cid:246)ca(cid:232) czasu na odpowiednik mobilny kosztem w(cid:228)a(cid:264)ciwej strony. Innym powo- dem by(cid:228)o natomiast to, (cid:276)e strony mobilne by(cid:228)y, i nadal mog(cid:241) by(cid:232), bardzo pracoch(cid:228)onne, poniewa(cid:276) musz(cid:241) wspiera(cid:232) nie tylko najbardziej znane urz(cid:241)- dzenia z systemami iOS i Android, ale równie(cid:276) ogromny wachlarz urz(cid:241)dze(cid:254) z ró(cid:276)nymi rozmiarami ekranów i mo(cid:276)liwo(cid:264)ci, w(cid:228)(cid:241)czaj(cid:241)c w to brak obs(cid:228)ugi JavaScript lub wsparcie tylko dla cz(cid:246)(cid:264)ci jego funkcjonalno(cid:264)ci. Nawet je(cid:276)eli nie utrzymujesz osobnego zespo(cid:228)u, prace nad stronami mdot i tak musisz (cid:264)ledzi(cid:232) jako odr(cid:246)bne od prac nad stron(cid:241) podstawow(cid:241); co wi(cid:246)cej, w przypadku niektórych telefonów pewne funkcjonalno(cid:264)ci mog(cid:241) by(cid:232) nie- mo(cid:276)liwe do osi(cid:241)gni(cid:246)cia. Podzielony kod (cid:346)ród(cid:293)owy Utrzymywanie odr(cid:246)bnej strony oznacza najprawdopodobniej konieczno(cid:264)(cid:232) utrzymywania odr(cid:246)bnej aplikacji i odr(cid:246)bnego kodu (cid:274)ród(cid:228)owego. Utrzy- manie zgodno(cid:264)ci pomi(cid:246)dzy kodem (cid:274)ród(cid:228)owym obu stron to odwieczny problem wymagaj(cid:241)cy czujno(cid:264)ci i uwagi, co oznacza, (cid:276)e pr(cid:246)dzej czy pó(cid:274)niej kody si(cid:246) rozsynchronizuj(cid:241). Kiedy si(cid:246) rozsynchronizuj(cid:241), zawarto(cid:264)(cid:232) poszcze- gólnych stron równie(cid:276) b(cid:246)dzie ró(cid:276)na, a przysz(cid:228)e aktualizacje b(cid:246)d(cid:241) wymaga(cid:228)y wi(cid:246)kszych nak(cid:228)adów pracy. 26 (cid:95) Rozdzia(cid:293) 1. Stan rynku projektowania responsywnego Poleć książkęKup książkę Podzielony adres URL Posiadanie odr(cid:246)bnej strony mdot oznacza konieczno(cid:264)(cid:232) stworzenia i utrzy- mania odr(cid:246)bnego adresu. Stoi to w sprzeczno(cid:264)ci z ca(cid:228)(cid:241) koncepcj(cid:241) adresów URL, które maj(cid:241) by(cid:232) pojedyncz(cid:241) lokalizacj(cid:241) danego zasobu. Strona mdot jest kolejn(cid:241) lokalizacj(cid:241) Twojej strony. Co wi(cid:246)cej, gdzie znajduje si(cid:246) granica okre(cid:264)laj(cid:241)ca, co ma trafi(cid:232) na stron(cid:246) mdot? Czy telefony? Smartfony? Czy tablety tak(cid:276)e? A co z phabletami? Czy wszystkie te urz(cid:241)dzenia maj(cid:241) mie(cid:232) wspóln(cid:241) stron(cid:246) mdot, czy b(cid:246)dziesz utrzymywa(cid:228) odr(cid:246)bne strony wykorzy- stywane w zale(cid:276)no(cid:264)ci od rozmiaru ekranu i mo(cid:276)liwo(cid:264)ci urz(cid:241)dzenia? Czy zauwa(cid:276)y(cid:228)e(cid:264), jak szybko taka segregacja mo(cid:276)e sta(cid:232) si(cid:246) uci(cid:241)(cid:276)liwa? Bezcelowe przekierowania Utrzymywanie odr(cid:246)bnych adresów URL oznacza tak(cid:276)e konieczno(cid:264)(cid:232) doda- nia przekierowania. Dodanie takiego przekierowania powoduje powstanie dodatkowego ruchu, poniewa(cid:276) serwer musi odpowiedzie(cid:232) klientowi sta- tusem 302 lub 304, a klient musi nast(cid:246)pnie wykona(cid:232) dodatkowe (cid:276)(cid:241)danie dla nowej lokalizacji — proces ten zosta(cid:228) przedstawiony na rysunku 1.14. Rysunek 1.14. Odr(cid:246)bne adresy URL dla stron mobilnych wprowadzaj(cid:241) konieczno(cid:264)(cid:232) wykonywania przekierowa(cid:254) Problem projektowania responsywnego (cid:95) 27 Poleć książkęKup książkę To ma znaczenie ze wzgl(cid:253)du na skal(cid:253) Do tej pory dyskutowali(cid:264)my g(cid:228)ównie o smartfonach i komputerach, po- niewa(cid:276) to one, wraz z tabletami, s(cid:241) najcz(cid:246)(cid:264)ciej stosowanymi urz(cid:241)dzeniami. Bran(cid:276)a ci(cid:241)gle si(cid:246) jednak zmienia i ro(cid:264)nie, a w ci(cid:241)gu ostatnich kilku lat po- wsta(cid:228)o wiele nowych urz(cid:241)dze(cid:254), maj(cid:241)cych nietypowe rozdzielczo(cid:264)ci, infra- struktur(cid:246) sieciow(cid:241) i funkcjonalno(cid:264)ci. Na przyk(cid:228)ad, kiedy na rynek zosta(cid:228) wprowadzony nowy ekran Retina firmy Apple, musieli(cid:264)my wspólnie z zespo(cid:228)em projektowym opracowa(cid:232) unikatowe obrazy, które wygl(cid:241)da(cid:228)yby dobrze na urz(cid:241)dzeniach wyposa(cid:276)onych w taki ekran. Ten trend b(cid:246)dzie kontynuowany — aplikacje sieciowe b(cid:246)d(cid:241) stosowane w telewizorach, a w ich przypadku rozdzielczo(cid:264)ci ci(cid:241)gle rosn(cid:241): mamy ju(cid:276) telewizory 4K i 8K Ultra HD. Kiedy okulary Google Glass zaczn(cid:241) by(cid:232) szeroko stosowane, b(cid:246)dziemy mu- sieli my(cid:264)le(cid:232) o tym, jak nasza aplikacja wygl(cid:241)da tak(cid:276)e na tym urz(cid:241)dzeniu. Na razie Google udost(cid:246)pnia API o nazwie Mirror API oraz biblioteki dzia(cid:228)aj(cid:241)ce po stronie klienta i wspó(cid:228)pracuj(cid:241)ce z Mirror API (http://bit.ly/1rXkSpb). To tylko niektóre z nowo(cid:264)ci, które niebawem wejd(cid:241) do powszechnego u(cid:276)ytku. Jest ich jednak znacznie wi(cid:246)cej. Je(cid:276)eli nadal b(cid:246)dziemy wykorzystywa(cid:232) projektowanie responsywne jako narz(cid:246)dzie dzia(cid:228)aj(cid:241)ce po stronie klienta, problem zbyt du(cid:276)ych stron b(cid:246)dzie tylko narasta(cid:228). Albo wi(cid:246)cej firm powróci do korzystania ze stron mdot. Podsumowanie Rynek powoli obraca si(cid:246) przeciwko projektowaniu responsywnemu. Prawie po(cid:228)owa audytowanych przeze mnie stron to strony dedykowane — z tego rozwi(cid:241)zania korzystali(cid:264)my ju(cid:276) na pocz(cid:241)tku XXI wieku — zamiast stron re- sponsywnych. Projektowanie responsywne nie jest wadliw(cid:241) metodologi(cid:241) — staje si(cid:246) takie tylko wtedy, je(cid:276)eli jest b(cid:228)(cid:246)dnie wykorzystane i traktowane jako dodatek, a nie ca(cid:228)o(cid:264)ciowa filozofia, wtedy te(cid:276) mo(cid:276)e owocowa(cid:232) zbyt du(cid:276)ymi stronami i nie- intuicyjnym zachowaniem strony. Podobnie, kiedy skupiamy si(cid:246) na tylko jednym aspekcie responsywno(cid:264)ci — w szczególno(cid:264)ci je(cid:276)eli jest to front-end — tracimy na wydajno(cid:264)ci stron responsywnych. Wydajno(cid:264)(cid:232) jest jednak jednym z aspektów responsywno(cid:264)ci i musimy o ni(cid:241) dba(cid:232) ju(cid:276) na etapie planowania i projektowania. Musi by(cid:232) cz(cid:246)(cid:264)ci(cid:241) sposobu budowania przez nas rozwi(cid:241)za(cid:254). 28 (cid:95) Rozdzia(cid:293) 1. Stan rynku projektowania responsywnego Poleć książkęKup książkę W tym rozdziale zidentyfikowali(cid:264)my kilka wzorców projektowych pozwa- laj(cid:241)cych wbudowa(cid:232) wydajno(cid:264)(cid:232) w responsywno(cid:264)(cid:232). W nast(cid:246)pnych rozdzia(cid:228)ach omówimy je dok(cid:228)adniej. Je(cid:276)eli tego nie zrobimy i w naszych responsywnych rozwi(cid:241)zaniach nie za- dbamy o wydajno(cid:264)(cid:232), problem b(cid:246)dzie si(cid:246) pogarsza(cid:228) wraz z pojawianiem si(cid:246) nowych urz(cid:241)dze(cid:254) z coraz to wi(cid:246)ksz(cid:241) rozdzielczo(cid:264)ci(cid:241) i nowymi rozwi(cid:241)za- niami wymagaj(cid:241)cymi unikalnych interakcji z klientem. Podsumowanie (cid:95) 29 Poleć książkęKup książkę 30 (cid:95) Rozdzia(cid:293) 1. Stan rynku projektowania responsywnego Poleć książkęKup książkę Skorowidz C cache, 90, 122 CDN, 91 Charles, 76 Chrome, 35 Narz(cid:246)dzia dla programistów, 40, 53 Chromium, 35 CI, Patrz: integracja ci(cid:241)g(cid:228)a content delivery networks, Patrz: CDN czcionka, 63 D device detection service, Patrz: us(cid:228)uga wykrywania urz(cid:241)dze(cid:254) DeviceAtlas, 110 DNS, 33 Document Object Model, Patrz: DOM Document Type Definition, Patrz: DTD DOM, 36 Domain Name System, Patrz: DNS drzewo DOM, 36, 51 renderowania, 36 DTD, 35 E ekran analiza porównawcza, 64 odleg(cid:228)o(cid:264)(cid:232) od oczu u(cid:276)ytkownika, 62 proporcje pikseli, 96, 97 Retina, Patrz: Retina rozmiar, 61 A ACK, 33 adres URL, 27, 33, 35, 45 zasobu, 39 Akamai, 91 analiza leksykalna, Patrz: strona parsowanie animacja, 52 szybko(cid:264)(cid:232), Patrz: FPS antywzorzec, 18, 25, 96 API widoczno(cid:264)ci strony, Patrz: strona API widoczno(cid:264)ci aplikacja internetowa uruchamianie po stronie klienta, 50 uruchamianie w przegl(cid:241)darce, 50 wydajno(cid:264)(cid:232), Patrz: wydajno(cid:264)(cid:232) atrybut src, 97, 99 srcset, 96, 97, 99, 100 B Beck Kent, 121 biblioteka PhantomJS, Patrz: PhantomJS po stronie klienta, 28, 110 Blink, 35 b(cid:228)(cid:241)d 404, 33 Bootstrap, 135, 137 instalacja, 137 komponent, 144 ocena, 140 brama, 33 156 Poleć książkęKup książkę element div, 103 DOM, 36 picture, 99, 100, 103 source, 99 ESI, 91 Ethernet, 71 F Firebug, 40, 41 Firefox, 40, 57 format JPEG XR, 109 WebP, 109 XML, 123, 126 Foundation, 135, 140 ocena, 142 FPS, 52, 53 frames per second, Patrz: FPS framework Bootstrap, Patrz: Bootstrap dzia(cid:228)aj(cid:241)cy po stronie klienta, 135 Foundation, Patrz: Foundation Ripple, Patrz: Ripple rozmiar, 153 Semantic UI, Patrz: Semantic UI G Gamache Dave, 144 Google Glass, 28 Google Trendy, 135 Grigorik Ilya, 99 H Hewitt Joe, 40 Hidayat Ariya, 115 HTTP, 72 monitorowanie, 76 nag(cid:228)ówek, 91 proxy, 76 HTTPWatch, 13, 41 Hudson, 129 Hyper Text Transport Protocol, Patrz: HTTP I integracja ci(cid:241)g(cid:228)a, 44, 114, 115, 121, 123 skryptu, 123 Internet Explorer, 41 J Jain Arvind, 46 Jasmine, 114 Jenkins, 123, 129, 130 j(cid:246)zyk wtyczek brzegowych, 91 K Kawaguchi Kohsuke, 129 klient, 80, 81, 82, 115 KPI, Patrz: wydajno(cid:264)(cid:232) wska(cid:274)nik laptop, 12, 62 logika, 25 L (cid:292) (cid:228)adowanie leniwe, 22, 39, 103 M Meenan Pat, 39, 44 metoda DELETE, 73 GET, 73 HEAD, 73 HTTP, 73 OPTIONS, 73 POST, 73 PUT, 73 Mirror API, 28 Skorowidz (cid:95) 157 Poleć książkęKup książkę O obiekt async, 123 MemoryInfo, 55, 56 Performance, 46, 55 PerformanceTiming, 47, 48 WURFL, 110, 111 WurflCloudClientObject, 89 obraz, 95 format, 109 responsywny, 96 skalowanie, 19, 24, 95 odpowied(cid:274) HTTP, 74, 78 Opera, 35 Otto Mark, 137 P pami(cid:246)(cid:232) profilowanie, 54 wizualizacja, 56 wyciek, 54 wykres profilu, 57 zarz(cid:241)dzanie, 51 zu(cid:276)ycie, 57 plik async.js, 123 engine.js, 154 Podjarny Guy, 14 158 (cid:95) Skorowidz parsowanie, Patrz: strona parsowanie p(cid:246)tla informacji zwrotnych, 113 phablet, 27 PhantomJS, 115, 117 integracja skryptu, 123 modu(cid:228), 116 piksel informatyczny, 97 proporcja, 96, 97 Pivotal Labs, 114 plan projektowy, 60, 68 kamie(cid:254) milowy, 60, 65, 66 podsumowanie zadania, 60, 61 ryzyko, 60, 66 zale(cid:276)no(cid:264)ci, 60, 66 programowanie ekstremalne, 121 oparte na testach, 121 projektowanie responsywne, 14, 23, 60 strategia, 61 protokó(cid:228) HTTP, Patrz: HTTP IP, 72 kolekcja, 71 stosów aplikacji, 78 TCP, 33, 72 TCP/IP, 33 proxy HTTP, 76 przegl(cid:241)darka, 35 bez interfejsu graficznego, 114, 115 Chrome, Patrz: Chrome Opera, Patrz: Opera Safari, Patrz: Safari warstwa, Patrz: warstwa przekierowanie, 27 przewijanie niesko(cid:254)czone, 103 punkt prze(cid:228)amania, 24 QtWebKit, 115 Q R Real User Monitoring, Patrz: RUM refaktoryzacja, 24 Responsive Design + Server-Side Components, Patrz: RESS RESS, 21 Retina, 18, 28, 97 Ripple, 153 ruch sieciowy, 76 RUM, 46 S Safari, 35 ScientiaMobile, 110 Semantic UI, 147, 151 ocena, 151 Poleć książkęKup książkę Service Level Agreement, Patrz: SLA, Patrz: SLA serwer internetowy, 77, 78 silnik JavaScript, 35 renderuj(cid:241)cy, 35, 36, 51 zasilaj(cid:241)cy Node.js, 35 Skeleton, 144, 151 ocena, 147 SLA, 23, 65, 113, 117 smartfon, 12, 18, 24, 27, 62 smission Control Protocol/Internet Protocol, Patrz: protokó(cid:228) TCP/IP Souders Steve, 31, 95 sprite, 12, 19, 20, 38 status, 33, 39 stos adres URL, 27 parsowanie, 35, 36 renderowanie, 35 czas, Patrz: strona czas renderowania responsywna, 15, 17, 24, 60 rozmiar pliku, 32, 38, 117 symulowana, 117 SYN, 33 SYN-ACK, 33 aplikacji sieciowej, 77 internetowy, 71 protokó(cid:228), Patrz: protokó(cid:228) stosów aplikacji sieciowy, 71 strona warstwa, Patrz: warstwa analiza leksykalna, Patrz: strona parsowanie animacja, Patrz: animacja API widoczno(cid:264)ci, 46 czas (cid:228)adowania, 32, 38, 39, 40, 64 renderowania, 33, 39, 119 dedykowana, 21 mdot, 14, 15, 18, 21, 23, 26, 59 T tablet, 24, 27 TDD, Patrz: programowanie oparte na testach telewizor Ultra HD, 18, 28 test integracyjny, 114, 122 jednostkowy, 114, 122 WebPageTest, Patrz: WebPageTest wydajno(cid:264)ci, Patrz: wydajno(cid:264)(cid:232) testowanie test-driven development, Patrz: programowanie oparte na testach Thornton Jacob, 137 Timeline, 53 Events, 53 Frames, 53, 54 Memory, 53, 56 token, 36 Transmission Control Protocol, Patrz: protokó(cid:228) TCP U urz(cid:241)dzenie analiza porównawcza, 64 mobilne, 12 przepustowo(cid:264)(cid:232), 12 wykres wodospadowy, Patrz: wykres wodospadowy proporcje pikseli, 96, 97 (cid:264)rednia szybko(cid:264)(cid:232) po(cid:228)(cid:241)czenia, 63 wykrywanie, 81, 82, 83 us(cid:228)uga wykrywania urz(cid:241)dze(cid:254), 82, 83 YSlow, 119 usuwanie (cid:264)mieci, 51 V V8, 35 Skorowidz (cid:95) 159 Poleć książkęKup książkę wykres profilu pami(cid:246)ci, Patrz: pami(cid:246)(cid:232) wykres profilu wodospadowy, 12, 39 belka, 40 tworzenie, 40, 41, 44 urz(cid:241)dzenie mobilne, 41 WebPageTest, 45 wzorzec projektowy, 19 Y YSlow, 119 Z zapytanie o media, 24 zasoby, 18, 115 adres URL, Patrz: adres URL zasobu rozmiar, 39 zdarzenie znacznik odebrania (cid:276)(cid:241)dania HTTP, 88 window.onload, 39, 107 img, 96, 97, 99 skryptu, 36 (cid:347) (cid:276)(cid:241)danie HTTP, 17, 18, 19, 39, 73, 78, 79 DELETE, 73 GET, 33, 73 HEAD, 73 liczba, 33, 38 odbieranie, 88 odpowied(cid:274), Patrz: odpowied(cid:274) HTTP OPTIONS, 73 POST, 73 PUT, 73 nag(cid:228)ówek, 73, 74 W warstwa aplikacji, 72, 73 cache’uj(cid:241)ce, 91 interfejsu, 35 (cid:228)(cid:241)cza danych, 71 sieci, 35, 36 sieciowa, 72 transportowa, 72 Web Performance Working Group, 46 Weber Jason, 46 WebKit, 35, 115 WebPageTest, 44, 45 wiadomo(cid:264)(cid:232) potwierdzenia, 33 synchronizacji, 33 synchronizacji-potwierdzenia, 33 Wireless Universal Resource FiLe, Patrz: WURFL w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) display, 110 wtyczka brzegowa, Patrz: ESI Wurfl, 110 WURFL, 82, 83, 89 WURFL Cloud, 84, 86, 87 WURFL Infuze, 84 WURFL Onsite, 84 wydajno(cid:264)(cid:232), 31, 38 dzia(cid:228)ania, Patrz: wydajno(cid:264)(cid:232) wykonywania po stronie klienta, 95 po stronie serwera, 99 sieciowa, 31, 32, 38, 39, 119 wykres wodospadowy, Patrz: wykres wodospadowy testowanie, 113, 115, 117, 123 wska(cid:274)nik, 32, 60, 69 ilo(cid:264)ciowy, 32 jako(cid:264)ciowy, 32 Speed Index, 39 wsadu, 32 wykonywania, 32, 50, 52 160 (cid:95) Skorowidz Poleć książkęKup książkę Poleć książkęKup książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Responsywne i wydajne projekty internetowe. Szybkie aplikacje dla każdego
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ą: