Analiza i porównanie frameworków JavaScript, cz. 1

Damian Kołodziejski

Analiza i porównanie frameworków JavaScript, cz. 1
Wrzesień 1, 2017 Katarzyna Sobczak

Analiza i porównanie frameworków JavaScript, cz. 1

Frameworki JavaScript na dobre zagościły w świecie aplikacji internetowych. Ich ilość rośnie, ale grono developerów podzieliło się na trzy obozy, których uważnie bronią.

W serii artykułów „Analiza i porównanie frameworków JavaScript” przybliżę i omówię trzy najpopularniejsze obecnie frameworki JavaScript. Porównanie to powinno pozwolić twórcom aplikacji opartych o frameworki JavaScript odpowiedzieć sobie na pytanie, który framework najlepiej nadaje się do pracy, którą mają do wykonania.

Vue

Vue.js jest pierwszym frameworkiem, który pragnę przybliżyć. Pierwszą rzeczą, na którą trzeba zwrócić uwagę, jest bardzo dobra dokumentacja projektu. Poza bardzo dobrym opisem aplikacji tworzonej za pomocą tego frameworka, dokumentacja zawiera również poradnik, jak przenieść aplikacje napisane w poprzednich wersjach do wersji najnowszej. Nie jest to coś bardzo powszechnie spotykanego, zwłaszcza dla projektów, za którymi nie stoją duże korporacje. Vue.js zostało stworzone przez jedną osobę – Evana You. Polecam przeczytać ciekawy wywiad z tym człowiekiem, dostępny na portalu Beetween the Wires.

Framework VUE

Framework ten od początku był projektowany z myślą o stworzeniu strony podatnej na interakcje. Dzięki takiemu podejściu może on zostać potraktowany jako biblioteka i zostać zaimportowany na dosłownie każdą stronę istniejącego już projektu, dając tym samym nowe funkcje i możliwości. Vue nie ogranicza się jednak tylko do funkcji biblioteki. Jak na projekt, który zaczynała tworzyć jedna osoba, który wystartowal na portalu Patronite, framework ten udostępnia bardzo dużo użytecznych narzędzi. Do ich zbioru zalicza się między innymi router, paczka do zarządzania stanem aplikacji oraz CLI. Narzędzia te umożliwiają tworzenie dużych i skomplikowanych aplikacji typu Single Page Application. Środowisko deweloperskie, pomimo dostępności dużej liczy konkurencyjnych rozwiązań o zbliżonych właściwościach, szybko polubiło właśnie ten framework. Przyczynił się do tego na pewno fakt, że projekt rozpoczęto w odpowiedzi na wyraźne oczekiwania społeczności (projekt był i nadal jest sponsorowany przez patronów), a zadowalający zbiór funkcji i możliwości oraz szybkość działania sprawiają, że praca z tym frameworkiem jest przyjemna od samego początku. Wraz z ciągle wzrastającą popularnością tego frameworka, coraz więcej deweloperów postanawia kolejne aplikacje pisać w oparciu o to narzędzie. Kolekcję projektów internetowych napisanych w Vue.js można przejrzeć na portalu Made With Vue.js

React

React to najpopularniejszy framework spośród tych, które zostaną przedstawione. Został stworzony przez zespół Facebook, przez który ciągle jest rozwijany. Ciekawostką licencji, na której został wydany ten produkt, jest zapis, że Facebook może cofnąć zezwolenie na wykorzystywanie ich produktu, jeśli na bazie tego frameworka będzie tworzony portal konkurencyjny dla Facebooka.

Framework React

Projekty napisane w Reactcie są w pewien sposób unikalne. Zespół, który pracował nad tym frameworkiem, widząc, że język JavaScript szybciej operuje na obiektach swojego języka niż na elementach drzewa DOM, poszedł o krok dalej niż każdy inny framework. Zamiast przed każdą operacją na dokumencie kompilować fragment dokumentu do obiektu JavaScript, by następnie wykonać na nim operacje i na koniec wyświetlić nowy fragment dokumentu, kompilując na powrót obiekt, twórcy pominęli pierwszy krok, nie odnosząc się do elementów z dokumentu. Umożliwili to sobie korzystając z biblioteki JSX. Umożliwia ona zapisanie elementów HTML jako gotowych elementów JavaScriptu. Kolejnym usprawnieniem, które wprowadził zespół Facebooka w świat projektowania aplikacji webowych, jest tworzenie własnych komponentów, które można ponownie używać, łączyć i zagnieżdżać, nie używając przy tym Shadow DOM. Ciekawostką jest, że React udostępnia oficjalnie rozszerzenie do przeglądarki Chrome, by ułatwić debugowanie i szukanie błędów. Dużym plusem Reacta jest fakt, że po dobrym zaznajomieniu się z frameworkiem istnieje możliwość rozpoczęcia pisania aplikacji na urządzenia działające na systemie Android oraz iOS bez znajomości środowisk Java, Objective C czy Swift. Facebook, WhatsApp, Instagram oraz Netflix to tylko niektóre portale oparte na tym frameworku. Lista przykładów, gdzie wykorzystano to narzędzie, znajduje się na stronie Made With React.

