Frameworki frontendowe - zestawienie najlepszych opcji dla projektów webowych

Tak jak kiedyś powstawały narzędzia do obróbki materiałów i budowania schronień, tak dzisiaj programiści tworzą dla siebie narzędzia do wydajniejszej pracy. Urosło to jednak do tego stopnia, że wśród frontendowców zaczęły powstawać żarty na temat kolejnych frameworków. Po co jest ich aż tyle? Czym różnią się od bibliotek JavaScripta? Czym są frameworki i dlaczego programiści tak bardzo chcą pisać w nich swoje projekty? Na te pytania i kilka innych odpowiemy za moment, ale po kolei…

Framework a biblioteka

Biblioteką w programowaniu nazywamy zbiór funkcji, metod czy po prostu kodu, napisanego już wcześniej, który ułatwia poradzenie sobie z jakimś programistycznym problemem. Biblioteka może skupiać się na konkretnym zagadnieniu lub dostarczać ogólne rozwiązanie dla szerszego zbioru zagadnień. Analogią do naszego świata może być np. karta wzorów, którą maturzyści wykorzystują podczas swojego egzaminu dojrzałości. Oferuje ona sprawdzone rozwiązania na dane problemy, więc uczniowie mogą łatwiej je rozwiązać.

Framework jest również narzędziem, które ułatwia programistom pracę przy tworzeniu kolejnych projektów, ale ma bardziej narzucony sposób, w jaki można skorzystać z dostarczanego przez niego kodu. Wymusza na deweloperach pracę w określony sposób. Zachowanie to jest nazywane Inversion of control, gdzie to framework wywołuje kod napisany przez programistę, a nie, jak to jest w przypadku biblioteki, programista korzysta z dostarczanych rozwiązań.

Chociaż framework i biblioteka różnią się od siebie, pojęcia te są niejednokrotnie używane wymiennie wśród programistów. Dlatego w tym tekście omówimy też dwa przykłady bibliotek.

Wiemy już czym są frameworki, jednak we frontendzie możemy je jeszcze pogrupować na:

• frameworki UI (pomagają tworzyć warstwę wizualną - CSS),
• frameworki JS (ułatwiają tworzenie skryptów wywoływanych po stronie klienta - w przeglądarce użytkownika).

Źródło: npm trends

Frameworki UI

Stworzenie aplikacji, która składa się z wielu komponentów, formularzy oraz widoków może być naprawdę czasochłonne. Każdemu z wyżej wymienionych elementów trzeba przecież nadać odpowiednie style. W tym momencie przychodzą nam z pomocą frameworki, które skupiają się na udekorowaniu naszego interfejsu użytkownika.

Bootstrap

Jest to najpopularniejszy framework do tworzenia graficznych interfejsów na stronach internetowych, stworzony w 2011 roku przez programistów Twittera. Bootstrap dostarcza szereg gotowych komponentów, które można od razu wykorzystać na swojej witrynie, jak również pozwala na ich dostosowanie do indywidualnych potrzeb. Zarówno najnowsza wersja frameworku - 5.2 - jak i poprzednie wydania są szeroko implementowane w różnych systemach i CMS-ach. Bootstrapa można znaleźć w skórkach wordpressowych, jest również łatwy do zintegrowania z Drupalem.

Frameworki frontendowe, takie jak Bootstrap, pozwalają nam znacznie szybciej tworzyć wizualną wersję naszej witryny, przez wykorzystanie istniejących już elementów, m.in. przycisków, karuzel oraz bannerów. Zespół nie musi tworzyć ich od nowa. Oszczędzamy więc czas przy tworzeniu projektu, implementując dany schemat tworzenia kolejnych stron. Dlatego łatwiej jest taką stronę utrzymywać, a nowe osoby mogą się szybciej zapoznać z projektem, dzięki ujednoliconej strukturze komponentów czy rozbudowanej dokumentacji. Istnieje również spora szansa, ze względu na popularność Bootstrapa, że programiści mogli już wcześniej wykorzystywać ten framework w swojej pracy.

Przykłady list rozwijanych dostarczanych przez Bootstrapa.

