Front-end i back-end aplikacji (cz. 1)

Application front-end and back-end (part 1)

 4 min czytania

Front-end i back-end aplikacji

Rozwój oraz popularyzacja Internetu na przestrzeni ostatnich dwóch dekad zupełnie zmieniły sposób, w jaki konsumujemy treść. Statyczne niegdyś strony, umożliwiające zaprezentowanie określonych informacji, zostały w dużej mierze wyparte przez rozbudowane aplikacje, umożliwiające wchodzenie w interakcję z użytkownikiem, dynamiczne dostosowywanie zawartości do jego preferencji, wykonywanie złożonych zadań, takich jak edycja dokumentów lub obróbka zdjęć czy filmów, a wszystko to często z wykorzystaniem rozbudowanych ekosystemów chmurowych i sztucznej inteligencji.

W tym artykule przyjrzymy się, z jakich podstawowych elementów składa się niemal każda witryna internetowa i omówimy, w jaki sposób odpowiadają one za zapewnienie najlepszego doświadczenia końcowemu odbiorcy.

Ogólna budowa aplikacji internetowych

Współczesne aplikacje internetowe opierają swoje działanie w głównej mierze na architekturze klient-serwer. Aplikacja internetowa jest – w najprostszej definicji – programem, który jest uruchamiany na zewnętrznym serwerze WWW, natomiast interakcje z nim są możliwe z wykorzystaniem aplikacji klienckiej – przeglądarki internetowej lub dedykowanego programu przygotowanego przez twórcę aplikacji. Drugie z tych rozwiązań cieszy się największą popularnością na platformach mobilnych, takich jak systemy Android i iOS dostępne na smartfonach oraz tabletach.

Aplikacja klienta łączy się z serwerem korzystając z protokołu HTTP (ang. Hypertext Transfer Protocol), który pozwala na wymianę danych, opierając się na generowaniu przez serwer odpowiedzi na wysyłane przez aplikację klienta zapytania.

Największą zaletą aplikacji internetowych jest ich elastyczność – działanie aplikacji internetowej odbywa się na serwerze WWW, podczas gdy aplikacja klienta odpowiada jedynie za wyświetlenie rezultatów jej pracy. Dzięki temu korzystanie z niej jest możliwe niemal na każdym urządzeniu podłączonym do internetu – platformę z filmami, odtwarzacz muzyki lub klienta poczty e-mail można z powodzeniem uruchomić na komputerze, smartfonie, konsoli do gier czy telewizorze. Drugorzędne znaczenie ma także wydajność urządzenia klienta – korzystanie z aplikacji internetowych jest możliwe na nawet kilkunastoletnich urządzeniach biurowych, o ile posiadają one aktualną, obsługującą współczesne standardy przeglądarkę.

Za ich największą wadę można z kolei uznać konieczność nieprzerwanego połączenia z Internetem, bez którego funkcjonalność aplikacji zostaje, w zdecydowanej większości przypadków, całkowicie zablokowana. Prawidłowe działanie aplikacji internetowej wymaga również dodatkowej pracy ze strony jej twórcy – dostosowania aplikacji do niezliczonych rozmiarów ekranów i metod wprowadzania (pilot do telewizora, kontroler do gier, ekran dotykowy, klawiatura i mysz), zapewnienia odpowiedniej wydajności serwera względem liczby aktywnych użytkowników, a także wprowadzenia dodatkowych zabezpieczeń, chroniących przechowywane na serwerze dane.

Front-end aplikacji, czyli interfejs użytkownika

Front-end w kontekście działania aplikacji internetowej oznacza technologie, które są wykorzystywane przez aplikację klienta do wyświetlenia GUI (interfejsu graficznego, ang. graphical user interface) aplikacji. Treści wchodzące w jego skład, elementy interfejsu, z którymi użytkownik może wchodzić w interakcje, a także style, określające wygląd finalnej strony, są dostarczane przez serwer i interpretowane przez urządzenie użytkownika.

Na front-end aplikacji składają się 3 główne technologie:

  • HTML (ang. HyperText Markup Language) – jest to standard oznaczania informacji zawartych na stronie, umożliwiający przeglądarce rozpoznanie ich typu i dostosowanie na jego podstawie sposobu jego wyświetlenia. Wśród tak zwanych „znaczników” HTML znajdują się między innymi oznaczenia nagłówków, akapitów, hiperłączy, list, a także odniesienia do konkretnych plików, na przykład materiału video lub zdjęcia. Umożliwia on także przypisywanie własnych identyfikatorów i oznaczeń, dodatkowo rozbudowując możliwość rozróżniania poszczególnych elementów strony.
  • CSS (ang. Cascading Style Sheets) – jest to standard pozwalający na określenie reguł, na podstawie których przeglądarka określa, w jaki sposób ma zostać wyświetlona zawartość określonego elementu HTML. Wczesne wersje CSS umożliwiały jedynie podstawową edycje wyglądu, np. określenie rozmiaru czy koloru czcionki, koloru tła lub marginesów. W chwili obecnej to rozbudowane narzędzie, z wykorzystaniem którego można niemal dowolnie zarządzać rozmieszczeniem oraz prezentacją poszczególnych elementów strony, pozwalające m.in. na ich animację.
  • JavaScript (JS) – język programowania, szeroko stosowany również poza front-endem. W kontekście aplikacji internetowych najczęściej odpowiada za interakcję użytkownika z interfejsem strony internetowej, reagując na jego działania i odpowiednio modyfikując treść HTML oraz CSS. Choć jego możliwości są niemal nieograniczone, jego zastosowanie w końcowej stronie internetowej przekłada się na zwiększenie wymagań sprzętowych, jakie należy spełnić w celu zapewnienia prawidłowego działania aplikacji na urządzeniu użytkownika.

Połączenie tych rozwiązań umożliwia przeglądarce czytelne oraz atrakcyjne wizualnie zaprezentowanie interfejsu aplikacji użytkownikowi, odgrywa więc ono szczególną rolę – stanowi pomost pomiędzy użytkownikiem a właściwą aplikacją, znajdującą się na… – kontynuacja w części 2.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *