Kluczowe technologie dla frontend developera

kluczowe-technologie-front

Czym jest frontend strony? To wszystko, co możesz zauważyć w swojej przeglądarce po wpisaniu adresu portalu. Stworzeniem jego wizualnej części zajmuje się właśnie frontend developer. Potrzebuje do tego odpowiednich narzędzi. Najczęściej wykorzystywane są HTML, CSS czy JavaScript. Poniżej przedstawiamy dokładny opis kluczowych technologii, jakie potrzebne są przy tworzeniu frontend developmentu.

Tworzenie stron internetowych z HTML

W celu stworzenia dowolnego oprogramowania, a także strony internetowej, potrzebny jest komputerowy język. W przypadku frontend developmentu najczęściej wykorzystywany jest HTML. Z jego pomocą łatwo można zdefiniować podstawowe struktury strony internetowej jak nagłówki, akapity czy ułożenie poszczególnych elementów względem siebie.

Podstawowe elementy HTML

Pisząc w języku programowania HTML, używa się tagów. Są to krótkie określenia w trójkątnych nawiasach. To one odpowiadają za opisanie poszczególnych elementów strony. Dwa kluczowe tagi to <html>, od którego zaczyna się opis strony internetowej oraz <body>, które określa widoczną dla użytkownika zawartość. Na końcu dokumentu można znaleźć </body> i </html>. Oznaczają one zakończenie opisów wspomnianych elementów. Pozostałe znaczniki pozwalają tworzyć nagłówki, paragrafy, osadzać obrazki, wykresy, filmy oraz inne media.

Język HTML cały czas się rozwija. Od 1991, kiedy wydano go po raz pierwszy, przeszedł on wiele istotnych zmian i aktualizacji. Aktualnie najnowszą wersją jest HTML5, używany od 2014 roku. Posiada on takie funkcje, jak przechowywanie mediów offline czy więcej elementów pozwalających tworzyć stronę.

Formatowanie stylu z pomocą CSS

Cascading Style Sheets (w skrócie CSS) to język umożliwiający tworzenie stylów formatowania. Odpowiada on za wygląd, układ oraz responsywność strony. Opisy CSS wchodzą w interakcję z HTML. Dzieje się to z pomocą selektorów. Określają one, które elementy HTML będą modyfikowane przez daną funkcję CSS. Do najważniejszych elementów stylów należą:

  • rozmiar czcionki,
  • kolor czcionki,
  • marginesy,

oraz wiele innych elementów formatowania tekstów czy nagłówków.

Jak kod CSS jest implementowany do HTML?

Istnieją trzy sposoby takiej implementacji. Wybór odpowiedniej metody uzależniony jest od danej sytuacji i potrzeb. Kod CSS może znajdować się w zewnętrznych arkuszach stylów jako osobne pliki. W takim rozwiązaniu raz zdefiniowany styl może być użyty wielokrotnie w różnych dokumentach HTML, co znacząco ułatwia pracę przy bardzo dużych projektach. Instrukcje CSS można również umieścić w nagłówku danej strony w pliku HTML. Wtedy obowiązują one na tej jednej stronie i także mogą być wykorzystywane wielokrotnie. W końcu instrukcję CSS można zapisać bezpośrednio w kodzie HTML, jeśli jest to formatowanie lokalne, użyte tylko w pojedynczym przypadku.

Stosując wszystkie trzy sposoby, można zadbać o odpowiedni porządek kodu, dzięki czemu wprowadzanie zmian będzie dużo łatwiejsze w przyszłości. Dbanie o przejrzystość kodu pozwala także uniknąć poważnych problemów przy zmianie pojedynczych parametrów stylów.

Frameworki CSS