Minusem korzystania z tego typu rozwiązań może być wynikowy duży plik CSS, który negatywnie wpłynie na szybkość ładowania naszej witryny, choć i na to frameworki oferują rozwiązanie, pozwalając na importowanie tylko tych rzeczy, które są używane na danej stronie.

Podobnymi frameworkami, oferującymi gotowe elementy, są Bulma CSS, Semantic UI oraz Foundation Framework.

Jednak gotowe komponenty to nie jedyny sposób na ułatwienie życia frontend deweloperów.

Utility frameworks i Tailwind CSS

Utility framework dostarcza przygotowane już wielkości fontów, kolory tekstów oraz tła dla spacingów i innych elementów. Frontend deweloper ma zatem większość właściwości stylujących już odpowiednio zadeklarowaną, a jedyne co musi zrobić to wykorzystać je w swoich komponentach. Takie rozwiązania pozwalają na ograniczenie pisania własnych styli do minimum, jak również ograniczenie wynikowego pliku CSS do niezbędnego minimum.

Najpopularniejszy z utility frameworków - Tailwind CSS - analizuje wykorzystane klasy w strukturze HTML i na ich podstawie kompiluje style, które będą załączone na stronie.

Utility frameworki mają swoich zwolenników, ale i zagorzałych przeciwników, twierdzących, że pliki HTML stają się mniej czytelne przez natłok klas CSS, jak i fakt, że piszemy klasy HTML, które wyglądają niemal tak samo, jak reguły opisujące, stosowane w CSSie.

Źródło: Why I choose Tailwind CSS

Frameworki JS

Każdego dnia powstaje nowy framework JavaScript. Jak zatem wybrać odpowiedni? Obecnie topowymi rozwiązaniami są React, Vue i Angular. Niezmiennie od kilku lat występują na czele rankingów narzędzi frontendowych i choć wszystkie z nich służa do budowy reaktywnych interfejsów użytkownika, w niektórych aspektach się różnią.

React.js

Biblioteka stworzona przez Facebooka (obecnie Meta) w 2013 roku jest aktualnie najpopularniejszym narzędziem frontendowym z 17 milionami tygodniowych pobrań z serwisu npm. React zyskał popularność przez innowacyjne podejście do tworzenia landing page’y oraz Single Page Application (SPA).

Ten framework umożliwia programistom pisanie deklaratywnego kodu, a więc takiego, który określa, co dany deweloper chce stworzyć, a nie - tak jak to było wcześniej - opisuje krok po kroku, jak coś ma być tworzone (podejście imperatywne).

Cały mechanizm wyświetlania i aktualizowania HTML-a React wykonuje “pod maską” naszej przeglądarki, wykorzystując Virtual DOM. VDOM to mechanizm, który pozwala zoptymalizować kosztowne operacje, które są wykonywane na elementach w strukturze strony. Zamiast każdorazowo odwoływać się do elementów w różnej części witryny, VDOM tworzy kopię obecnego obiektowego modelu dokumentu (DOM) i właśnie wtedy zmiany są dokonywane na wybranych elementach i tylko te elementy są podmieniane z VDOM do DOM. Taki zabieg pozwoli poprawia wydajność strony, a więc oszczędza zarówno czas jak i zasoby komputera.

React wykorzystuje JSX, czyli rozszerzenie do JavaScriptu, które oferuje podobną do HTML-a składnię, pozwalającą na dynamiczne tworzenie komponentów na stronie. Same komponenty mogą być wielokrotnie ponownie używane, a także posiadają swój stan, którego zmiana pozwala na dynamiczną aktualizację naszego interfejsu.

Źródło: Reactjs.org

React ma swój własny ekosystem, w którym możemy znaleźć oddzielne biblioteki i frameworki napisane specjalnie pod niego, które jeszcze bardziej poszerzają funkcjonalność tego narzędzia. Jeśli chcemy stworzyć coś więcej niż Single Page Application i potrzebujemy różnych ścieżek, możemy wykorzystać React Router. Do tworzenia statycznych stron możemy użyć GatsbyJS. Natomiast gdy nasz serwis ma renderować się po stronie serwera, z pomocą przyjdzie nam Next.js.

Vue.js

