Frameworki frontendowe – który wybrać?

Najlepsze frameworki frontendowe

Marek Suśniak | Front-End | 05.01.2022

Narzędziownik programisty frontend to nie tylko języki programowania takie jak JavaScript, HTML, TypeScript czy CSS. Każdy programista, który tworzy „na froncie”, powinien zadbać o stack technologiczny, którego istotną część stanowią biblioteki i frameworki. W artykule skupię się na tych drugich… chociaż nie tylko. Omówię 3 narzędzia z mojej subiektywnej listy i spróbuję odpowiedzieć na pytanie, które wciąż wzbudza wiele emocji: który framework frontendowy jest najlepszy?

Czym są frameworki?

Framework to nic innego jak szkielet aplikacji wraz z pewnymi schematami zachowań, które pozwalają na ich budowę. Głównym celem każdego frameworka jest poprawa efektywności, zapewnienie swoistego rodzaju niezawodności oraz utrzymanie jakości kodu w pewnych narzuconych ryzach. Oczywiście oprócz wymienionych wyżej zalet istnieją też pewne niedogodności, takie jak na przykład złożoność kodu. Przed przystąpieniem do pracy musimy po prostu nauczyć się reguł, które panują w danym środowisku. Często wyzwaniem może być wydajność, ale jest to kwestia doboru odpowiednich narzędzi do rozwiązania, które budujemy.

Sprawdź nasze aktualne oferty pracy dla Front-End Developerów:

Angular

Angular to framework stworzony przez firmę Google. W praktyce jest to kolejna gałąź frameworka AngularJS, opartego na języku JavaScript. Jednak nie należy spodziewać się tutaj uspójnionych koncepcji czy kontynuacji rozwiązań. Językiem, w którym piszemy w Angularze, jest TypeScript. Framework ten wprowadza pełną gamę funkcjonalności, które powinien posiadać każdy szkielet aplikacji. Programiści cenią Angulara przede wszystkim za takie funkcjonalności jak narzucona architektura aplikacji, routing, rozwiązanie wspierające pisanie komponentów, modułowość czy zastosowanie wzorców projektowych.

Istnieją również problemy, które często są zgłaszane przez użytkowników, między innymi: wysoki próg wejścia – zanim zacznie się pisać kod, trzeba przyswoić sporo wiedzy. Zatem wyzwaniem bez wątpienia jest duża złożoność frameworka oraz paradoksalnie związana z narzuconą architekturą mała elastyczność tworzonych aplikacji.

Vue.js

Jest to framework typu open source, zaprojektowany przez szeroką rzeszę specjalistów. Dane autorów możemy znaleźć na stronie: Vue.js proponuje bardzo podobne funkcjonalności co Angular, a jednocześnie można odnieść wrażenie, że jest znacznie prostszym frameworkiem niż jego kuzyn od Google. Próg wejścia jest zdecydowanie niższy, a często możemy napisać prostą aplikację po kilku minutach nauki, znając podstawy HTML, CSS i JavaScript. Z drugiej strony jednak powoduje to, że kod może być zdecydowanie gorszej jakości. Kolejną rzeczą, która w Vue.js, jak i Angularze nie jest doskonałym rozwiązaniem, jest rozbudowanie HTML o dyrektywy, które pozwalają nam programować na poziomie szablonu. W mojej opinii znacznie obniża to czytelność kodu.

React

Zaraz, zaraz – czy należy o nim mówić jak o frameworku? Zdecydowanie nie! Pewnie zastanawiacie się, dlaczego w takim razie w ogóle React znalazł się na tej liście? Przede wszystkim dlatego, że jest to biblioteka, która ma ogromną część funkcjonalności frameworka. Wzbogacona o konkretne biblioteki, powoduje, że ekosystem aplikacji reactowej staje się w pełni działającym frameworkiem. Takie rozwiązanie cechuje się tym, że możemy w swobodny sposób zarządzać kształtem naszej aplikacji, nie pomijając dobrych praktyk, które narzucają te narzędzia. Użycie JSX jako języka szablonów jest dużo bardziej czytelne niż typowy kod HTML. Ponadto w React możemy wszystko uznać za komponenty, co powoduje, że nie tworzymy dodatkowych struktur z większą złożonością. W tym ujęciu okazuje się, że moduły nie są potrzebne, a wprowadzają jedynie dodatkową warstwę deklaracji.

Podsumowując… Który framework jest najlepszy?

Z użyciem Angulara można często spotkać się w projektach, w których wymagany jest duży poziom zaufania do narzędzia oraz istnieje konkretna specyfikacja, jak np. w projektach bankowych. W mojej ocenie Vue.js jest najmniej trafnym wyborem spośród wymienionych narzędzi, ponieważ nie wprowadza żadnej rewolucyjności, a sam w sobie miesza mnóstwo warstw w jednym miejscu.

Istnieje mnóstwo rodzajów frameworków frontendowych. Wymienione wyżej są najczęściej używane w ujęciu komercyjnym. W mojej opinii najbardziej przyjaznym oraz najszybszym jest React. Pozwala on na szybkie pisanie kodu bez dodatkowych konfiguracji.

Pamiętajcie jednak, że najważniejsze w budowaniu aplikacji, a tym samym przy wyborze frameworków, jest określenie tego, czego potrzebujemy. Opinie na temat frameworków są subiektywne i często zależne od poziomu wiedzy o nich. Jedno moim zdaniem jest pewne: nie istnieje coś takiego jak „najlepszy framework”, ale na pewno można wskazać „najlepszy framework pod kątem konkretnego rozwiązania”. Który? Niech zdecyduje o tym zespół developerów, którzy będą pisali aplikację.

