Nowoczesne strony www

Wstęp

Trendy na rynku IT zmieniają się bardzo szybko. Osoby posiadające doświadczenie w procesie tworzenia stron internetowych doskonale zdają sobie z tego sprawę. Rynek przestawił się na mobilność, a co za tym idzie nadszedł trend minimalizmu, prostoty i szybkości działania. Wyszukiwarka Google, czyli coś na czym każdemu właścicielowi strony www powinno zależeć już od dawna koncentruje się na urządzeniach mobilnych. Z tego względu koderzy oraz programiści stron muszą upewnić się, żeby tworzona przez nich strona była do tych urządzeń przystosowana.

Mobilność

Czy naprawdę zdajemy sobie sprawę z tego co to oznacza? Często słyszę od klientów, "przecież strona dobrze się wyświetla na telefonie" - owszem ale poprawnie skomponowane style CSS to tylko jeden z elementów, o które należy zadbać w procesie tworzenia strony mobilnej. Mamy aktualnie sytuację w której do procesu tworzenia stron mobilnych możemy podejść na kilka sposobów, tj.

• stworzenie oddzielnej witryny z przedrostkiem m.domena.pl (obecnie już rzadko stosowana),
• stworzenie strony RWD lub podejście mobile-first,a co za tym idzie "dorobienie desktop'u" do widoku mobile,
• stworzenie strony AMP, która jest dość często wykorzystywana. Niemniej jednak moim zdaniem zmarnowano jej potencjał z racji żmudnego procesu budowania strony lub dostosowywania już istniejącej strony (nie wspominając o sporych ograniczeniach; jest to zarazem błogosławieństwo, jak i przekleństwo),
• stworzenie strony PWA, która aktualnie raczkuje, jednak wygląda bardzo obiecująco, gdyż jej implementacja jest stosunkowo prosta, a możliwości nie ograniczają serwisu.

Nie wskażę tutaj, która opcja jest najlepsza, gdyż jak zwykle to zależy głównie od potrzeb klienta, jak i funduszów przeznaczonych na stworzenie strony. Najczęściej wystarczy dobrze dopracowane RWD z odpowiednimi założeniami UX (user experience) oraz usunięciem niepotrzebnych elementów. Strona mobilna powinna być lekka i wydajna, więc zalecam odpuszczanie fajerwerków gdyż strona mocno na tym ucierpi (SEO, CTR, Bounce rate).

Najnowsze trendy tworzenia stron

Sytuację lekkich i dynamicznych stron mocno wspierają nowoczesne frameworki JS, takie jak Angular,React czy Vue. Możemy użyć ich zarówno jako "wtyczek" do stron HTML (tak jak kiedyś jQuery), jak również zbudować na ich podstawie pełne serwisy. Następnie można opublikować je nawet na darmowych hostingach (np. netlify, z którego korzystam dla tej strony) jako strony pseudo - statyczne. W tym miejscu zapewne usłyszałbym wiele głosów sprzeciwu, gdyż ciężko uznać, że strona napisana np. w Angularze jest lekka. Jest prawdą, że strony te w większości mają duży bagaż ciężkiego kodu JS, niemniej jednak mamy możliwość generowania plików statycznych tak jak jest to zrobione na tej stronie. Dzięki temu strona staje się znacznie lżejsza niż taka stworzona, np. w Wordpressie. Dodatkowo możemy swobodnie wybierać frameworki i dostosowywać je do naszych potrzeb. O ile nie użyłbym angular'a do napisania tej strony, o tyle vue.js świetnie się do tego nadaje. O innych zabiegach, takich jak CDN'y, GZIP'y nie będę się rozpisywał, jednak chodzi o to, że istnieje wiele czynników, które sprawią, że tego typu strony będą ładowały się znacznie krócej niż ich PHP'owe odpowiedniki. Dodatkowym czynnikiem, który przemawia za stronami opartymi na JS jest fakt, że silniki przeglądarek ewoluują szybko (tak, nawet IE, który niedawno otrzymał silnik Chromium) i dość mocno wspierają kod JavaScript zarówno na komputerach stacjonarnych, jak i na telefonach. Pracując nad większymi projektami w grupie kilku programistów również praca jest łatwiejsza, gdyż pozwala na rozbicie front'u i backend'u aplikacji na dwa oddzielne byty, a następnie łączenie ich za pomocą REST API. Na dużych serwisach PHP'owych co prawda istnieje możliwość rozdzielenia tego w podobny sposób, jest to jednak zdecydowanie bardziej uciążliwe i prowadzi do wielu nieprawidłowości na tym polu.

Bazy danych

Kolejnymi elementami stron, które przechodzą proces odmładzania są bazy danych. Tutaj oczywiście nie rezygnujemy ze starych poczciwych relacyjnych baz, które w dużych serwisach będą nadal świetnie funkcjonować. Na mikro lub małych stronach, gdzie DB (database) ma zawierać w sobie niewiele danych, głównie tekstowych, logicznych, numerycznych i z pewnością nierelacyjnych, swobodnie możemy zastąpić je takimi tworami jak Firebase czy nawet plikami .JSON, jak ma to miejsce na obecnej stronie www. Połączenie frameworka JS z Firebasem jest bajecznie proste, a daje wiele możliwości na rozwój aplikacji oraz jej działanie w "czasie rzeczywistym" (jeśli macie do wyboru odświeżanie strony co kilka sekund, żeby zobaczyć nową wiadomość na czacie, a po prostu otrzymywanie nowych wiadomości na czacie bez ingerencji, to wiadomo, które rozwiązanie jest lepsze).

Konkluzja

Niektórzy mogą zadać sobie teraz pytanie, czy warto przepisywać strony z ciężkich systemów na te lżejsze. Odpowiedź nie jest jednoznaczna. Wszystko zależy od tego do czego dana strona została stworzona - jeżeli mielibyśmy przepisać stronę sklepu internetowego, który dobrze działa np. na woocommerce, tylko po to by unowocześnić jego technologię, to byłoby to stratą czasu.Jeżeli jednak mamy strony typu onepager lub strony informacyjne, które nie korzystają z baz danych to nie widzę przeszkód, by spokojnie przejść na lżejsze odpowiedniki. Takie działanie wyeliminuje koszt hostingu, a zarządzanie stronami stanie się łatwiejsze dzięki połączeniu ich z repozytoriami plików, które będą śledzić zmiany w kodzie.

---

Ten wpis jest wprowadzeniem do nowej serii, która pojawi się na blogu. Opiszę w niej proces tworzenia dynamicznej strony www za pomocą frameworka Vue.js - Nuxt.js razem z połączeniem Firebase. Strona będzie zawierała system rejestracji, logowania oraz czat.