Kolejnym z frameworkowych gigantów jest Vue.js, stworzony przez byłego pracownika Google, Evana You, w 2014 roku. Framework został zaprojektowany z wykorzystaniem wzorca architektonicznego Model-View-Controller.

Vue.js dostarcza gotowe rozwiązania na różne potrzeby, więc bez doinstalowywania dodatkowych paczek kodu możemy:

• stworzyć Single Page Application,
• dorzucić nasze dynamiczne komponenty do statycznej strony,
• stworzyć serwis za pomocą SSG lub SSR.

Ten framework również wykorzystuje składnię JSX, chociaż w inny sposób niż React. Vue umożliwia obranie innej drogi przy tworzeniu komponentów. Strukturę, style oraz skrypty danego komponentu możemy trzymać w jednym pliku, z odpowiednim podziałem na sekcje, tzw. Single File Component.

Angular

Angular został wydany w 2016 roku, choć pierwotnie miał być drugą wersją, stworzonego przez Google, frameworku Angular.js (2010). Finalnie Angular został wypuszczony jako oddzielny projekt. Można uznać go za najstarszego z obecnej “Wielkiej Trójki”, mimo że znacznie różni się od swojego poprzednika.

Angular zasłynął ze swoich funkcjonalności, takich jak: wiązanie dwustronne, wstrzykiwanie zależności czy wbudowane wsparcie dla zapytań Ajax i HTTP. Istotną rzeczą jest również fakt, że wymusza pisanie w TypeScripcie, a nie JavaScripcie. Sam TypeScript to nadzbiór języka JS, oferujący dodatkowe funkcjonalności, jak typowanie zmiennych, które ułatwia wyłapywanie potencjalnych błędów.

Choć jest to niewątpliwie najtrudniejszy z opisywanych frameworków, Angular oferuje ogrom możliwości i można uznać go za naprawdę solidny wybór.

Svelte

Svelte jest ostatnio najprawdopodobniej najszybciej zyskującym na popularności frontendowym narzędziem. Choć ten framework powstał w 2016 roku, jest o nim głośno od 2-3 lat, co potwierdzają ankiety wśród deweloperów. W 2021 roku był najbardziej uwielbianym frameworkiem webowym, a w 2022 roku zajął drugą lokatę. Tę opinię podziela również Apple, który ostatnio przepisał swój serwis muzyczny wykorzystując właśnie Svelte.

Czym więc to rozwiązanie różni się od reszty? Wszystkie procesy, które występują np. w Reaccie lub w Vue, takie jak aktualizowanie Virtual DOM, zostały zastąpione przez krok kompilacji naszego projektu. Podczas kompilacji nie są dołączane żadne pliki biblioteki lub frameworki, gdyż nasz projekt jest kompilowany do zwykłych plików HTML, CSS i JS, wykorzystując natywne funkcje przeglądarki. Oczywiście oprócz mniejszej wagi plików zazwyczaj otrzymamy również lepszą wydajność, niż w przypadku frameworków i bibliotek (które dokonują podmiany elementów za pomocą Virtual DOM), a sama składnia bardzo przypomina tą, spotykaną w Vue.js, z niewielkimi zmianami.

Źródło: Svelte.dev

Na podstawie Svelte powstał framework SvelteKit, który dostarcza wcześniej opisywane rozwiązania dot. routingu czy renderowania po stronie serwera.

Next.js

Tak jak wspomnieliśmy, React cieszy się tak wielkim zainteresowaniem, że zostały do niego napisane różne frameworki. Jeden z nich - Next.js - został stworzony w 2016 roku przez firmę Vercel. Ten framework rozwiązał problem, który był największym minusem Reacta. Nie pozwalał on na tworzenie rozbudowanych serwisów, ze względu na fakt, że całe jego działanie zaczynało się i kończyło na jednej stronie. Obecnie Next.js dostarcza Reactowi wszystko co niezbędne, aby można było tworzyć pełnoprawne serwisy. Next.js oferuje renderowanie po stronie serwera (SSR), generowanie stron statycznych (SSG) oraz połączenie tych dwóch podejść, zwane Incremental Static Regeneration (ISR).

Źródło: Nextjs.org