Frameworki to gotowe zestawy plików CSS oraz HTML. Pozwalają one znacznie przyśpieszyć pracę programisty, ponieważ nie musi on wypisywać standardowych stylów oraz elementów strony, a jedynie edytuje te parametry, które mają w danym przypadku znaczenie. Istnieją w pełni funkcjonalne i rozbudowane frameworki jak Bootstrap, Semantic UI, nieco uboższe, służące do material design – materialize and material design lite, a także zupełnie oznaczone jako Pure.

Preprocesory

Pisanie instrukcji CSS można w dużym stopniu zautomatyzować dzięki preprocesorom. Zajmują się one między innymi sprawdzaniem wartości kolorów czy zamykaniem tagów. Ułatwiają także powtarzanie pewnych operacji w różnych miejscach dokumentu CSS. Na końcu pracy preprocesor kompiluje się do zwykłego kodu CSS i może być używany w standardowy sposób. Najbardziej znanymi przykładami takich programów są Sass oraz LESS.

Struktura strony internetowej

DOM to obiektowy model dokumentu, służący jako interfejs oprogramowania dla dokumentów HTML oraz XML. Dzięki temu programy mogą interpretować poszczególne elementy strony i modyfikować ich styl. Taka struktura dokumentu pozwala na jego łatwe zmiany z pomocą języków skryptowych, spośród których najbardziej rozpoznawalny jest JavaScript.

Więcej interaktywności

Języki skryptowe umożliwiają wprowadzenie na stronę znacznie więcej życia i interakcji z użytkownikiem. W ten sposób wspiera zarówno frontend, jak i backend. W tym przypadku jednak interesuje nas użycie tego narzędzia w tym pierwszym obszarze. Dzięki JavaScript można stworzyć animowane elementy interfejsu jak slidery czy wyskakujące okienka. Dodatkowo pozwala użytkownikowi dokonywać wyborów i wprowadzać je na stronie bez konieczności ponownego ładowania całego portalu.

Podobnie jak w przypadku CSS i HTML, także w przypadku języków skryptowych do dyspozycji programisty pozostają szablony z najczęściej wykorzystywanymi funkcjami. W tym przypadku nazywane są one frameworkami. Istnieją również wstępnie napisane fragmenty kodu, które znacząco przyśpieszają prace nad frontend development. Przykładowymi frameworkami są Angular, Vue.Js czy Ember.Js. Natomiast bibliotekami wspomagającymi tworzenie kodu są React, JQuery oraz D3.Js. Są to najbardziej rozpoznawalne przykłady.

Łączenie frontendu i backendu

Skupialiśmy się w tym artykule na backend development, jednak nie może on istnieć bez backend developmentu. Potrzebne są zatem także narzędzia do komunikacji pomiędzy tymi obszarami. Kilkanaście lat temu przeważało podejście asynchroniczne. Pozwala ona na odświeżanie tylko tej części strony, która wymaga zmian (na przykład dodanie nowego filtru na liście produktów nie powoduje przeładowania całej strony, ale tylko samej listy produktów). Kiedyś pomocny w tym zakresie był XML, choć później wykorzystywany był głównie JSON. Aktualnie wykorzystuje się  REST oraz GraphQL.

Napisz do nas

Masz pytanie?

Napisz do nas

Pole jest błędnie wypełnione. Sprawdź wpisaną treść i spróbuj ponownie.
Pole jest błędnie wypełnione. Sprawdź wpisaną treść i spróbuj ponownie.
Pole jest błędnie wypełnione. Sprawdź wpisaną treść i spróbuj ponownie.
Pole jest błędnie wypełnione. Sprawdź wpisaną treść i spróbuj ponownie.
Wyrażenie zgody jest niezbędne.

PDF, DOC, DOCX, JPG lub PNG (max 5MB)

Przynajmniej jedno pole jest błędnie wypełnione. Sprawdź wpisaną treść i spróbuj ponownie.
Andrzej Szylar

Andrzej Szylar

Chief Executive Officer

Magdalena Paczynska

Magdalena Paczyńska

HR Manager

Angelika Siczek

Angelika Siczek

PR & Marketing Specialist