Dlaczego przeszedłem z AngularJS na React?

Opublikowany: 2022-03-11

W 2011 roku, kiedy mój kod zaczął się zaśmiecać selektorami jQuery i wywołaniami zwrotnymi, AngularJS stał się ratunkiem, który pomógł w lepszym zarządzaniu, szybkim rozwoju i dużo większej funkcjonalności po wyjęciu z pudełka. Dwukierunkowe wiązanie AngularJS i filozofia „modelu jako pojedynczego źródła prawdy” zaskoczyły mnie i ograniczyły nadmiarowość danych w całej mojej aplikacji.

Z biegiem czasu odkryłem jednak, że AngularJS ma swoje własne bolączki. W końcu wywołały we mnie taką frustrację, że zacząłem rozglądać się za alternatywnymi rozwiązaniami.

Punkty bólu w AngularJS 1.x

  • DOM do egzekucji

    Angular w dużym stopniu polega na DOM w zakresie przepływu wykonania. W domyślnym ładowaniu aplikacji skanuje DOM i kompiluje go z priorytetami dyrektyw, co utrudnia debugowanie i testowanie kolejności wykonywania.

  • Własny wstrzykiwanie zależności

    JavaScript nie posiada własnego menedżera pakietów i mechanizmu rozpoznawania zależności. Ale ostatnio implementacje takie jak AMD, UMD i CommonJS bardzo dobrze rozwiązują ten problem. Niestety, AngularJS nie przydaje się z żadnym z nich. Zamiast tego wprowadza własny wstrzykiwanie zależności (DI); chociaż istnieją nieoficjalne implementacje DI AngularJS używające RequireJS.

  • Dwukierunkowe wiązanie to miecz obosieczny

    Używanie wiązania dwukierunkowego jest kuszące, ale wraz ze wzrostem złożoności komponentu może to doprowadzić do katastrofy wydajności.

    Jak dwukierunkowe wiązanie wpływa na wydajność? Cóż, JavaScript ES5 nie ma żadnej implementacji powiadamiającej o jakichkolwiek zmianach w swoich zmiennych lub obiektach, więc Angular używa czegoś, co nazywa się „sprawdzeniem brudu”, aby śledzić zmiany danych i synchronizować je z interfejsem użytkownika. Dirty-checking jest przeprowadzany po każdej operacji wykonanej w zakresie Angulara (cykl $digest), co prowadzi do wolniejszej wydajności wraz ze wzrostem liczby powiązań.

    Innym problemem związanym z wiązaniem dwukierunkowym jest to, że wiele różnych składników na stronie może zmieniać dane, co prowadzi do wielu źródeł danych wejściowych. Jeśli nie zostanie dobrze potraktowany, może to prowadzić do niejednoznacznej sytuacji. Ale żeby być uczciwym, jest to kwestia czysto implementacyjna.

  • Angular ma swój własny świat

    Każda operacja w Angularze musi przejść przez swój cykl skrótu, w przeciwnym razie komponenty nie zsynchronizują się z modelami danych. Tak więc, jeśli używasz dowolnej istniejącej biblioteki JavaScript innej firmy, musisz ją owinąć funkcją $apply Angulara, jeśli wiąże się to ze zmianami danych lub będziesz musiał przekonwertować ją na usługę, jeśli jest to biblioteka narzędziowa. To jak ponowne wymyślanie każdego dostępnego modułu JavaScript dla Angulara.

  • Zbyt wiele koncepcji i stroma krzywa uczenia się

    Nauka Angulara wymaga poznania mnóstwa pojęć, w tym modułów, kontrolerów, dyrektyw, zakresów, szablonów, funkcji łączących, filtrów i wstrzykiwania zależności.

Poznaj Reaguj

React, nowa biblioteka open source JS z Facebooka i Instagrama, to inny sposób pisania aplikacji JavaScript. Kiedy został wprowadzony na JSConf EU w maju 2013 r., publiczność była zszokowana niektórymi zasadami projektowania, takimi jak „jednokierunkowy przepływ danych” i „wirtualny DOM”.

