Co to jest frontend?

słowa kluczowe:

Przy budowie WWW frontend jest wszystkim, co przeglądarka odczytuje, wyświetla i uruchomia podczas wywołania strony internetowej.

Front-end jest to część witryny widoczna dla wszystkich lub wybranej grupy użytkowników, odwiedzających stronę internetową przy użyciu komputerów lub urządzeń mobilnych. Na zawartość frontendu składa się głównie kod napisany w trzech językach kodowania: HTML, CSS, JavaScript.

Jaki kod składa się na frontend?

Każdy język kodowania składający się na zawartość frontendu spełnia inne funkcje w programowaniu stron i aplikacji.

Przykładowo, HTML umożliwia zapisanie zawartości strony WWW, style CSS określają wygląd poszczególnych sekcji, a kod JavaScript programuje inne dodatkowe funkcjonalności do sprawnego działania strony (np. animacje, slider, interaktywne menu, czy wyskakujące okna).

HTML

HTML to język kodowania stron internetowych uznawany za tzw. opisowy. Przyjęto, że nazywany jest językiem programowania choć nie odpowiada za konkretne akcje i algorytmy realizowane w ramach stron internetowych.

Przy użyciu języka HTML posługujemy się znacznikami określającymi zawartość każdego bloku i zakładki strony internetowej. W kodzie HTML możemy definiować m.in. tytuły, opisy, tagi, hiperłącza, obrazki, buttony, tabele, akapity tekstu, nagłówki, wersję językową strony i wiele, wiele więcej. W języku HTML opisujemy wszystko to co potem jest wyświetlane w przeglądarce jako wygląd strony internetowej.

CSS

Kaskadowe arkusze stylów (ang. CSS – Cascading Style Sheets) służą do zapisywania reguł CSS, zbiorów zasad formatowania treści. CSS używane jest do opisywania jak mają wyglądać poszczególne elementy witryny, które zostały uprzednio stworzone w HTML.

Kod CSS może mieć wpływ na rozmiar i położenie elementów oraz określać zależności między nimi. W stylach CSS definiujemy wygląd poszczególnych elementów, do których styli i klas odwołujemy się w HTML.

JavaScript

Język kodowania JavaScript został stworzony przez .Netscape w celu umożliwienia tworzenia / rozbudowywania zarówno interfejsu i wyglądu strony internetowej (np. animacje, slajdery, interaktywne menu czy wyskakujące okna typu pop-up).

JavaScript umożliwia tworzenie i rozbudowę strony internetowej o takie elementy i funkcje, które nie są dostępne przy użyciu HTML lub CSS. Budowa witryny internetowej opartej o fragmenty kodu JavaScript jest możliwa dzięki: instrukcjom warunkowym, klasom, pętlom, tablicom, zmiennym, itd..

Pojawienie się JavaScript pozwoliło zrewolucjonizować takie kwestie Internecie jak interaktywność i responsywność stron WWW. JavaScript wraz z lekką biblioteką jQuery wyparły do lamusa technologię Flash, która przez wiele lat była standardem używanym na witrynach internetowych. Teraz to JavaScript zamiast Flash jest powszechnie używany przez webmasterów podczas budowy stron internetowych.

Typy witryn zbudowanych w oparciu o HTML, CSS i JavaScript

Statyczne strony zbudowane w oparciu o kod HTML i CSS – po wywołaniu statycznej witryny, przeglądarka wyświetla odwiedzającemu zawartość gotowych plików (umieszczonych na serwerze), zawierających stałe elementy strony internetowej.
Dynamiczne strony internetowe (tzw. Multi-Page App) – po wywołaniu dynamicznej witryny, a dokładniej w momencie wysłania zapytania przez przeglądarkę odwiedzającego, aplikacja generuje plik HTML z odpowiednią zawartością. Przykładowo, możemy utworzyć grupy użytkowników i pokazywać im różny widok witryny w zależności, do której grupy należą.
Dynamiczne strony internetowe z użyciem JavaScript – analogiczny rodzaj witryny jak przy dynamicznych witrynach generowanych przez Multi-Page App, ale rozszerzony o funkcje kodowane w języku JavaScript.
SPA (tzw. Single-Page App) – są to aplikacje i strony internetowe, które w całości budowane są przy wykorzystaniu JavaScript.

Kim jest frontend developer i co powinien potrafić?

Programiści specjalizujący w projektowaniu stron internetowych nazywani są frontend developerami – zakres ich obowiązków wymaga wiedzy z dziedziny technologii webowych (np. tworzenie stron WWW i/lub aplikacji mobilnych).

Frontend developer potrafi zaprojektować wygodne interfejsy witryn internetowych dla finalnych użytkowników oraz jest w stanie dostosować odpowiednie wyświetlanie stron na różnych urządzeniach (w szczególności na urządzeniach mobilnych). Podczas programowania frontendu wymagana może okazać się znajomość języka angielskiego.

Dla każdego programisty frontend niezbędna może okazać się także znajomość frameworków, czyli pakietów programistycznych pod postacią gotowych modułów do budowy stron WWW i aplikacji. Specjaliści od kodu JavaScript używają frameworki jako narzędzi ułatwiających codzienne kodowanie.

Dzięki repozytoriom z zapisanymi podstawowymi funkcjonalnościami witryn, nie jest wymagane tworzenie kodu za każdym razem od nowa, lecz można ograniczyć się do dodawania kolejnych fragmentów kodu w celu rozbudowania projektu. Najbardziej popularnymi frameworkami są: AngularJS, Backbone, Bootstrap, Foundation i Vue.js (do budowania UI).

Będąc frontend developerem warto znać poniższe narzędzia:

Git – system kontroli wersji, z którego korzystają takie korporacje jak Google, Facebook czy Netflix.
Terminal – legendarne czarne okienko,
wybrane oprogramowanie IDE,
narzędzia do tzw. preprocessingu – których rolą jest usprawnianie prac nad szatą graficzną witryn (np. LESS, Sass lub Stylus).

Uzupełnianie wiedzy przez frontend developera

Przygodę z programowaniem frontend warto rozpocząć od poznania Pythona od samych podstaw. Nie jest on niezbędny przy pracy nad frontendem, ale skutecznie uświadamia młodym programistom zasady kodowania. Jako kolejny etap warto zainteresować się kursami z kategorii Font-End Developera, na których w odpowiedniej kolejności, prostymi etapami poznaje się HTML, CSS oraz JavaScript.

Dobrym kierunkiem uzupełnienia wiedzy przez frontend developera jest zapoznanie się z zasadami UX (ang. User Experience) oraz UI (ang. User Interface), dzięki czemu uczymy się optymalizacji wrażeń i doświadczeń użytkowników korzystających ze stron WWW lub projektowanych aplikacji. Dla każdego programisty frontend ważne jest też posiadanie cech nowoczesnego webmastera, takich jak: poczucie estetyki, znajomość trendów w budowie witryn / aplikacji czy kreatywność.

Fuzja umiejętności programowania frontend z UX/UI gwarantuje bardzo wysokie dochody oraz możliwość pracowania przy wyjątkowych projektach. Na barkach takich specjalistów spoczywają zadania optymalizacji szybkości ładowania witryn, projektowania sposobów prezentacji treści, programowania interfejsów czy nawigacji.

Podczas realizacji projektów internetowych specjaliści UI tworzą koncepcje projektu, programiści frontend zajmują się kodowaniem, a eksperci z dziedziny UX dostosowują wdrożone elementy i funkcjonalności do potrzeb użytkowników.

Czy ten artykuł był pomocny?
Tak Nie

Frontend