Front-end

Front-end to wszytko to, co widzi użytkownik, wchodząc na witrynę internetową. Odpowiada za kwestię wizualną i funkcjonalność strony www lub aplikacji webowej oraz za budowę takiej struktury, która pozwoli na jak najefektywniejszą interakcję internauty z produktem. Z kolei back-end odpowiada za to, czego nie widać, a więc zapis i obróbkę danych po stronie serwera. Frontend to dziedzina programowania zajmuje się np. nawigacją główną i boczną, układem elementów graficznych i tekstowych czy wszelkimi funkcjonalnościami, które wpływają na poziom użyteczności i przyjemności podczas korzystania z witryny. Wszystkie te elementy zbudowane są na podstawi języków kodowania, jakimi są HTML, CSS oraz języka programowania JavaScript.
 

Programowanie front end

Front-end to dziedzina, którą zajmują się deweloperzy odpowiedzialni za zbudowanie, czyli zakodowanie stron www i aplikacja webowych, które przede wszystkim mają być szybkie i wygodne dla ich użytkownika oraz wyświetlać się poprawnie na urządzeniach o różnej rozdzielczości, a zatem być responsywne. Deweloperzy pracujący nad widokiem witryny wykorzystują różne biblioteki JavaScript, z których najpopularniejsze są Angular, React i Vue. Każda przeznaczona jest do tworzenia front-edu produktów o odmiennej wielkości i zastosowaniu. W Boring Owl korzystamy z wydajnej technologii React, która umożliwia tworzenie niezwykle szybkich i nowoczesnych aplikacji webowych. Dodatkowo front-end wymaga znajomości innych narzędzi do programowania, jakim są mi.in.: Gulp do automatyzacji zadań, Git do pracy w zespole w zdalnym repozytorium, SASS odpowiedzialny za kompilacje CSS oraz Webpack, Npm i Node.js oferujące szeregów przydatnych usprawniających pracę narzędzi. Biblioteki te są niezwykle przydatne, ponieważ zawierają gotowe kody odpowiadające za automatyzacje i funkcjonalności, dzięki czemu programiści nie tracą czasu na ich napisanie ich od podstaw. Ponadto u developerów tego typu ważna jest także wiedza z zakresu UI i UX, aby mogli oni tworzyć przyjazne użytkownikowi interfejsy.

Czym zajmuje się frontend developer?

Front-end developer buduje strony WWW i aplikacje webowe, skupiając się na ich elementach wizualnych i funkcjonalnościach. Powinien on dostarczyć witrynę estetyczną i przejrzystą, a przede wszystkim użyteczną. Obecnie najczęściej projektuje się strony dynamiczne, które pozwalają użytkownikom wejść w interakcję z witryną. Jednak dla mniejszych stron firmowych można zbudować witrynę statyczną, która pojawia się wyszukiwarce dokładnie w ten sam sposób, w jaki jest przechowywana na serwerze. Ten rodzaj witryny nie zawiera żadnych elementów, które umożliwiałyby interakcję z użytkownikiem.

Front-end developerzy często posiadają wiedzę z zakresu User Experience i User Interfejs. Dzięki temu mogą budować nie tylko przyjemną dla oka szatę graficzną strony, ale i maksymalnie uprościć proces poruszania się użytkownika po witrynie. Jego praca polega zatem na budowie układów podstron i poszczególnych bloków, tworzeniu intuicyjnej i łatwej w użyciu nawigacji oraz przyciągnięciu uwagi użytkownika za pomocą ciekawej grafiki czy animacji.

Języki front end

Front-end developer używa kilku języków programowania. Pozwalają one napisać mu instrukcje dla komputera na temat tego, jak powinny wyglądać i gdzie się znajdować poszczególne elementy witryny. Podstawowe języki front-endu to:

