Artykuł jest uzupełnieniem ostatnio wydanego kursu na temat frameworka VUE. W artykule zebrałem najpopularniejsze frameworki JavaScript i porównałem je względem VUE. Dowiedz się na co postawić w rozwoju twojej kariery front-end developera i czy Vue rozwiąże twoje problemy.
REACT
React i Vue mają ze sobą bardzo dużo wspólnego. Obydwa rozwiązania:
- wykorzystują wirutalny DOM
- dostarczają reaktywnych i dających skomponować się w całość komponentów widoku
- swoje główne funkcjonalność posiadają w bibliotece core podczas gdy dodatkowe funkcjonalności takie jak routing czy zarządzanie stanem przechowywane są w oddzielnych które można dociągnąć jeśli chce się z nich korzystać.Z racji, że mają naprawdę dużo wspólnego to pewnie to porównanie będzie najdłuższe ze wszystkich.
Wydajność
Jeśli chodzi o wydajność to React i Vue mają podobne czasy więc prędkość nie będzie tutaj raczej znaczącym czynnikiem. W React’cie jednak kiedy stan komponentu ulega zmianie to komponent jest renderowany ponownie wraz ze wszystkimi swoimi elementami potomnymi. Jeśli chciałbyś uniknąć takiego niepotrzebnego renderowania to musiałbyś skorzystać z PureComponent albo zaimplementować shouldComponentUpdate gdzie tylko się da. Możesz również skorzystać z jakichś niezmienialnych struktur danych co zapewni Ci, że aktualizacje stanu twojego komponentu będą bardziej zoptymalizowane. Jednakże w pewnych przypadkach nie możesz polegać również i na takich ulepszeniach z racji na fakt, że PureComponent / shouldComponentUpdate zakłada iż całe drzewo komponentów potomnych a właściwie to co jest wyjściowo z niego renderowane, zależy od props’ów przekazanych do obecnego komponentu. Jeśli tak nie jest to taka optymalizacja może prowadzić do niespójności w DOM.
W Vue zależności komponentów są automatycznie śledzone podczas renderowania więc system dokładnie wie kiedy komponent rzeczywiście potrzebuje ponownego wyrenderowania podczas zmiany swojego stanu. Możesz więc uznać, że wygląda to tak jakby każdy komponent miał już zaimplementowane shouldComponentUpdate bez twojego nakładu pracy i bez niepotrzebnych obejść w przypadku elementów potomnych. Dzięki takiemu rozwiązaniu to Vue przejmuje z rąk programisty kwestie optymalizacji, tak żeby zapewnić ją jak najlepszą a samemu programiście pozwala skupić się na tworzeniu.
HTML & CSS
W React wszystko jest po prostu JavaScriptem. Nie tylko HTML wyrażony przez JSX. Obecne trendy prowadzą również do wrzucania styli jako obiektów. Takie podejścia ma swoje zalety ale wiąże się z wieloma pójściami na kompromis które nie każdemu programiście wydają się warte zachodu.
Vue bierze klasyczne webowe technologie i buduje na nich. Żebyś rzeczywiście zrozumiał co to znaczy rozważmy jakieś przypadki.
Funkcja renderująca z JSX ma kilka zalet:
- Możesz wykorzystać pełnie możliwości JS do budowania swojego widoku. Wliczając w to tymczasowe zmienne, kontrolę przepływu danych i bezpośrednie odwoływanie się do elementów z poziomu JS.
- Wsparcie ze strony narzędzi a więc lintowanie, sprawdzanie typów, autouzupełnianie ze strony IDE itd w bardziej zaawansowany sposób niż w przypadku tego jakie dostarcza Vue. W Vue również jest wsparcie dla funkcji renderujących i JSX ponieważ czasem potrzebujesz takich możliwości. Jednakże domyślnie oferowane są szablony pisane w HTML jako łatwiejsza alternatywa takiego rozwiązania.
Każdy poprawny HTML jest tównież poprawnym szablonem dla Vue i prowadzi to do kilku zalet:
- Dla wielu programistów którzy mieli styczność z HTML, system szablonów jest znacznie bardziej naturalny do czytania i pisania. Takie preferencje mogą wydawać się czymś subiektywnym ale sprawiają, że programista jest bardziej produktywny a to na pewno nie jest już subiektywne.
- Istniejące już aplikację oparte o HTML są znacznie łatwiejsze do migrowania na Vue.
- Sprawia to, że proces uczestniczenia w tworzeniu staje się łatwiejszy dla mniej doświadczonych programistów i projektantów.
- Możesz korzystać z nawet pre procesorów takich jak Pug ( formalnie znany jako Jade ) żeby tworzyć twoje szablony w Vue.
Niektórzy kłócą się nad kwestią że tutaj też trzeba nauczyć się specyficznego syntaksu ale moim zdaniem jest to co najwyżej powierzchowne. Jeśli ktoś korzysta z JSX to wie, że jest to syntaks nałożony na JS. Dla programistów którzy są obeznani z JS na pewno proces nauki będzie szybszy ale nie można powiedzieć, że szybki i super łatwy. W przypadku składni Vue w HTML koszt nauki jest relatywnie niski jeśli ktoś jest zaznajomiony z HTML. Niektóre zadania również mogą wymagać tak na prawdę większej ilości pracy jeśli wykorzystamy czysty JSX czy funkcje
renderującą.
Na wyższym poziomie komponenty można podzielić na dwie grupy: prezentacji i te odpowiedzialne za logikę. Zaleca się ogólnie pisania szablonów dla tych odpowiedzialnych za prezentację natomiast dla tych odpowiedzialnych za logikę lepszym wyborem będzie JSX albo funkcja renderująca. Wzajemny procent tych komponentów względem siebie jest zależny od tego jaki typ aplikacji budujesz ale generalnie tych od prezentacji jest znacznie więcej.
CSS na poziomie komponentu
Jeśli nie rozbijasz swoich komponentów na wiele plików to CSS w Reactcie jest osadzony w JS. Rodzi to nowy sposób na tworzenie CSS zorientowanego na komponent a proces ten różni się od tradycyjnego wytwarzania. Dodatkowo, pomimo że istnieje wsparcie dla procesu wyodrębnienia CSS do pojedynczego bundla w czasie budowanie to dalej często jest tak, że podczas uruchomienia bundle’a ten jest zaciągany osobnym wywołaniem żeby stylowanie działało prawidłowo. Więc ostatecznie wygląda to tak, że zyskujesz jeśli chodzi o dynamikę styli w oparciu o JS przy ich tworzeniu ale tracisz na wielkości bundla i koszcie w postaci dłuższego czasu wykonania.
Sporą różnicą tutaj jest to, że w Vue domyślnie wspieranym sposobem stylowania jest umieszczenie styli w tagu <style> kiedy tworzymy jedno-plikowe komponenty, Pozwala to na dostęp do pełnego CSS w tym samym pliku gdzie znajduje się reszta kody twojego komponentu.
Opcjonalny atrybut scoped sprawia że CSS który się tutaj znajduje zostanie zaaplikowany wyłącznie do twojego komponentu podczas dodanie jakieś unikalnego atrybutu podczas
kompilowania.
I ostatecznie stylowanie w Vue w oparciu o wzór całego komponentu w jednym pliku sprawia, że jest to znacznie bardziej elastyczny proces. Przez vue-loader możesz korzystać z dowolnego preprocesora, post procesora i nawet integracji z modułami CSS – wszystko wewnątrz tagu <style>.
Skalowanie
Dla wielkich aplikacji zarówno React jak i Vue dostarczają system routingu. Społeczność która zebrała się wokół Reacta btła bardzo innowacyjna jeśli chodzi o zarządzanie stanem – Redux /
Flux. Taki wzorzec zarządzania stanem może zostać bardzo łatwo zaaplikowany do Vue, nawet sam Redux bez żadnych konkretnych zmian. W zasadzie w Vue został zaimplementowany właśnie taki wzorzec w postaci Vuex przy czym niektórzy twierdzą, że zapewnia on lepsze doświadczenie dla programistów.
Inną dość ważną różnicą pomiędzy tymi dodatkowymi bibliotekami dla zarządzania stanem i routingu jest fakt, że w przypadku Vue są one aktualizowane wraz z biblioteką core’ową. React natomiast pozostawia te kwestie społeczności tworząc bardziej zdefragmentowany system. Będąc jednak bardziej popularnym ekosyetem Reacta jest znacznie bardziej rozbudowany niż w Vue.
Vue oferuje generator projektu w CLI co sprawia, że wystartowanie z nowym projektem staje się trywialnie łatwe, uwzględniając przy tym, że masz do wyboru Browserify, Webpacka czy nawet opcje nie wybierania żadnego tego typu systemu. React również ma podobne rozwiązanie w postaci create-react-app które niestety ma pewne ograniczenia:
- nie pozwala na żadne zmiany ustawień podczas tworzenia projektu
- oferuje tylko jeden szablon zakładając, że będzie tworzył Single Page Application podczas gdy Vue dostarcza możliwość wielu zdefiniowanych dla użytkownika szablonów
- nie może generować projektów z przygotowanych przez użytkownika szablonów co jest użyteczne zwłaszcza w bardziej korporacyjnym środowisku gdzie istnieją pewne wcześniej
zdefiniowane konwencje
Ważnym jest oczywiście zauważenie, że niektóre z tych ograniczeń zostały stworzone celowo podczas implementacji przez zespól odpowiedzialny za create-react-app.
React ma dość stromą krzywą uczenia się. Żeby zacząć musisz coś wiedzieć o JSX i ES2015 z racji, że większość przykładów w React korzysta z klas. Będziesz musiał nauczyć się też czegoś o jakimś systemie budowania z racji, że o ile technicznie rzecz biorąc możesz korzystać z Babel Standalone to kompilowania swoich zmian na żywo i deweloperki to nie jest to absolutnie zalecane podejście w przypadku produkcji.
Vue ma znacznie niższy próg wejścia. Niektórzy twierdzą, że porównywalny z jQuery. Żeby zacząć wystarczy wkleić odpowiedni link i nie trzeba się już niczym przejmować – można zacząć tworzyć. Oczywiście na początku, później jak najbardziej sprawa wydajności czy architektury twojego projektu powinna leżeć Ci na sercu.
Natywne renderowanie
React Native pozwala Ci na pisanie aplikacji na iOS i Androida które będą się tam natywnie renderowały jakbyś napisał je w Swifcie czy Kotlinie. Przy tym wykorzystywana jest dokładnie taka
sama składnia i konwencje jak w przypadku Reacta. Dzięki temu swoją wiedzę jeśli chodzi o Reacta można przenieść na wiele platform co jest na pewno super sprawą dla programisty. W tym temacie zespół odpowiedzialny za Vue.js oficjalnie rozmawia i wspiera projekt Weex. Wieloplatformowy framework do tworzenie UI stworzony przez Alibaba Group i wchłonięty przez Apache Software Fundation. Weex pozwala na wykorzystanie takiej samej składni z Vue do tworzenia swoich własnych komponentów które mogą być renderowane nie tylko w przeglądarce ale również natywnie na iOS i Android.
W tej chwili Weex jest w fazie silnego rozwoju i oczywiście nie może jeszcze konkurować z dużo lepiej zaprawionym w bojach, przetestowanym i z większym community, Reactem Native.
Vue możesz jednak wykorzystać z NativeScriptem.
ANGULAR.JS
Niektóre elementy składni w Vue wyglądają bardzo podobnie do AngularJS ( jak chociażby v-if oraz ng-if ). Jest tak ponieważ jak wypowiada się sam zespół odpowiedzialny za Vue, AngularJS miał sporo rzeczy zaimplementowanych jak najbardziej poprawnie i był inspiracją dla Vue we wczesnej fazie jego rozwoju. Jest jednak wiele różnych bolączek które przychodzą z AngularJSem i Vue stara się je poprawić.
Złożoność
Vue jest znacznie prostsze niż AngularJS, zarówno w kwestii API jak i zaprojektowania. Nauczenie się wystarczającej ilości rzeczy, żeby napisać nietrywialną aplikację zazwyczaj zajmuje mniej niż dzień w przypadku Vue podczas gdy nie można powiedzieć czegoś podobnego o AngularJS
Elastyczność i modułowość
AngularJS dosyć mocno określa jak twoja aplikacja powinna wyglądać jeśli chodzi o jej strukturę podczas gdy Vue jest bardziej elastycznym i modułowym rozwiązaniem. Podczas gdy czyni to z niego rozwiązanie lepiej dostosowujące się do większej ilości projektów to jego projektanci postanowili również, że czasem lepiej jest podjąć decyzję za programistę żeby ten mógł skupić się na pracy ale w każdej chwili mógł to zmienić.
To dlatego postawienie projektu z szablonu webpacka zajmuje w Vue kilka chwil ale daje również możliwość późniejszego skonfigurowania sobie takich rzeczy jak ładowanie modułów na bieżąco, lintowanie, wyodrębnianie CSS i wiele więcej.
Podstawianie danych
AngularJS wykorzystuje bindowanie w dwie strony pomiędzy zakresami gdy Vue zmusza to jednostronnego przepływu danych pomiędzy komponentami. Sprawia to, że przepływ danych staje się znacznie prostszy do zrozumienia w bardziej skomplikowanych aplikacjach.
Dyrektywy vs komponenty
Vue ma również bardziej widoczną granicę pomiędzy dyrektywami a komponentami. Dyrektywy oznaczają jakieś określone manipulacje na DOM a komponenty są natomiast zamkniętym w sobie DOMem z całą swoją funkcjonalnością. W AngularJS dyrektywy robią wszystko a komponenty są specjalną formą dyrektyw.
Wydajność
Vue pod względem wydajności bije AngularJS na głowę. Wszystko za sprawą tego, że jest łatwiejsze do optymalizacji i znacznie inteligentniej przeprowadza sprawdzanie i ponowne renderowanie zmienionego DOM. AngularJS jest wolny z racji na fakt posiadania wielu obserwatorów które muszą zostać ponownie wykonane gdy jakieś dane ulegną zmianie.
ANGULAR
Dla Angulara w wersji >= 2.x oficjalnie nazywanego Angularem ( po prostu) jest osobne porównanie ponieważ są to tak diametralnie różne frameworki w porównaniu do swojego
poprzednika, że niesprawiedliwym byłoby nie wzięcie tego pod uwagę.
TypeScript
Angular najzwyczajniej wymaga TypeScripta, dostarczając wszystkie przykłady i materiały do nauki w TS. Ma to swoje zalety tak jak oczywiście statyczny system kontroli typów który może być naprawdę użyteczny jeśli chodzi o te większe aplikacje oraz może być sporym kopem jeśli chodzi o produktywność programistów którzy przechodzą na niego z Javy czy C#.
Jednakże nie każdy chce korzystać z TS. W wielu przypadkach mniejszych aplikacji, wprowadzanie systemu typów może skutkować lekkim przygnieceniem produktywności. W takich przypadkach lepiej skorzystać z Vue z racji, że Angular bez TS może być dosyć sporym wyzwaniem. Oczywiście nie tak bardzo jak Angular ale Vue również może zostać powiązane z TS, ma również swoje gotowe typy i oficjalny dekorator. Jego zespól aktywnie pracuje z zespołami odpowiedzialnymi za TS i VSCode w Microsofcie żeby poprawić wrażenia programistów korzystających z Vue.
Wydajność
Obydwa frameworki są bardzo szybkie z pewnymi, niewielkimi zmianami w tabelkach podczas benchmarków co raczej nie powinno wpływać na osąd.
Rozmiar
Obecna wersja Angular z kompliacją AOT i tree-shakingiem może spowodować, że rozmiar znacząco spadnie. Ale większy projekt w Vue jest i tak 2x mniejszy od tego wykonanego w Angularze nawet pomimo faktu wykorzystania AOT i projektu wygenerowanego przy użyciu CLI.
Elastyczność
Vue znacznie mniej Ci narzuca niż Angular, oferując szereg wsparcia dla różnych systemów budowania bez narzucania Ci tego jak powinna wyglądać struktura aplikacji. Wielu programistów cieszy taka swoboda podczas gdy inni wolą mieć jasno określoną ścieżkę jak powinna być zbudowana aplikacja.
Krzywa uczenia się
Wszystko czego potrzebujesz żeby zacząć z Vue jest znajomość HTML i ES5 chociaż oczywiście w tych czasach powinna to już być ES2015+. Z tak podstawowymi zdolnościami możesz zbudować naprawdę bardziej zaawansowaną aplikację w mniej niż dzień czytając oficjalny poradnik / dokumentację.
Krzywa ta w przypadku Angulara wygląda dużo ostrzej. API jest ogromne i zanim użytkownik rzeczywiście się z nim w jakiś sposób oswoi mija trochę czasu. Oczywiście jest też trochę więcej konceptów i praktyk które programista musi poznać, żeby rzeczywiście być produktywnym. Oczywiście taka złożoność Angulara wynika z faktu, że został zaprojektowany z myślą o tworzeniu wielkich aplikacji ale sprawia to, że jest trudniejszy dla niezbyt doświadczonych programistów którzy chcą zacząć z nim swoją przygodę.
POLYMER
Polymer jest kolejnym sponsorowanym przez Google projektem i był sporą inspiracją dla Vue. Komponenty w Vue mogą być luźno porównane do tych które są w Polymerze. Obydwa te frameworki dostarczają bardzo podobnych wrażeń i stylu tworzenia aplikacji. Największą różnicą jest to, że Polymer oparty jest na najnowszej specyfikacji Web Components co sprawia, że
potrzebuje polyfilli żeby działać ( które nie są proste i zmniejszają wydajność ) w przeglądarkach, które nie wspierają natywnie tych funkcjonalności. Vue natomiast działa poprawnie bez żadnych zależności i polyfilli nawet na IE9.
W wersji 1.0 Polymer miał zaimplementowany system podstawiania wartości w bardzo okrojonej formie w celu uzyskania jak najlepszej wydajności. Przykładowo jedyne wyrażenie obsługiwane w szablonach Polymera to była negacja logicznej wartości i pojedyncze wywołanie metody. Implementacji wyliczanych składowych również nie była za specjalnie elastyczna.
Podczas deployowania na produkcje, Polymer rekomenduje podejście ładowania w locie HTML co zakłada implementacje HTTP2 po stronie serwera i klienta. Może to być wykonalne w zależności od naszej grupy docelowej i warunków produkcyjnych. W przypadku kiedy nie będzie to możliwe pozostanie Ci skorzystanie z takiego rozwiązania jak Vulcanizer żeby bundlować HTML. W tym przypadku Vue może za to skorzystać z rzeczywistego podzielenia kodu poprzez jego leniwe ładowanie w oparciu o system modułowy w webpacku. Zapewnia to wsparcie dla starszych przeglądarek przy utrzymaniu naprawdę sporej wydajności.