Oficjalna strona React mówi: „React to biblioteka JavaScript do budowania interfejsów użytkownika” i tak, tylko interfejsy i nic więcej. Nie jest to framework taki jak AngularJS. Ale możesz napisać samodzielne komponenty, które mniej więcej porównują się z dyrektywami Angulara. szybki przegląd

React ponownie zastanawia się nad najlepszymi praktykami w tworzeniu stron internetowych. Reach zachęca do jednokierunkowego przepływu danych i wierzy w filozofię, zgodnie z którą komponenty są maszynami stanu napędzanymi danymi. Podczas gdy większość innych frameworków lubi pracować z DOM i bezpośrednio nim manipulować, React nienawidzi DOM i stara się chronić przed nim programistę. React dostarcza tylko podstawowe API, które jest potrzebne do zdefiniowania dowolnego komponentu UI i nic więcej. Zasięg jest zgodny z filozofią UNIX: Małe jest piękne. Zrób jedną rzecz i rób to najlepiej.

To bardzo ładne porównanie między nimi autorstwa Pete Hunta (z zespołu Instagrama)

To tylko biblioteka. Czy potrzebujemy frameworka z Reactem?

Krótka odpowiedź: Twój wybór.

Za pomocą Reacta można budować interfejsy użytkownika, ale nadal musimy zarządzać zależnościami, wykonywać wywołania AJAX, stosować filtry danych. Jeśli potrzebujemy frameworka, po co rezygnować z AngularJS?

Frameworki to zestaw pakietów i zestaw reguł. Co jeśli nie potrzebuję niektórych pakietów lub chcę zamienić się na inny pakiet. Jak mam to zrobić? Potrzebujemy menedżera pakietów. Jak zarządzamy pakietami w AngularJS? To twój wybór, ale Angular ma swój własny świat. Będziesz musiał owinąć każdy zewnętrzny pakiet w świat Angulara, a następnie go użyć. Ale React to tylko JavaScript, a każdy pakiet napisany w JavaScript nie będzie wymagał żadnego opakowania w React.

Lepiej więc, jeśli wybierzemy własne pakiety z repozytorium pakietów, takiego jak npm i uporządkujemy je tak, jak chcemy. Dobrą wiadomością jest to, że React zachęca do korzystania z npm, który ma wiele gotowych do użycia pakietów. Aby rozpocząć pracę z Reactem, możesz użyć jednego z tych zestawów startowych Full-Stack

Zalety React

Dlaczego więc tak naprawdę przerzuciłem się na Reacta?

Reakcja jest szybka!

React stosuje inne podejście niż inne frameworki. Nie pozwala na bezpośrednią pracę z DOM. Zamiast tego wprowadza warstwę wirtualnego DOM między logiką JavaScript a rzeczywistym DOM. Pomaga to drastycznie poprawić prędkość. Przy kolejnych renderowaniach React wykonuje porównanie na wirtualnym DOM i aktualizuje tylko tę część prawdziwego DOM, która wymaga aktualizacji.

Wirtualny DOM pomaga również w rozwiązywaniu problemów z różnymi przeglądarkami, ponieważ zapewnia ujednolicone API dla wielu przeglądarek, które działa nawet w Internet Explorerze 8. (Uff!)

Wszystko jest komponentem (widżet UI)

Pisanie samodzielnych komponentów interfejsu użytkownika modularyzuje twoją aplikację i oddziela problemy dla każdego z nich. Każdy komponent może być rozwijany i testowany oddzielnie i z kolei wykorzystywać inne komponenty zwiększające łatwość konserwacji.

Jednokierunkowy przepływ danych dla wygranej!

Flux to architektura do tworzenia jednokierunkowych warstw danych w aplikacjach JavaScript. Został zaprojektowany na Facebooku wraz z biblioteką React view. Ułatwia tworzenie i ułatwia śledzenie i naprawianie błędów. Flux to bardziej koncepcja niż implementacja. Może być również zaimplementowany w innych frameworkach. Alex Rattray ma bardzo ładną implementację Flux przy użyciu Backbone Collection i Model w React.

JavaScript i nic więcej