Twórcy Next.js wyszli naprzeciw powszechnym problemom przy tworzeniu stron. Dlatego ten framework ułatwia pracę w wielu obszarach web developmentu, zaczynając od prostego systemu routingu na podstawie architektury naszego projektu, poprzez możliwość stworzenia własnego API, a na wsparciu dla CSS i TypeScriptu kończąc. Warto też wspomnieć, że od razu dodatkowo dostajemy natywną optymalizację obrazków oraz osobny lighthouse - do pomiarów wydajności witryn opartych właśnie na Next.js. Ten framework ma jednak pewne minusy.

• Wymaga Node.js na serwerze hostingowym.
• Przy większych projektach proces generowania stron statycznych może szybko wzrastać.
• Brakuje w nim menadżera stanu, czyli oprogramowania, które pomoże w sensowny sposób trzymać dane, które wykorzystujemy w aplikacji.

Patrząc jednak na firmy, które zdecydowały się wykorzystać Next.js do swoich stron, możemy być przekonani, że jest to rozwiązanie gotowe, nawet dla najbardziej wymagających projektów. Nie bez powodu tylu światowych gigantów różnych branż postawiło właśnie na to narzędzie.

jQuery

Jest to biblioteka do JavaScriptu, wydana w 2006 roku. Choć obecnie nie jest już tak na topie jak paręnaście lat temu, według portalu BuildWith w 2019 roku była wykorzystywana przez 80% z 1 miliona najpopularniejszych stron internetowych.

W swoich najlepszych latach jQuery było tak popularne, że deweloperzy często nie chcieli prowadzić swoich projektów bez tego narzędzia. Można było je także znaleźć w gotowych rozwiązaniach, takich jak Bootstrap (od wersji 5 wykorzystanie jQuery zostało porzucone) i CMS-y (Drupal oraz WordPress).

Tworzenie stron z wykorzystaniem tej biblioteki było swego czasu przełomem. Pozwała ona deweloperom tworzyć serwisy znacznie szybciej, gdyż kilku- lub kilkunasto linijkowe skrypty mogły być zastąpione jedną linijką kodu. Biblioteka umożliwiała również łatwiejszą manipulację DOM, tworzenie zapytań XHR oraz łatwiejszą obsługę wydarzeń, działającą tak samo w różnych przeglądarkach. Ostatni czynnik jest niezwykle ważny, gdyż w momencie wydania tej biblioteki, przeglądarki nie były ustandaryzowane i niejednokrotnie zdarzało się tak, że ten sam kod działał inaczej, w zależności od załączonej przeglądarki.

W 2022 roku jQuery wciąż jest szeroko stosowane w Internecie, ma się dobrze i na pewno nagle nie zniknie w kolejnych latach. Jednak deweloperzy raczej już nie biorą tej biblioteki pod uwagę przy tworzeniu nowych serwisów. Ma ona nawet swoich przeciwników, którzy wskazują:

• imperatywny styl pisania kodu,
• brak potrzeby wykorzystywania jQuery, ze względu na bardzo dobrą implementację JavaScriptu w przeglądarkach,
• słabą możliwość skalowania projektu.

GSAP

Co natomiast w momencie, gdy nasz projekt wymaga skomplikowanych animacji? Czy może nas uratować jakieś narzędzie frontendowe? Odpowiedź brzmi: oczywiście, że tak i to nawet nie jedno! Jednak skupimy się na najpopularniejszym z nich, czyli GSAP-ie.

Ta biblioteka została pierwotnie stworzona do pracy z wykorzystaniem Flasha, ale później została przepisana na JavaScript, co okazało się strzałem w dziesiątkę. Choć twórca GSAP, Jack Doyle, wspominał, że nie było to łatwe zadanie, zdecydowanie było warto, patrząc na popularność tego narzędzia (ponad jedna trzecia bibliotek do animacji to właśnie GSAP).

Rozwiązanie to dostarcza łatwe API do tworzenia różnego rodzaju animacji. Można animować zwykłe elementy na stronie lub te bardziej złożone, np. rozbijając je na czynniki pierwsze.