Angular

Framework stworzony i zaprojektowany przez zespół pracujący w firmie Google. Pierwsza wersja została wydana w 2009 roku. W roku 2016 została wydana wersja druga tego projektu. W grudniu tego samego roku została oddana wersja czwarta, pomijając tym samym numer trzeci, co uniknęło zamieszania związanego wówczas z routerem frameworka. Wtedy też powstała idea, że kolejne stabilne wersje tego frameworka będą publikowane co pół roku i od tamtego czasu nie numeruje się wersji Angulara.

Framework Angular

Framework ten został stworzony z myślą o dużych aplikacjach. Widać to od samego początku, gdy CLI dostarczone przez zespół Google, oprócz nadzoru nad relacjami plików i sprawdzania składni, wymusza pracę w środowisku TypeScript i narzuca ramy projektu, takie jak nazewnictwo i katalogowanie plików. Aplikacje pisze się w oparciu o komponenty. Dużą zaletą jest to, że każdy komponent może mieć własne reguły CSS, które nie wychodzą poza dany komponent. Do kontroli przepływu danych są serwisy, które również są bardzo dobrze przemyślane. Największą zaletą są jednak typowane zmienne. Jest to duże ułatwienie dla developerów, którzy poza frontem aplikacji pracują jako programiści środowisk takich jak Java czy C#. Zachęcam do przejrzenia listy projektów, do których framework ten został wykorzystany.

Podsumowanie

W tej części przybliżyłem trzy najpopularniejsze frameworki, w następnych częściach przedstawię różnice między nimi. Porównam cały cykl budowy projektu: od uczenia się frameworku, poprzez budowanie małych i dużych aplikacji oraz wydajność, aż do tworzenia produkcyjnej wersji produktu. Seria wpisów składać się będzie z czterech artykułów. Podczas gdy pierwsza część stanowiła wprowadzenie do frameworków, w częsci drugiej zawrę porównanie dotyczące budowy małych oraz dużych aplikacji internetowych. W części trzeciej omówię wydajność frameworków oraz budowę ich wersji produkcyjnych. Ostatnia część stanowić będzie posumowanie wszystkich artykułów z serii.

Podziel się

Autor: Damian Kołodziejski

Damian Kołodziejski

Damian Kołodziejski

Zespół: Apps

Ostatnie artykuły autora

Analiza i porównanie frameworków JavaScript, cz. 2

Analiza i porównanie frameworków JavaScript, cz. 2

Porównanie ze względu na budowę małych oraz dużych aplikacji internetowych. Druga część serii.

Zmiana wyglądu formularzy

Zmiana wyglądu formularzy

Zmiana wyglądu checkbox, radio, select jest możliwa tylko za pomocą CSS. W artykule pokazuję jak to zrobić.

Tooltip w prostym i efektownym wykonaniu

Tooltip w prostym i efektownym wykonaniu

W tym artykule pokazano, jak wykorzystać niestandardowe atrybuty w elementach HTML, by wyświetlić ładny tooltip. Można utworzyć z niego moduł CSS, który będzie można zaimportować do każdego projektu.

Skontaktuj się z autorem

 

Administratorem danych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. Podane przez Ciebie dane będą przetwarzane w zakresie niezbędnym do podjęcia kontaktu lub realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO przez okres niezbędny dla realizacji Twojego zgłoszenia. Wszelkie informacje w zakresie przetwarzania podanych przez Ciebie w formularzu danych oraz posiadanych uprawnieniach znajdziesz w Polityce prywatności. Kliknij i dowiedz się więcej jeżeli informacje podane powyżej nie są dostatecznie jasne!