Nowoczesne aplikacje internetowe działają inaczej niż tradycyjna sieć. Warstwa widoku musi być aktualizowana o interakcje użytkownika bez uderzania w serwer. A zatem View i Controller muszą mocno na sobie polegać. Wiele innych frameworków używa silników szablonów, takich jak Handlebars i Mustache, jako warstwy widoku, ale React uważa, że ​​te dwie części są tak od siebie zależne, że muszą znajdować się w jednym miejscu bez użycia silnika szablonów innych firm i bez opuszczania zakresu JavaScript.

Izomorficzny JavaScript

Największą wadą jednostronicowych aplikacji internetowych JavaScript jest to, że ma ograniczenia podczas indeksowania przez wyszukiwarki. React ma na to rozwiązanie. React może wstępnie wyrenderować aplikacje na serwerze przed wysłaniem ich do przeglądarki, a także przywrócić ten sam stan do działającej aplikacji ze wstępnie wyrenderowanej statycznej zawartości z serwera. Ponieważ roboty indeksujące wyszukiwarek w dużym stopniu polegają na odpowiedzi serwera, a nie na wykonywaniu kodu JavaScript, wstępne renderowanie takich aplikacji pomaga w optymalizacji pod kątem wyszukiwarek.

React dobrze współpracuje z RequireJS, Browserify i Webpack

Ładowarki i moduły pakujące są bardzo potrzebne, gdy budujesz dużą aplikację. Niestety, obecna wersja JavaScript nie zapewnia pakera modułów ani modułu ładującego, chociaż jest to proponowane w nadchodzącej wersji EcmaScript 6 (System.import). Na szczęście mamy kilka alternatyw, takich jak RequireJS i Webpack, które są całkiem przyzwoite.

React jest zbudowany z Browserify, ale jeśli chcesz wstrzykiwać zasoby graficzne i kompilować LESS lub CoffeeScript, prawdopodobnie Webpack jest lepszą opcją.

Z pewnym bólem przerzuciłem się na React.

  • Ponieważ AngularJS jest frameworkiem, zawiera wiele korzyści, w tym opakowanie AJAX w usłudze $http, $q jako usługę obietnicy, ng-show, ng-hide, ng-class i ng-if jako instrukcje kontrolne dla szablonu.

  • React nie jest frameworkiem, ale biblioteką do budowania interfejsu użytkownika, więc musisz samodzielnie pomyśleć o wszystkich pozostałych elementach. Pracuję nad projektem open source, którego można używać z Reactem, aby ułatwić rozwój, a społeczność aktywnie wnosi również podobne komponenty wielokrotnego użytku.

    React-components.com to nieoficjalna strona z katalogiem, na której można znaleźć takie komponenty typu open source.

  • Filozofia Reacta nie zachęca do korzystania z dwukierunkowego wiązania, co przysparza wiele bólu, gdy mamy do czynienia z elementami formularzy i edytowalnymi siatkami danych. Jednak gdy zaczniesz rozumieć przepływ danych i magazyny Flux, wszystko staje się jaśniejsze, prostsze i łatwiejsze.

React jest nowy, więc rozwój społeczności zajmie trochę czasu.

Angular zyskał ostatnio ogromną popularność i ma stosunkowo dużą liczbę dostępnych rozszerzeń, takich jak AngularUI i Retangular. Społeczność open source Reacta jest nowa, ale szybko się rozwija dzięki rozszerzeniom takim jak React Bootstrap. To tylko kwestia czasu, kiedy będziemy mieć więcej dostępnych komponentów, a React może być z łatwością wykorzystany do szybkiego tworzenia aplikacji internetowych.

Wniosek

Jeśli korzystałeś wcześniej z AngularJS, możesz początkowo nienawidzić Reacta, głównie ze względu na jednokierunkowy przepływ danych i brak „frameworku”, w którym musisz sam zająć się wieloma innymi sprawami. Ale jak tylko poczujesz się komfortowo ze wzorem projektowym Flux i filozofią React, zdasz sobie sprawę, że to piękno.

Facebook i Instagram używają Reacta. Nowy edytor Atom na Github jest zbudowany przy użyciu Reacta. Nadchodząca poczta Yahoo jest przebudowywana w React. Jakich innych przykładów potrzebujesz? Wypróbuj React już dziś.