Zastanawialiście się, z czego składają się aplikacje webowe, aplikacje internetowe? Albo, jaką rolę pełnią jej poszczególne elementy, warstwy? Albo, w jakich technologiach aplikacje internetowe są najczęściej tworzone? Jakie rodzaje aplikacji webowych są najpopularniejsze?
Oto pytania, na które warto poznać odpowiedzi. Z biznesowego punktu widzenia mają one kluczowe znaczenie, bowiem świadomość różnic i możliwości pozwala precyzyjniej rozwiązywać problemy biznesowe, do których przecież są wykorzystywane.
Dlaczego Aplikacja Webowa nie jest stroną internetową?
Na powyższe pytanie można odpowiedzieć pół żartem pół serio. Bo stron internetowych już po prostu nie ma. Zastąpiły je aplikacje internetowe. Choć nieprecyzyjna, nazwa jednak pozostała. Serwisy wykorzystujące systemy CMS (Content Management System) nadal są nazywane stronami internetowymi, choć w sensie ścisłym są aplikacjami webowymi.
Nieporozumienie ma swoje źródło we wspólnej cesze, jaką współdzielą strony internetowe oraz aplikacje internetowe. Część tych ostatnich pełni, podobnie, jak kiedyś pełniły strony internetowe, funkcje tylko informacyjne. Oferują jednostronny przekaz, zredukowany do informacji.
Niektóre aplikacje webowe, podobnie jak wszystkie strony internetowe nie pozwalają swoim użytkownikom wejść w interakcję. Można coś na nich przeczytać, obejrzeć, usłyszeć, ale nic ponadto zrobić nie jesteśmy w stanie.
Współczesne aplikacje webowe oparte są na rozbudowanych interakcjach, wielorakich funkcjonalnościach i szeroko rozumianej użyteczności.
Tworzymy aplikacje oparte o usługi i komponenty AWS.
Funkcje aplikacji webowych
Aplikacje internetowe ułatwiają nam życie, rozwiązują nasze konsumenckie problemy. A zakres ich wykorzystania jest coraz bardziej szeroki.
Pomagają nam:
- zamawiać (np. jedzenie)
- kupować (np. bilety, książki, kwiaty)
- bookować (np. bilety lotnicze, rezerwować miejsca hotelowe, rezerwować wizyty w salonach kosmetycznych, w gabinetach lekarskich)
- planować wykonanie konkretnych usług (np. sprzątania)
- uczyć się (np. języków, nowych programów)
- znajdować chętnych (np. za pomocą ogłoszeń)
- wymieniać (np. waluty, opinie)
- inwestować (np. na giełdzie)
- uczestniczyć (np. w konkursach, loteriach)
- grać (np. indywidualnie i zespołowo)
- nawiązywać relacje (np. emocjonalne, biznesowe).
Powyższa lista daleka jest od kompletności, a z czasem będzie się jeszcze bardziej wydłużać. To, co od razu zwraca uwagę to ilość czasowników, które określają czynności, działania (i w domyśle ich skutki) możliwe do osiągnięcia za pomocą Aplikacji Webowych. Aplikacje internetowe dla biznesu są dziś tym, czy paliwo jest dla pojazdów mechanicznych.
Stanowią narzędzie:
- sprzedażowe (np. sklepy internetowe)
- wizerunkowe
- edukacyjne
- pozwalające nawiązywać relacje biznesowe
- pozwalające na cyfryzację potrzeb biznesowych.
Aplikacje Webowe budowane są na bazie kilkunastu języków, technologii, rozwiązań. W stosie technologicznym wykorzystywanym do budowania aplikacji internetowych znajdziemy między innymi: Python, Django, PHP, React, Node.js i wiele, wiele innych.
Aplikacja Webowa - definicja
Czym jest aplikacja webowa? Dla porządku podajmy definicję. Mówiąc najprościej, Aplikacja internetowa jest rodzajem programu komputerowego, który jest zainstalowany na serwerze sieciowym i dostępny przez przeglądarkę internetową.
W odróżnieniu od aplikacji desktopowych i mobilnych, Aplikacje Webowe nie muszą być instalowane na komputerze, ani na telefonie komórkowym, tablecie.
Są dostępne na każdym systemie operacyjnym (np. Linux, Windows, MacOS), na każdym urządzeniu (także w telewizorach) i w każdej przeglądarce.
Najczęściej dostęp do nich jest pełny, choć spotkać można także Aplikacje Webowe, do których pełni funkcjonalności dostęp wymaga:
- uwierzytelnienia (podania loginu i hasła)
- wykupienia czasowego dostępu (paywall).
Rodzajów, kryteriów podziału, Aplikacji Webowych jest kilka. Nie wszystkie, z czysto biznesowego punktu widzenia, są istotne, dlatego w tym artykule opowiemy tylko o najpopularniejszych. Najczęściej wykorzystywanych w celach biznesowych.
SPA Single Page Application - Jednostronicowa Aplikacja Internetowa
Zgodnie z ich nazwą, interakcja między użytkownikiem a aplikacją odbywa się w ramach jednej strony. Cała zawartość (informacje, funkcjonalności) znajduje się w jednej przestrzeni, co zdecydowanie ułatwia i przyspiesza użytkowanie.
W Single Page Applications warstwa prezentacji jest całkowicie generowana po stronie klienta (przeglądarki internetowej użytkownika). Nie ma konieczności odświeżania, przeładowywania aplikacji - content jest pobierany dynamicznie.
Aplikacja (Web Application) pobiera, podmienia, wyświetla, tylko te dane, które są wynikiem działań użytkownika (uwierzytelnienie i synchronizacja danych).
Single Page Application swoją szybkość zawdzięczają wykonywaniu logiki sterowania interfejsem nie na serwerze, ale w przeglądarce. Jest możliwe głównie dzięki mocom obliczeniowym współczesnych urządzeń.
Aplikacja wysyła i pobiera tylko niezbędne dane do serwera za pomocą API. Dzięki asynchroniczności (wysyłanie wielu zapytań jednocześnie w tle) aplikacje takie są bardzo szybkie i wysoce interaktywne. Single Page Application cechują się także mniejszym zużyciem zasobów serwerowych
Zalety Aplikacji Webowych SPA
Popularność SPA zawdzięczają licznym korzyściom oraz niewielkim wadom.
Do ich najważniejszych zalet należy:
- brak konieczności używania wtyczek (np. Flash)
- kod aplikacji (HTML, CSS, JavaScript) jest zazwyczaj pobierany tylko raz a większe części aplikacji są pobierane w tle, co znacząco odciąża infrastrukturę serwującą pliki statyczne
- efektywniejsza skalowalność
- mniejsze obciążenie serwera aplikacyjnego (część operacji jest wykonywana po stronie klienta, a nie na serwerze)
- niezależność od backendu (aplikacja frontendowa komunikująca się z backend za pośrednictwem API)
- szybkość i płynność interakcji między użytkownikiem a aplikacją
- szybkość wczytywania się
- szybki i responsywny interfejs użytkownika
- bardzo dobre tzw. Pierwsze Wrażenie
- wydajniejsze cachowanie
Wady Aplikacji Webowych SPA
Aplikacje Jednostronicowe, choć bardzo efektowne, mają także swoje wady. Choć nie są one bardzo uciążliwe, należy mieć jednak świadomość ich istnienia. Do najważniejszych należy:
- duży rozmiar plików wynikowych
- SEO-Unfriendly – problem umiarkowanej przyjazności aplikacji SPA można rozwiązać za pomocą Server Side Rendering
- większe trudności z dostosowaniem aplikacji do wymogów WCAG
- stosunkowo większy nakład pracy potrzebny do tworzenia/rozwoju aplikacji
- wymagają dodatkowych zabezpieczeń
- większe zużycie mocy obliczeniowej urządzenia użytkownika
- większe trudności z dostosowaniem aplikacji do starszych przeglądarek i nietypowych urządzeń
Rekomendowane zastosowania Aplikacji Webowych SPA
Z biznesowego punktu widzenia, aplikacje SPA są polecane do działalności, w których interakcja, atrakcyjność wizualna, szybkość działania, użyteczność są kwestiami niezwykle ważnymi.
Najczęściej znajdują zastosowanie w branżach, w których priorytetowe jest:
- zapewnienie widoku i interakcji w czasie rzeczywistym (np. mapy)
- posiadanie złożonych interfejsów o dużej ilości interakcji (np. social media)
- zapewnienie aktualizacji widoków w czasie rzeczywistym (np. wizualizacja danych)
- zapewnienie wygodnej edycji tylko wybranych danych (np. CRM)
- zapewnienie lepszych wrażeń estetycznych, większej interaktywności.
Kiedy nie stosować Aplikacji Webowych SPA
Zdecydowanie należy unikać korzystania z tego rodzaju aplikacji, gdy prezentowane treści:
- są tylko statyczne, rzadko aktualizowane (HTML)
- zależy nam na dotarciu do użytkowników używających starszych wersji przeglądarek, sprzętu o gorszych parametrach technicznych
- musimy dostarczyć rozwiązania w szczególności dostosowane do potrzeb użytkowników niepełnosprawnych (WCAG)
- budujemy serwis SEO-friendly.
Przykłady Single Page Applications: Gmail, Google Maps, Facebook, PayPal, Twitter, Netflix.
MPA Multi-Page Application - Wielostronicowe Aplikacje Webowe
Właściwie można powiedzieć, że tradycyjne aplikacje Wielostronicowe znajdują zastosowanie, a właściwie są rekomendowane, wszędzie tam, gdzie odradzane jest stosowane aplikacji SPA.
MPA to tradycyjny (starszy) rodzaj Aplikacji Webowych. Aplikacje Wielostronicowe cechuje ładowanie całej strony od nowa za każdym razem, gdy użytkownik wchodzi z nimi w interakcję, co może spowolnić szybkość ich działania i wpływać na User Experience.
Multi-Page Applications cechują się:
- renderowanie strony (generowanie kodu HTML) odbywa się po stronie serwera
- przyjaznością wyszukiwarkom (SEO Friendly)
- wyższym poziomem bezpieczeństwa i integralności danych
- względną łatwością tworzenia szczególnie przy wykorzystaniu takich frameworków jak Django
Wady Aplikacji Wielostronicowych
Aplikacje MPA, choć nadal bardzo chętnie wykorzystywane, posiadają wady, które rzutują na ich przydatność, efektywność biznesową.
Oto najważniejsze z nich:
- w trakcie przeładowania strony następuje ponowne pobranie tych samych danych, co skutkuje nadmiernym obciążeniem serwera
- nawigacja po aplikacji MPA jest wolniejsza niż w przypadku aplikacji SPA
- warstwy - frontend i backend - są zazwyczaj ze sobą powiązane bardziej niż ma to miejsce w przypadku SPA.
Rekomendowane zastosowania Aplikacji Wielostronicowych
Jak już wspominałem aplikacje MPA nadal są bardzo chętnie wykorzystywane w celach biznesowych i wszystko wskazuje na to, że jeszcze długo będą. W szczególności są polecane firmom:
- posiadającym rozbudowaną ofertę produktową lub usługową (np. sklepy internetowe)
- udostępniającym duże ilości contentu edukacyjnego, informacyjnego
W szczególności, jeśli prezentowany content nie wymaga częstej aktualizacji, jest statyczny i nie ma bardzo dużej interakcji z użytkownikiem.
Przykłady Multi-Page Applications: Amazon, sklepy internetowe w dużej części z nich korzystają.
Z czego składa się Aplikacja Webowa?
W najbardziej podstawowym podziale, stworzonym według kryterium użytkownika i właściciela, nadawcy i odbiorcy, Aplikacja Webowa składa się z części Frontend (Client-Side) oraz Backend (Server-Side).
W sensie technologicznym warstwę Frontend najczęściej tworzy się w języku HTML, CSS i JavaScript i frameworków Next.js, React/Redux, Vue i Angular. Warstwa Backend najczęściej jest tworzona za pomocą języków (np. PHP, Python, Java) i frameworków (np. Django, Symfony, Node.js).
Na strukturę, architekturę aplikacji webowej można także spojrzeć z perspektywy warstw, jakie można w niej wyróżnić.
Najbardziej klasyczny jest podział, w którym wyróżnia się warstwę:
- Prezentacji - jej głównym elementem jest GUI (Graphical User Interface), czyli Graficzny Interfejs Użytkownika, który pozwala użytkownikom wchodzić w interakcję z aplikacją webową
- Logiki Biznesowej - pośredniczącej między warstwą Prezentacji i Warstwą Danych, odpowiedzialną za realizację wszystkich procesów biznesowych, do których wykonania aplikacja została stworzona (np. realizacji zamówień)
- Danych - odpowiedzialnej przede wszystkim za przechowywanie danych użytkowników
- Infrastruktury - wszystkich elementów, pozwalających aplikacji działać.
Wzorce projektowe - Model View Controller
Model View Controller jest wzorcem, w którym każda z wyżej wymienionych warstw pełni osobną funkcję, działa na podstawie własnej logiki i obsługuje osobny zestaw funkcjonalności.
W ramach tego modelu Aplikacja Webowa składa się z:
- Widoku - a więc warstwy, logiki prezentacji danych, które są pobierane przez Kontroler z Warstwy Danych, odpowiedzialnej za to jak Aplikacja Webowa wygląda
- Modelu Danych - warstwy stanowiącej reprezentację problemu, opis relacji zachodzących między danymi, reguł spójności i integralności danych
- Kontrolera - warstwy, logiki pośredniczącej między warstwą Widoku a warstwą Modelu Danych, odpowiedzialnej za to jak Aplikacja Webowa działa, jakie interakcje zachodzą między modelami, a także za przekazywanie danych do warstwy prezentacji (Widoku).
Warstwę Widoku, Prezentacji tworzą programiści frontendowi, którzy nadają aplikacji estetyczny, przyjazny, intuicyjny, ergonomiczny wygląd. Projektują interfejs, layout zorientowany na wywołanie jak najlepszych wrażeń u użytkownika (User Experience).
Z kolei pozostałe warstwy są tworzone przez programistów specjalizujących się w technologiach backendowych, których celem jest dostarczenie rozwiązań stabilnych, bezpiecznych, efektywnych.
Istotą warstwowego podejścia do tworzenia Aplikacji Webowych jest autonomizacja problemów występujących w każdej z warstw i unikanie wprowadzania zależności, które skutkują zmianami w całym systemie.
Innymi słowy, tworzenie aplikacji musi mieć na celu takie jej zbudowanie, by zmiana wprowadzona w jednej warstwie nie miała dużego wpływu na pozostałe.
Dzięki takiej separacji jest możliwe szybsze, łatwiejsze tworzenie, rozwijanie, testowanie, zarządzanie, naprawianie Aplikacji Webowej. Pozwala to także zdefiniować role, zależności, odpowiedzialności, sposoby komunikacji, dostępy w ramach całego systemu, a więc relacje zachodzące między całymi warstwami oraz między elementami poszczególnych warstw.
Współcześnie możemy spotkać inne odmiany tego wzorca, takie jak MVP (Model-View-Presenter) oraz MVVM (Model-View-ViewModel).
Warstwa Logiki Biznesowej (Business Layer)
Z punktu widzenia właściciela biznesu warstwa Logiki Biznesowej pełni rolę kluczową, bowiem stanowi przełożenie procesów, celów biznesowych na funkcjonalności dostępne w Aplikacji Webowej.
Przykładowo dla aplikacji bookingowej, służącej do rezerwacji, Logiką Biznesową będzie możliwość przejrzenia dostępnych ofert, dokonania wyboru oraz w efekcie dokonania rezerwacji konkretnego obiektu w określonym terminie.
Warstwa Logiki Biznesowej aplikacji internetowej ma na celu przede wszystkim:
- implementowanie Reguł Biznesowych, czyli ich przełożenie na język kodu (np. konkretne instrukcje, obliczenia)
- walidowanie, buforowanie danych, czyli sprawdzanie ich poprawności, która jest niezbędna do poprawnego, efektywnego działania Aplikacji Webowej oraz przyspieszanie ich obsługi
- zarządzanie przepływem pracy
- zarządzanie stanami
- zarządzanie dostępami
- pozwalać na identyfikowanie użytkowników.
Innymi słowy, poprawnie określona Logika Biznesowa odpowiada za skuteczność, efektywność, przyjazność, z jaką Aplikacja Webowa pozwala osiągać cele biznesowe oraz dostarczać wartość jej użytkownikom.
Kultura tworzenia Aplikacji, czyli jak stworzyć profesjonalną Aplikację Webową
Kultura tworzenia dowolnego oprogramowania niczym nie różni się od kultury osobistej – to także zbiór reguł, zasad i dobrych praktyk, dzięki którym jesteśmy lepiej odbierani przez nasze otoczenie.
W przypadku oprogramowania naszym otoczeniem są z jednej strony użytkownicy, developerzy oraz klienci. Z drugiej strony do otoczenia oprogramowania zaliczamy także infrastrukturę, w której działa nasza aplikacja.
Do developerskiego savoir-vivre zaliczyć należy następujące cechy i zasady:
- Dbałość o czystość i przejrzystość kodu – nasz styl programowania, jak dobry charakter pisma, powinien być czytelny i zrozumiały. Nie tylko dla nas w momencie tworzenia tego kodu, ale również powinien być zrozumiały dla dowolnego programisty o odpowiednich kwalifikacjach.
- Dbałość o logiczną strukturę – w tworzeniu oprogramowania nie chodzi o wyprodukowanie nieskończonej ilości linijek kodu, tylko o wypracowanie prostej, spójnej i logicznej architektury całego systemu. Zawsze należy pamiętać o zasadach SRP (Single Responsibility Principle), enkapsulacji, uproszczonym dziedziczeniu i hermetyzacji, dzięki czemu nasze oprogramowanie będzie łatwe w konserwacji, a jego rozwój będzie bezpieczny, przyjemny i tani.
- Dbałość o dokumentację i inwentaryzację – pamiętajmy, że to, co wydaje się oczywiste dla nas, wcale nie musi być oczywiste dla osoby z zewnątrz. Dobry kod sam siebie dokumentuje, ale szanujmy czas innych ludzi i nie zmuszajmy ich do czytania całego kodu, jeżeli chodzi np. tylko o zrozumienie jak skorzystać z jednej prostej metody publicznej. Szczególnie w dobie Serverless i Mikrousług powinniśmy dbać o dokumentację API naszego oprogramowania. Pamiętajmy też o tworzeniu spisu składowych naszego systemu – nawet najlepsza encyklopedia bez indeksu czy spisu treści jest całkowicie pozbawiona sensu.
- Dbałość o testy i monitoring błędów – nie ma nic gorszego, niż błąd zgłaszany przez użytkownika czy klienta. Dobre oprogramowanie powinno być dobrze monitorowane, mieć odpowiednie pokrycie testami automatycznymi oraz posiadać pełne spektrum narzędzi diagnostycznych. O każdej awarii, błędzie, anomalii powinniśmy wiedzieć przed zgłoszeniem tego przez naszych użytkowników.
To najważniejsze zasady, jakie stosujemy na co dzień w naszym zespole. Pamiętajmy też, że zagadnienie czystego kodu oraz Kultury Tworzenia Oprogramowania zostało niezwykle obszernie i dobrze opisane w książce Roberta C. Martina „Clean code”. Lekturze obowiązkowej dla każdego programisty!
Dedykowane Aplikacje Webowe dla biznesu
Biznesowe uzasadnienie dla tworzenia Aplikacji Webowych jest dość oczywiste.
Są one tańsze od aplikacji desktopowych czy mobilnych.
Nie muszą być dostosowywane do wymogów różnych systemów operacyjnych (działają w ramach środowiska przeglądarki internetowej).
Dystrybucja aplikacji jest znacznie łatwiejsza niż w przypadku aplikacji instalowanych na urządzeniach użytkowników.
Aplikacje webowe sprawdzą się praktycznie w każdym obszarze biznesu, a współczesne technologie pozwalają na tworzenie wydajnych, prostych w obsłudze i stosunkowo tanich rozwiązań niezależnie od wielkości i złożoności problemu.
Podsumowanie
Zatem zapamiętajmy, strona internetowa to nie aplikacja internetowa. Stron internetowych już właściwie nie ma. W większości przypadków korzystamy, używamy aplikacji internetowej.
Tworząc Aplikację Webową możemy realizować założone cele biznesowe przy zaangażowaniu mniejszych budżetów niż ma to miejsce w przypadku aplikacji desktopowych.
Dzięki podziałowi ich poszczególnych warstw możliwe jest ich szybkie, skuteczne adaptowanie do zmian (rynkowych, technologicznych) oraz rozwijanie. To główne zalety aplikacji, ale nie jedyne.
Wybór najbardziej adekwatnego stosu technologicznego jest uzależniony od poziomu złożoności poszczególnych warstw Aplikacji Webowej oraz poziomu złożoności ich wzajemnych zależności.
Z kolei dbałość o jakość kodu, jego testowanie, wytwarzanie w zgodzie z najwyższymi standardami pozwala uzyskiwać produkt cyfrowy skutecznie rywalizujący na rynku.
