Trendy w technologiach webowych – tworzenie aplikacji SPA

Czasy monolitów się skończyły, API jako wymiana danych między backendem i frontendem stała się standardem. Nie pozostaje nic innego, jak korzystać z tych dobrodziejstw i pisać niezależne lub częściowo zależne od backendu aplikacje frontendowe. Pomagają nam w tym nowo pojawiające się frameworki lub biblioteki. Pytanie, z którego rozwiązania warto skorzystać i kiedy?


Z poniższego artykułu dowiesz się:

  • Czym jest SPA i kiedy warto je wybrać
  • Czym różnią się Angular, React oraz Vue
  • W jaki sposób trzy najpopularniejsze biblioteki/frameworki pomogą w zbudowaniu SPA

Czym jest aplikacja SPA? 

Single Page Application to aplikacja, która nie wymaga przeładowania strony, gdyż kontent doładowywany jest dynamicznie. To podstawowa zasada, która określa aplikację SPA. Najpopularniejszym przykładem takiej aplikacji jest Facebook. 

Cechy aplikacji SPA

  • dynamiczna podmiana treści (brak przeładowania strony) 
  • html, css, js pobierany tylko raz 
  • rodzaj urządzenia nie gra roli (mobile, desktop, …) 

Aplikacja SPA często oznacza dla frontend developera więcej pracy oraz większą odpowiedzialność
Część pracy wykonywanej przez serwer, przechodzi na aplikację np.: 

  • routing – obsługa tylko na froncie lub powiązane z backendem, czasem aplikacja musi się dowiedzieć czym jest podany adres url 
  • zarządzanie stanem i danymi 
  • zarządzanie logowaniem 
  • przydaje się wiedza DevOps – serwer SSR, nagłówki, cachowanie, bezpieczeństwo requestów 
  • publikacja, wersjonowanie

Zalety aplikacji SPA 

Jakie są zalety korzystania z aplikacji SPA? Można je podzielić na te z punktu widzenia UX Designera oraz Developera: 

Zalety z punktu widzenia UX Designera:

  • Wrażenie użytkownika jak przy natywnej aplikacji 
  • Szybkie wczytanie się aplikacji i możliwość interakcji 
  • Szybkie poruszanie się po aplikacji 
  • Wrażenie spójności w całej aplikacji 
  • Budowanie zaufania i poczucia bezpieczeństwa użytkownika, podczas poruszania się po dobrze działającej, spójnej aplikacji 

Zalety z punktu widzenia Developera:

  • Aplikacja frontendowa niezależna od backendu 
  • Odrębny zespół 
  • Osobne repozytorium, niezależne publikacje 
  • Łatwiejsze developowanie i debugowanie 
  • Lepsze cachowanie 
  • Lepsza skalowalność 

Wady aplikacji SPA 

Wadą w przypadku aplikacji SPA, powinniśmy nazwać większy narzut na prace i zasoby sprzętowe, aby sprostać problemom. Jakie najczęściej pojawiające się problemy możemy wyróżnić? 

  • Rozmiar plików wynikowych – wraz z rozbudową, rosną pliki css i js, które aplikacja musi pobrać do poprawnego działania. Podzielenie aplikacji na moduły, nie zawsze jest trywialne i zależy od użytych bibliotek/frameworków  
  • SEO – należy używać SSR (Server Side Rendering), dodatkowy narzut sprzętowy i programistyczny 
  • Większe ryzyka związane z bezpieczeństwem danych, wymagające uwagi i dodatkowych zabezpieczeń

Framework, biblioteka i jeszcze więcej pluginów 

W sieci można znaleźć całą masę rozwiązań, które teoretycznie powinny wykonywać prace za nas. Czasami takie aplikacje to przerost formy nad treścią, ale zdarza się, że dają nam realne, wręcz mierzalne korzyści. Jednakże należy pamiętać, żeby dobierać gotowe rozwiązania z głową.

Biblioteka vs framework 