• HTML (Text Markup Language), czyli język kodowania znaków, który umożliwia tworzenie struktury witryny internetowej;
• CSS (Cascading Style Sheets), który odpowiada za wygląd witryny, a zatem określa kolory i pozycje poszczególnych elementów na stornie, rodzaj i wielkość czcionek, a nawet pozwala tworzyć ciekawe efekty i animacje;
• Java Script to podstawowy język front-end, który pozwala wprowadzić na stronie ciekawe funkcjonalności oraz sprawić, aby użytkownik mógł wejść z nią w interakcję.

Typy stron internetowych tworzone przy użyciu HTML, CSS i JavaScript

HTML, CSS i JavaScript to podstawowe technologie, które pozwalają na tworzenie różnorodnych stron internetowych. Dzięki nim można budować zarówno proste, jak i zaawansowane projekty webowe.

• Strony statyczne – To najprostszy typ stron, składający się głównie z HTML i CSS. Są to wizytówki firmowe, portfolio czy landing page, które nie wymagają interakcji z użytkownikiem poza podstawowymi elementami.
• Strony dynamiczne – Wykorzystują JavaScript do interakcji z użytkownikiem. Mogą zawierać dynamiczne formularze, animacje czy efekty przewijania.
• Aplikacje webowe (SPA i MPA) – Single Page Applications (SPA), jak Gmail czy Trello, ładują całą treść na jednej stronie, zmieniając tylko jej fragmenty. Multi Page Applications (MPA), np. klasyczne sklepy internetowe, składają się z wielu podstron.
• Strony responsywne (RWD) – Tworzone z myślą o różnych urządzeniach, dzięki czemu wyglądają dobrze zarówno na komputerach, jak i smartfonach.
• Progressive Web Apps (PWA) – Połączenie stron internetowych i aplikacji mobilnych, które mogą działać offline i są szybkie w działaniu.

Każdy z tych typów stron może być tworzony za pomocą HTML, CSS i JavaScript, ale w przypadku bardziej złożonych projektów często stosuje się także frameworki i biblioteki.

Frameworki frontendowe

Frameworki frontendowe to narzędzia, które przyspieszają i ułatwiają proces tworzenia stron internetowych oraz aplikacji webowych. Zapewniają gotowe komponenty, wzorce architektoniczne i funkcjonalności, dzięki którym programista nie musi pisać wszystkiego od zera.

Najpopularniejsze frameworki frontendowe to:

• React – Biblioteka JavaScript stworzona przez Facebooka, wykorzystywana do budowy interaktywnych interfejsów użytkownika w SPA. Posiada komponentową architekturę i szeroką społeczność.
• Vue.js – Lekki framework o niskim progu wejścia, ceniony za intuicyjną składnię i możliwość stopniowego wdrażania do projektów. Idealny do małych i średnich aplikacji.
• Angular – Rozbudowany framework rozwijany przez Google. Używany do dużych aplikacji korporacyjnych, oferuje m.in. TypeScript, system modułów oraz wbudowane rozwiązania dla formularzy i routingu.
• Svelte – Nowoczesne podejście do frontendowego kodu, w którym kod jest kompilowany do czystego JavaScriptu, co poprawia wydajność aplikacji.
• Bootstrap i Tailwind CSS – Frameworki CSS, które ułatwiają stylowanie stron i aplikacji, zapewniając gotowe komponenty i systemy siatek.

Umiejętności front-end developera

Dobry front-end developer obeznany jest również z narzędziami do automatyzacji i optymalizacji kodu, a najważniejsze umiejętności, które powinien posiadać to:

• podstawowa wiedza z zakresu back-endu;
• minimum średniozaawansowana znajomość języka angielskiego;
• umiejętność łączenia ciekawych wizualnie form i optymalnych rozwiązań technicznych;
• znajomość narzędzi do automatyzacji takich jak GULP, Git, Node.js, Webpack czy Babel;
• znajomość preprocesorów SASS lub LESS;
• podstawowa znajomość UX i UI;
• znajomość CMS-ów takich jak WordPress, Drupal czy Joomla.