Jak powstawała strona

Witam w tym artykule chciałem pokrótce przedstawić wszystkie technologie które użyłem do budowania tej strony internetowej. W pracy wdrożyłem wiele stron używając do tego rożnych technologi do standardowych metod takich jak systemy napisane w PHP po rzadko spotykane jak generowanie statycznych stron HTML za pomocą narzędzi do automatyzacji zadań takich jak Gulp. Nie obyło się też bez projektów napisanych w frameworkach JavaScriptowych współpracującymi z serwerami napisanymi w NodeJS. Bazując na dotychczasowym doświadczeniu zdecydowałem się na język PHP który zapewnił mi komfort pracy oraz szybkość na której mi zależało.

SCSS + BEM

Zaczynając prace nad stroną miałem w głowie wszystkie funkcjonalności SCSSa oraz zalążek wiedzy na temat metodologi BEM. Zdecydowałem się na metodologie BEM z względu na dużo pozytywnych opinii na jej temat. Miałem nadzieje iż podejście BEM ułatwi mi zarówno wdrażanie jak i późniejszy proces związany z poprawkami. Po skończeniu pracy nad wyglądem mogę z czystym sumieniem polecić metodologie BEM każdemu kto chce pisać czysty i usystematyzowany kod kaskadowych arkuszy stylów. BEM i SCSS idealnie się do tego nadają. SCSS zapewnia nam zagnieżdżone selektory a BEM czuwa aby z nimi nie przesadzić. Myślę ze BEM bez preprocesora takiego jak SASS lub LESS byłby lekko wybrakowany dlatego też zachęcam do korzystania z preprocesora oraz BEMa równocześnie.

AMP

Tej technologi nie mogło u mnie zabraknąć! Od czasu pojawienia się narzędzia PageSpeed Insights testowałem wszystko co się da i wyciskałem najlepsze osiągi w swoich projektach. Gdy usłyszałem o "Przyśpieszonych stronach mobilnych" (AMP) miałem tylko jedno w głowie : "Musze to mieć!". Miałem wielkie nadzieje iż uda mi się podciągnąć własne wyniki na jeszcze wyższy poziom. Niestety obecnie jestem rozczarowany tą technologią. Prawdopodobnie przyśpieszy ona wczytywanie mojej strony w różnych zakątkach świata ze względu na zastosowany cache oraz CDNy. Lecz gdy porównałem wyniki mojej strony głównej z AMP oraz bez AMP niestety zastało mnie rozczarowanie. AMP był wolniejszy. Aby uratować mój wysiłek związany z odseparowaniem szablonu dla technologi AMP pozbawiłem szablon wczytywania czcionek co znacznie przyspieszyło stronę AMP kosztem wyglądu. Mimo rozczarowania technologie AMP polecił bym wszystkim którzy chcą przyśpieszyć własne strony i chcą zrezygnować z jQuery. Jeśli macie bibliotekę typu jQuery oraz dołączone do niej wiele pluginów prawdopodobnie będziecie w stanie je wszystkie zastąpić odpowiednimi komponentami w AMP. AMP będzie szybszy niż jQuery to mogę zapewnić ;).

Vanilla JS

Jest to kolejny termin związany z szybkością stron internetowych. Vanilla JS to nic innego jak tworzenie wszystkich skryptów dla strony beż użycia zewnętrznych bibliotek. Przeglądarki w obecnych czasach są na tyle ustandaryzowane iż biblioteki takie jak jQuery zaczynają być coraz bardziej zbędne. Jedynym przypadkiem dla którego warto użyć jQuery jest możliwość skorzystania z bardzo dużej bazy pluginów rozszerzających możliwości jQuery. Lecz mam nadziej iż z czasem zacznie pojawiać się coraz więcej pluginów napisanych w Vanilla JS! 

WAI-ARIA