Wstęp do front-endu — słowniczek

Czym jest front-end?

Zaczni­jmy od pod­stawy pod­staw, czyli rozróżnienia front-endu od back-endu :) Chy­ba najproś­ciej powiedzieć, że front-end to wszys­tko, co widzi użytkown­ik i z czego korzys­ta przeglą­dar­ka, pod­czas gdy back-end to warst­wa ser­werowa aplikacji (a więc zapis, obrób­ka danych, więk­szość logi­ki biz­ne­sowej). I jeśli chodzi o konkretne przykłady takich warstw, to moż­na śmi­ało zauważyć ten­denc­je do ich rozdziela­nia od siebie. Patrząc nawet z per­spek­ty­wy tech­nologii javowych, jeszcze kil­ka lat temu aplikac­ja webowa “all-in‑1” z uży­ciem JSP czy JSF jako warsty widoku, była częs­to wybier­anym rozwiazaniem, tak ter­az, o wiele więcej aplikacji jest tak naprawdę, nie jed­ną, a dwoma (kilko­ma) różny­mi aplikac­ja­mi, gdzie front-end stanowi odręb­ny projekt/odrębną aplikację. Taki pro­jekt komu­niku­je się z back-endem za pomocą RESTowego API (i w taki sposób będziemy właśnie imple­men­tować nasze rozwiązanie). Front-end to nie tylko “wyświ­et­lanie wyników” z back-endu, ale też odpowied­nie pro­jek­towanie inter­fe­j­su i doświad­czeń użytkown­i­ka (a więc UI/UX), a także biz­ne­sowe wyma­gania jak np. wal­i­dac­je, fil­trowanie, wyszuki­wanie (część z tych zachowań będzie obsługi­wana (lub dodatkowo obsługi­wana) w warst­wie front-endowej naszej aplikacji. W zależnoś­ci od firmy, czy pro­jek­tu obow­iąz­ki pro­gramisty front-endowego będą różne, albo zami­ast szty­wnego podzi­ału na back-end czy front-end, będziesz po pros­tu zatrud­niony na stanowisku full-stack devel­op­er (moż­na dostrzec, że obec­nie przy­by­wa takich właśnie stanowisk).

Poz­wolę sobie tutaj na małe wtrące­nie do początku­ją­cych widzą­cych to ostat­nie zdanie — jeśli dopiero zaczy­na­cie naukę pro­gramowa­nia, zde­cy­dowanie radz­imy Wam skupi­e­nie się na jed­nej z tych dwóch wartstw. To znacznie ułatwi Wam naukę, przyśpieszy pro­ces do znalezienia pier­wszej pra­cy, a potem naucze­nie się “tego drugiego” z doświad­cze­niem np. w back­endzie, powin­no być znacznie łatwiejsze. Dlat­ego, w naszym pod­sta­wowym kur­sie javy zobaczy­cie, że warst­wa wiz­ual­na jest opra­cow­ana za pomocą JSP — głown­ie po to, by “była możli­wa”, a z drugiej strony nie utrud­ni­ała (nie dok­ladała za dużo nowych infor­ma­cji). Na start, sam back-end, czy sam front-end jest naprawdę ok.

„To po prostu przeciągnij i upuść” – obalamy mit nr 1 dotyczący rozwoju programowania front-end

Wierzymy, że programista Front-end ma świetlaną przyszłość i że jest poszukiwany na rynku pracy z jakiegoś konkretnego powodu. Wyjaśniamy kilka alternatywnych faktów wokół tej specjalizacji i wyjaśniamy, dlaczego naszym zdaniem, warto nauczyć się programowania front-end.

Programiści front-end to ci, którzy jako pierwsi otrzymują pochwałę od firmy, jeśli aplikacja świetnie wygląda, działa i ładuje się od razu. Ostatecznie przedstawiając gotową aplikację przed użytkownikami, często to oni są w centrum uwagi, co już sprawia, że ta rola jest naprawdę atrakcyjna. Wraz z rozwojem branży internetowej, w ciągu ostatnich pięciu lat programowanie frontendowe stało się bardzo popularne, z dużą ilością ogłoszeń o pracę i naprawdę niezłymi pensjami.

Jednak nie wszyscy są z tego powodu równie zadowoleni. Słyszałeś kiedyś, jak inni programiści mówili, że programowanie front-end musi być tak łatwe, że chodzi tylko o przeciąganie niektórych elementów interfejsu użytkownika? Kilka przycisków tutaj, trochę wyskakujących okienek i animacji tam, a potem po prostu zastosuj całość na telefonie komórkowym, aby zakończyć. Cóż, jeśli to prawda, a profesjonaliści front-end mają tak łatwą pracę, to dlaczego jest tak duże ich zapotrzebowanie na rynku? Brzmi przynajmniej podejrzanie, prawda?

Rozwój front-endu to jeden z tych obszarów w IT, wokół którego istnieją pewne mity. Wymienimy niektóre z nich, aby spróbować wyjaśnić, dlaczego tak bardzo są potrzebni programiści front-end i jaka jest rzeczywistość. Uwaga spoiler: bywa wręcz przeciwnie niż mówią!

Przyjrzymy się również, jak możesz zostać programistą Front-end, jeśli już jesteś zainteresowany nauką tego ekscytującego zawodu.

Ale przede wszystkim zobaczmy, czym właściwie jest programowanie front-end!

Jarosław Kułak
Jarosław Kułak

Leave a Comment