Powszechnie wykorzystywaną funkcją tej biblioteki są animacje, które dzieją się po scrollowaniu strony. W momencie przewijania możemy stworzyć animację składająca się z wielu etapów, a nawet połączyć dany fragment strony z konkretnym etapem animacji. Zabieg ten pozwala na odtwarzanie animacji i jej cofanie, w zależności od kierunku przewijania strony. Tak zaawansowany efekt deweloperzy mogą osiągnąć za pomocą kilkunastu linijek, oszczędzając sporo godzin, a niejednokrotnie nawet dni, pracy.

GSAP pozwala animować prawie wszystko na naszej stronie, a funkcjonalności można dodatkowo rozszerzać wtyczkami. Przykładowo, wykorzystując rozszerzenie Draw SVG, można wywołać efekt samorysującego się obrazka lub efekt podpisywania się własnym imieniem.

Jak wszystkie inne rozwiązania, GSAP ma też swoje minusy, takie jak bardzo duża waga pliku (prawie 67 kB, co jest całkiem sporo jak na bibliotekę) oraz licencja (jak się okazuję, nie wszystkie funkcje GASP są darmowe). Warto też mieć na uwadzę, że wykonując animacje za pomocą JavaScriptu, a nie CSS, obciążamy główny wątek procesora, co może spowodować problemy z wydajnością pozostałych skryptów na naszej stronie.

Astro

Astro jest frameworkiem do tworzenia szybkich stron internetowych. Oferuje, między innymi, archipelagową strukturę, routing oraz pobieranie danych. Jest on jednak pozbawiony funkcjonalności związanych z UI (User Interface), co oznacza, że możemy go połączyć z innym frameworkiem, który został opisany wyżej, lub ze wszystkimi z nich.

Archipelagowa architektura Astro pozwala na odpowiednie dzielenie strony na sekcje, które będą optymalnie wczytywane, z podziałem strony na statyczną treść i dynamiczne komponenty. Cały zaprojektowany układ domyślnie zostanie wyrenderowany na serwerze, a do klienta nie zostanie przesłany żaden skrypt JS (chyba, że nasze komponenty z nich korzystają).

Takie architektoniczne podejście skupione jest oczywiście na wydajności witryny. Większość strony jest konwertowana do statycznych plików HTML, a reaktywne komponenty są doładowywane niezależnie od siebie, co oznacza, że niektóre elementy naszej strony mogą być już interaktywne, nie czekając na załadowanie dolnej części strony.

Jak wybrać najlepszy framework frontendowy do projektu webowego?

Przy projektowaniu serwisu bądź aplikacji należy postawić sobie kilka pomocniczych pytań, które pozwolą nam wybrać najlepsze rozwiązania.

Czy w naszym projekcie w kwestii UI chcemy skorzystać z gotowych komponentów i modyfikować je pod swoje potrzeby? Jeśli tak, skorzystajmy z rozwiązań dostarczających gotowe komponenty, np. Bootstrapa.

Czy design ma być na tyle skomplikowany, że lepiej będzie stworzyć go od podstaw? W takim przypadku pomocny będzie Tailwind CSS. Jeżeli skomplikowane animacje również wchodzą w grę, nie bójmy się sięgnąć po GSAP-a.

A co ze strukturą aplikacji i jej działaniem? Potrzebujemy po prostu solidnego narzędzia z szerokimi możliwościami rozbudowy jego funkcjonalności? Jeśli tak, wybierzmy Reacta.

Chcemy od razu dostać całą “maszynkę” do robienia aplikacji? Zdecydujmy się na Angulara.

Nie chcemy korzystać z wytworów wielkich korporacji? Możemy sięgnąć po Vue, choć Svelte również jest opcją wartą do rozpatrzenia, ze względu na swoją prostotę, zarówno w postaci pisanego kodu jak i wykorzystanej architektury.

Chociaż nie są to jedyne czynniki, które należy wziąć pod uwagę przy wyborze frontendowego frameworku, ponieważ każdy projekt wymaga osobnej analizy pod kątem danych potrzeb, możemy śmiało zagwarantować, że wykorzystanie któregokolwiek z opisanych w tym artykule rozwiązań (za wyjątkiem jQuery dla nowych projektów) nie będzie nietrafionym wyborem.

Frontend development jest bardzo ważną częścią naszej codziennej pracy w Droptica. Dlatego z łatwością możemy Ci pomóc w wyborze odpowiedniego frameworka do Twojego projektu.