Kluczową różnicą pomiędzy biblioteką a frameworkiem, jest sposób wykorzystania dostępnych metod, oraz to co możesz stworzyć w swojej aplikacji. Gdy korzystamy z frameworka, mamy narzuconą formę pisania aplikacji. To właśnie z naszą aplikacją wpinamy się do ekosystemu, który tworzy framework. W przypadku bibliotek, programista ma większą swobodę. Nasza aplikacja jest podstawą, a biblioteki tylko dodatkami, z których korzystamy w dowolnym momencie.

Rys. 1. Biblioteka vs Framework (źrodło: http://tomasp.net/blog/2015/library-frameworks/)

W dalszej części przybliżone zostaną dwie biblioteki: React i Vue, oraz framework Angular.

Korzyści jakie niesie ze sobą AngularReact i Vue 

W świecie frontendu, co chwilę pojawiają się nowe narzędzia. Skupmy się na 3 najpopularniejszych rozwiązaniach w ostatnim czasie. Co nam dają jako framework/biblioteka? Poniższe porównanie to również odpowiedź na pytanie, czy warto z nich korzystać pisząc aplikacje SPA

Zarządzaniem stanem: Flux (ReduxVuexNgRedux) 

Dzięki zastosowaniu Flux, możemy łatwo zarządzać warstwą danych w naszej aplikacji. 

  • State – stan aplikacji, źródło prawdy 
  • Getter – metody pobierania danych z stanu 
  • Mutator / Reducer – jedyne miejsca, które mogą zmienić stan 
  • Action – wywołana z komponentu, komunikuje się z API, wywołuje mutacje 

Architekturę Flux możemy zastosować praktycznie w każdej aplikacji. Dla omawianych bibliotek istnieją gotowe dodatki, implementujące warstwę danych. Ułatwia ona dostęp do stanu aplikacji i upraszcza jego zmianę, która powoduje aktualizację wszystkich potrzebnych komponentów.  

Zabawa z DOM 

Vue i React używają implementacji wirtualnego drzewa DOM. Angular stosuje podejście zmian na rzeczywistym drzewie DOM, ale inkrementacyjnie. Tak czy inaczej, sami nie musimy martwić się o aktualizację DOM. Obydwa podejścia są porównywalnie efektywne i znacznie wydajniejsze od standardowego sposobu aktualizowania węzłów, bezpośrednio w DOM przeglądarki. 

Rys. 2. Virtual DOM
Rys. 3. Incremental DOM

Na jakie rozwiązanie zdecydować się? 

Każdy developer staje kiedyś przed wyborem, które rozwiązanie zastosować. Jeśli dopiero zaczynamy pracę z danym frameworkiem/biblioteką, warto zapoznać się z nim bardziej szczegółowo i zdecydować się, czy chcemy w nim programować. 

  • Angular – @angular/core + @angular/forms + @angular/http + @angular/router + … 
  • ReactJS – React Router, Axios, Emotion, Next.js, Redux, … 
  • VueJS – vue-router, Axios, Nuxt.js, Vuex, … 

Angular

Jest frameworkiem, przez co już na starcie praca z nim jest trudniejsza. Musimy nauczyć się dokładnie jak i co pisać. Angular zawiera w sobie większość potrzebnych narzędzi, czy chcemy czy nie, definiuje strukturę projektu, nazewnictwo, typowanie i wiele więcej. Dzięki temu, każdy projekt wygląda dokładnie tak samo, co umożliwia łatwe wejście osoby, która już pisała w Angular.  

React

Jako biblioteka narzuca architekturę komponentu oraz jego cykl życia, jednak architektura całej aplikacji leży po stronie programisty. Korzystamy z komponentów, aby przekazywać dane i aktualizować DOM, co jak już było wcześniej powiedziane, biblioteka robi za nas. Wszystkie dodatki, takie jak routing, typowanie, obsługa formularzy, itp. możemy zastosować w dowolnym momencie. Również dowolność w wyborze pluginów jest dużo większa niż w przypadku Angulara. 

Vue

W głównej mierze wykonuje za nas bindowanie danych do DOM. Pisanie w HTML zbliżone jest do Angulara. React posiada zupełnie inny język JSX. Jest biblioteką, w której możemy znaleźć i wykorzystać wiele dodatków. Teoretycznie, Vue powinien być najłatwiejszy do nauczenia się w podstawowej wersji. Praktyka pokazuje jednak, że rzeczywista aplikacja, wykorzystująca wiele dodatków jak routing, flux, komunikację z restApi, itp., wymaga podobnej jak w React ilości nauki. 

Trudność zależy w dużej mierze od skali projektu i zastosowanych w nim rozwiązań.  

Wszyscy podążają za trendami, dlatego warto być na bieżąco i słuchać opinii całego świata. Z takich danych możemy dowiedzieć się, dokąd zmierza dany framework, czy łatwo się w nim pisze lub kto go utrzymuje.  

Podczas pisania aplikacji wykorzystujemy wiele dodatków. Pamiętajmy, że muszą być ze sobą kompatybilne. Świat technologii idzie na przód, a aplikacja, która nie podąża za nim, w końcu ulega przedawnieniu. Zbyt wiele zależności sprawia, że trudniej je utrzymać w ładzie oraz aktualizować. A jeśli jakaś przestaje być utrzymywana, to należy ją zastąpić inną, co zwiększa nakład pracy.   

Polecam zapoznać się ze statystykami na temat frameworków.

Podsumowanie 

Czy warto pisać aplikacje typu SPA? Uważam, że powinniśmy odpowiedzieć na to pytanie tak: warto pisać zawsze, kiedy pojawi się taka możliwość. Zdarzają się oczywiście wyjątki, np. dla strony, która nie robi nic innego poza wyświetlaniem kilku tekstowych zakładek, nie warto podejmować się takich działań. 

Jeśli jednak już piszemy SPA, to z których rozwiązań skorzystać? Tutaj sprawa nie jest prosta i wybór często będzie podyktowany doświadczeniem programistów w danej technologii. Dodatkowo zakres projektu dyktuje, czego będziemy potrzebować.

Nasi eksperci
/ Dzielą się wiedzą

Ilustracja przedstawiająca robota reprezentującego sztuczną inteligencję, otoczonego symbolami wyzwań i błędów w sztucznej inteligencji. Obraz zawiera pomarańczowy mózg, zepsutą żarówkę i cyfrowe piksele, symbolizujące dane i zagrożenia etyczne związane z awariami sztucznej inteligencji
30.10.2024

Wpadki AI / Gdy sztuczna inteligencja wymyka się spod kontroli

AI

Sztuczna inteligencja rewolucjonizuje wszystkie branże, oferując naprawdę imponujące możliwości w zakresie wydajności, szybkości i innowacyjności. Jednak w miarę jak systemy AI stają się coraz bardziej zintegrowane z procesami biznesowymi, staje się oczywiste, że narzędzia te nie są również pozbawione wad. Od małych błędów po poważne...

AI w optymalizacji łańcucha dostaw materiałów budowlanych
28.10.2024

Zastosowanie sztucznej inteligencji w optymalizacji łańcucha dostaw materiałów budowlanych 

E-Commerce

Czy sztuczna inteligencja może zrewolucjonizować zarządzanie łańcuchami dostaw materiałów budowlanych? Dowiedz się, jak AI może pomóc w optymalizacji prognozowania zapotrzebowania, zarządzaniu zamówieniami i stanami magazynowymi, a także zminimalizować ryzyko i spersonalizować ofertę dla klientów. Odkryj przyszłość AI w branży...

08.10.2024

Magento Open Source vs Adobe Commerce / Który system e-commerce wybrać?

E-Commerce

Wybór odpowiedniej platformy e-commerce to kluczowa decyzja, która może zaważyć na sukcesie Twojego biznesu w handlu online. Magento Open Source oraz Adobe Commerce to dwa popularne rozwiązania, oferujące różne możliwości dostosowane do potrzeb przedsiębiorstw. Podczas gdy Magento Open Source to elastyczna platforma z otwartym kodem...

Ekspercka wiedza
dla Twojego biznesu

Jak widać, przez lata zdobyliśmy ogromną wiedzę - i uwielbiamy się nią dzielić! Porozmawiajmy o tym, jak możemy Ci pomóc.

Napisz do nas

<dialogue.opened>