ul. Strzegomska 2-4
53-611 Wrocław
NIP 8992786490
KRS 0000608120
REGON 363987723
Global4Net Sp. z o. o.
+48 71 358 41 00
© 2009 – Global4Net. All Rights Reserved.
Kluczowe technologie dla frontend developera
29.04.2022
Angelika Siczek
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.