Aby strona była łatwa w obsłudze postarałem się zadbać o jej czytelność również dla osób niepełnosprawnych. Standard ARIA wprowadzony przez organizacje WAI służy opisywaniu działania dynamicznych i niezrozumiałych fragmentów stron. Wprowadza także wymagania przestrzegania zasad podczas pisania HTMLa o których często zapominamy. Na przykład nie zawsze pamiętamy ze jeśli dodamy onclick do znacznika <div> powinniśmy nadać mu również role oraz atrybut tabindex. Bez tego użytkownik nie będzie w stanie poruszać się po stronie klawiszem Tab. Zachęcam do zapoznania się z blogiem internet-bez-barier.com którego artykuły bardzo dużo wyjaśniają odnośnie tworzenia stron przyjaznych dla wszystkich. 

PHP

Język PHP odpowiada za scalanie wielu funkcji strony w jedną całość. Generuje on zminifikowane pliki JS i CSS. Tworzy miniaturki które mogą być skalowane na 6 różnych sposobów. Kompiluje pliki SCSS dzięki pakietowi leafo/scssphp. Na własne potrzeby napisałem w tym języku własny system szablonów oparty na short tagach PHPowych. Aby przyśpieszyć działanie strony wygenerowany kod HTML jest odpowiednio cachowany po stronie serwera. Obecnie mam wiele pomysłów odnośnie kodu mojego CMSa lecz w obecnej formie pewnych jego fragmentów się wstydzę lub mam lepszy pomysł na ich realizację. Jeśli znajdę czas postaram się wrzucić okrojoną wersje lub wersje po refaktoryzacji na mojego githuba.

ServiceWorker + Cache API

Jak już wspominałem mam hopla na punkcie szybkości stron internetowych. ServiceWorker jest to skrypt uruchamiany na stronie internetowej działający w tle. Zapewnia on możliwość przechwytywania żądań HTTP oraz tworzenia własnych odpowiedzi HTTP z poziomu przeglądarki. Cache API potrafi zapamiętywać w pamięci podręcznej przeglądarki całe żądania HTTP dzięki czemu możemy stworzyć stronę internetową bez łączenia się z serwerem internetowym. Mechanizm jest o tyle fajny ze sami piszemy logikę odświeżania zapamiętanych żądań HTTP. ServiceWorker zapewnia nam poprawne działanie strony w trybie offline. Tryb offline można zagwarantować sobie w prostszy sposób. Mianowicie gdy dodamy do znacznika html atrybut manifest który zawiera link do pliku .appcache przeglądarki będą pobierały tylko ten plik i na podstawie daty modyfikacji tego pliku strona będzie działać offline lub online. System ten niestety jest już oznaczony jako deprecated.

Web App Manifest

Dzięki tej technologi możesz dodać na ekran główny swojego smartfona moją stronę która będzie funkcjonowała jak zwykła aplikacja którą można pobrać z sklepu. Aby skorzystać z tej funkcji rozwiń menu w swojej przeglądarce internetowej i znajdź opcje "Dodaj na ekran główny". Dodatkowo warto pamiętać ze moja strona działa w trybie offline dzięki Cache API dlatego też w każdej chwili będziesz mógł skorzystać z mojej strony nawet gdy nie będziesz miał dostępu do internetu.

Canvas

Ten punkt na pewno was zaskoczył! Co ma canvas do strony internetowej? Przecież canvasa wykorzystują twórcy gier przeglądarkowych nie twórcy stron. Już spieszę z wyjaśnieniem. Jest to zabieg który przyspieszył wczytywanie moje strony. Grafika która widzicie w tle waży 5 302 bajty nieskompresowana ważyła około 500 kilobajtów. Z względu na to iż grafika miała dość regularne kształty wpadłem na pomysł aby tworzyć ją w JavaScript z pomocą znacznika canvas! Mój skrypt do generowania tła zajmuje 546 bajtów porównując to z wielkością grafiki skompresowanej zmniejszyłem wielkość obrazka o 971 %. Zależało mi na tym punkcie aby pokazać wszystkim ze programowanie zawsze zapewnia wiele alternatyw i tylko od nas zależy jakie rozwiązanie wybierzemy.