\n Pytanie, kt\u00f3re s\u0142ysz\u0119 prawie codziennie, brzmi: czy powinienem zacz\u0105\u0107 od ReactJS czy Angular? Zanim jednak przejd\u0119 dalej, pozwol\u0119 sobie na zastrze\u017cenie.\n<\/p>\n
\n To nie jest blog, na kt\u00f3rym b\u0119d\u0119 atakowa\u0107 jednego lub drugiego albo m\u00f3wi\u0107, \u017ce zawsze powiniene\u015b u\u017cywa\u0107 jednego zamiast drugiego. Ka\u017cdy programista i ka\u017cdy projekt s\u0105 zupe\u0142nie inni i maj\u0105 inny zestaw wymaga\u0144, wi\u0119c m\u00f3wienie, \u017ce zawsze powiniene\u015b u\u017cywa\u0107 ReactJS lub zawsze u\u017cywa\u0107 Angular, jest cholernie g\u0142upie.\n<\/p>\n
\n Mo\u017cesz argumentowa\u0107, \u017ce Angular jest frameworkiem, a React jest technicznie bibliotek\u0105 sam\u0105 w sobie. Nie zaprzeczam temu faktowi, ale jest to argument, w kt\u00f3ry nie chc\u0119 teraz wchodzi\u0107. Istniej\u0105 pakiety, kt\u00f3re mo\u017cesz doda\u0107 do React, kt\u00f3re zmieni\u0105 go w framework bezpo\u015brednio konkuruj\u0105cy z Angular. Por\u00f3wnujemy dwa ekosystemy, a nie dok\u0142adn\u0105 platform\u0119 i dok\u0142adn\u0105 bibliotek\u0119.\n<\/p>\n
\n Zacznijmy od Angulara. Jeszcze jedno zastrze\u017cenie: kiedy m\u00f3wi\u0119 Angular, m\u00f3wi\u0119 o Angular 4, a nie AngularJS.\n<\/p>\n
\n Angular to du\u017cy framework, co oznacza, \u017ce \u200b\u200bjest pot\u0119\u017cny i zawiera wiele. Jest du\u017co do nauczenia si\u0119. Us\u0142yszysz wiele nowych zastraszaj\u0105cych s\u0142\u00f3w, takich jak wstrzykiwanie zale\u017cno\u015bci, dekoratory dyrektyw, potoki itp. Nast\u0119pnie b\u0119dziesz musia\u0142 poradzi\u0107 sobie z TypeScript, czyli JavaScriptem oraz wieloma innymi funkcjami, w tym pisaniem statycznym.\n<\/p>\n
\n Angular jest bardziej uparty ni\u017c React, co moim zdaniem jest jedn\u0105 z zalet, poniewa\u017c dzi\u0119ki React mo\u017cesz zrobi\u0107 to samo na milion r\u00f3\u017cnych sposob\u00f3w. W przypadku Angular istnieje zazwyczaj jeden lub dwa sposoby wykonywania pewnych czynno\u015bci, co u\u0142atwia ich przestrzeganie i zapewnia znacznie bardziej jasne instrukcje dotycz\u0105ce tego, co nale\u017cy zrobi\u0107.\n<\/p>\n
\n Ale znowu sprowadza si\u0119 to do preferencji. Mo\u017cesz polubi\u0107 elastyczno\u015b\u0107 robienia rzeczy na r\u00f3\u017cne sposoby. Jak wspomnia\u0142em, ReactJS jest bibliotek\u0105, je\u015bli m\u00f3wimy tylko o bibliotece podstawowej, jest znacznie mniejsza i \u0142atwiejsza do nauczenia si\u0119 ni\u017c framework Angular. Mo\u017cesz powiedzie\u0107, \u017ce nauczysz si\u0119 React w kr\u00f3tszym czasie. React sam w sobie jest \u015bwietn\u0105 bibliotek\u0105 widok\u00f3w, ale nie jest nawet w przybli\u017ceniu tak pot\u0119\u017cny dla du\u017cych aplikacji. Je\u015bli chcesz routingu, sprawdzania poprawno\u015bci, \u017c\u0105da\u0144 HTTP w React, b\u0119dziesz musia\u0142 zainstalowa\u0107 inne pakiety, a to zwi\u0119kszy krzyw\u0105 uczenia si\u0119.\n<\/p>\n
\n Je\u015bli spojrzysz na kod React od dw\u00f3ch r\u00f3\u017cnych programist\u00f3w, prawdopodobnie b\u0119d\u0105 wygl\u0105da\u0107 zupe\u0142nie inaczej, niezale\u017cnie od tego, czy wykonuj\u0105 \u017c\u0105dania HTTP, czy obs\u0142uguj\u0105 stan i w\u0142a\u015bciwo\u015bci. Wszystkie te rzeczy mo\u017cna traktowa\u0107 bardzo r\u00f3\u017cnie i wiele razy mo\u017ce to by\u0107 w niew\u0142a\u015bciwy spos\u00f3b.\n<\/p>\n
\n Znajdujesz najlepsze praktyki i wszystkie problemy znikaj\u0105, ale to zwi\u0119ksza krzyw\u0105 uczenia si\u0119.\n<\/p>\n
\n W przeciwie\u0144stwie do Angular React nie u\u017cywa szablon\u00f3w. U\u017cywa czego\u015b, co nazywa si\u0119 rozszerzeniem JSX lub JavaScript lub rozszerzeniem sk\u0142adni JavaScript, co pozwala nam osadzi\u0107 HTML w JavaScript. Na pocz\u0105tku mo\u017ce si\u0119 to wydawa\u0107 troch\u0119 dziwaczne. Zw\u0142aszcza, gdy prawdopodobnie nauczono Ci\u0119 oddziela\u0107 znaczniki i JavaScript.\n<\/p>\n
\n Pomy\u015bl o tym jak o umieszczeniu HTML w JavaScript z kilkoma r\u00f3\u017cnymi zmianami: nie mo\u017cesz u\u017cy\u0107 atrybutu class i musisz u\u017cy\u0107 nazwy klasy.\n<\/p>\n
\n Wreszcie mamy Redux. React jest cz\u0119sto u\u017cywany z Redux lub Flux, kt\u00f3re s\u0105 mened\u017cerami stanu na poziomie aplikacji. Moim zdaniem Redux jest cholernie trudny, samo skonfigurowanie go i nauczenie si\u0119 jego koncepcji jest trudne.\n<\/p>\n
\n My\u015bl\u0119, \u017ce jest nadu\u017cywany. My\u015bl\u0119, \u017ce wielu programist\u00f3w u\u017cywa redux tam, gdzie nie jest to potrzebne. Nie potrzebujesz go do mniejszych aplikacji, ale wielu programist\u00f3w nalega na jego u\u017cycie. To znowu sprowadza si\u0119 do preferencji. Redux jest bardzo pot\u0119\u017cny, nie chc\u0119 tego odbiera\u0107. Kiedy m\u00f3wimy o krzywej uczenia si\u0119, jest to cholernie trudne do uchwycenia.\n<\/p>\n
| \n Cechy<\/span><\/span>\n <\/td>\n | \n Reagowa\u0107<\/span><\/span>\n <\/td>\n | \n K\u0105towy<\/span><\/span>\n <\/td>\n<\/tr>\n| \n J\u0119zyk programowania<\/span><\/span>\n <\/td>\n | \n JavaScript<\/span><\/span>\n <\/td>\n | \n Maszynopis<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Struktura kodu<\/span><\/span>\n <\/td>\n | \n Uparty<\/span><\/span>\n <\/td>\n | \n Elastyczny<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Biblioteka podstawowa<\/span><\/span>\n <\/td>\n | \n Ma\u0142y<\/span><\/span>\n <\/td>\n | \n Bardzo du\u017cy<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Szablonowanie<\/span><\/span>\n <\/td>\n | \n JSX<\/span><\/span>\n <\/td>\n | \n HTML<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Kompetencja<\/span><\/span>\n <\/td>\n | \n Ma\u0142e aplikacje<\/span><\/span>\n <\/td>\n | \n Aplikacje na du\u017c\u0105 skal\u0119<\/span><\/span>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n | \n Zwyci\u0119zca: Jest remis<\/strong>\n<\/p>\n \n Bezpo\u015brednie por\u00f3wnywanie wydajno\u015bci Angulara z Reactem jest niesprawiedliwe. Angular to kompletna platforma od przodu do ty\u0142u, kt\u00f3ra obejmuje routing, narz\u0119dzia formularzy, bibliotek\u0119 HTTP, rozszerzenia reaktywne itp. Wszystkie te funkcje rozrastaj\u0105 platform\u0119 i spowalniaj\u0105 j\u0105. React jednak samo w sobie jest tylko bibliotek\u0105 widok\u00f3w, kt\u00f3ra jest znacznie mniejsza i szybsza.\n<\/p>\n \n Gdy zaczniesz dodawa\u0107 pakiety, takie jak router, klient HTTP lub cokolwiek, co zamierzasz doda\u0107 do swojej aplikacji React, zaczyna si\u0119 to zbli\u017ca\u0107 do miejsca, w kt\u00f3rym znajduje si\u0119 Angular, a nast\u0119pnie mo\u017cesz zacz\u0105\u0107 uczciwie je por\u00f3wnywa\u0107, ale nawet po tym Reaguj nadal wygrywa dzia\u0142 wydajno\u015bci. Jest to og\u00f3lnie bardzo szybka technologia.\n<\/p>\n \n Zmiana z Angular 2 na Angular 4 pod mask\u0105 zrobi\u0142a sporo, aby zwi\u0119kszy\u0107 wydajno\u015b\u0107. Angular 4 dzia\u0142a lepiej ni\u017c Angular 2. Mimo to React wci\u0105\u017c wygrywa w dziale wydajno\u015bci.\n<\/p>\n \n \n Zwyci\u0119zca: Reaguj<\/strong>\n<\/p>\n \n Oba frameworki maj\u0105 wiele takich samych cech og\u00f3lnych i zalet: organizuj\u0105 kod, s\u0105 oparte na komponentach, oferuj\u0105 dynamiczne znaczniki itp. S\u0105 u\u017cywane do robienia wielu tych samych rzeczy i dziel\u0105 du\u017co tych samych funkcji.\n<\/p>\n \n Przyjrzymy si\u0119 niekt\u00f3rym indywidualnym funkcjom. Angular ma oczywi\u015bcie o wiele wi\u0119cej funkcji ni\u017c React. Przypomn\u0119, m\u00f3wimy o dw\u00f3ch ekosystemach i wsp\u00f3lnych pakietach, kt\u00f3re s\u0105 u\u017cywane z Reactem.\n<\/p>\n \n Angular to wszechstronna platforma. Jest wyposa\u017cony w router komponentowy, reaktywne rozszerzenia dla obiekt\u00f3w obserwowalnych, klienta HTTP, modu\u0142 formularza do sprawdzania poprawno\u015bci i lista jest d\u0142uga. Co wi\u0119cej, oferuje dwukierunkowe wi\u0105zanie danych w spos\u00f3b, jakiego nie oferuje \u017caden inny framework. Wi\u0105zanie danych z widoku z modelem jest niezwykle proste przy u\u017cyciu dyrektywy ng model.\n<\/p>\n \n Angular obs\u0142uguje r\u00f3wnie\u017c MVC (kontroler widoku modelu) lub przynajmniej inne aspekty tego wzorca projektowego. zawiera r\u00f3wnie\u017c funkcje, kt\u00f3re pozwalaj\u0105 \u0142atwo wdro\u017cy\u0107 testy: zar\u00f3wno testy jednostkowe, jak i testy kompleksowe. Angular jest wyposa\u017cony w funkcje do tworzenia aplikacji front-end na poziomie przedsi\u0119biorstwa. React z drugiej strony nie zawiera wiele w swoim rdzeniu. Mo\u017cna jednak doda\u0107 rzeczy, aby nada\u0107 mu funkcje, kt\u00f3re Angular zawiera od razu po wyj\u0119ciu z pude\u0142ka, a tak\u017ce kilka dodatkowych.\n<\/p>\n \n React u\u017cywa wirtualnego DOM, kt\u00f3ry jest bardzo pot\u0119\u017cny. Tworzy w\u0142asn\u0105, lekk\u0105 wersj\u0119 rzeczywistego Domu i zawiera i aktualizuje tylko to, co jest potrzebne, zamiast od\u015bwie\u017ca\u0107 ca\u0142o\u015b\u0107. Wirtualny DOM to g\u0142\u00f3wny pow\u00f3d, dla kt\u00f3rego React jest niesamowicie szybki.\n<\/p>\n \n React u\u017cywa JSX, kt\u00f3ry jest pot\u0119\u017cniejszy ni\u017c standardowe szablony, poniewa\u017c mo\u017cesz umie\u015bci\u0107 w nim absolutnie dowolny typ JavaScript, jaki chcesz. JSX nie jest wymagany do korzystania z React, ale znacznie u\u0142atwia spraw\u0119. Nie mog\u0119 wymy\u015bli\u0107 \u017cadnego powodu, dla kt\u00f3rego nie mia\u0142by\u015b u\u017cywa\u0107 JSX r\u00f3wnie\u017c z Angular. React radzi sobie r\u00f3wnie\u017c naprawd\u0119 dobrze z zarz\u0105dzaniem stanem i w\u0142a\u015bciwo\u015bciami komponent\u00f3w. Sprawia, \u017ce \u200b\u200bpraca z danymi i przekazywanie ich mi\u0119dzy komponentami jest naprawd\u0119 \u0142atwe. Przekazywanie danych mi\u0119dzy komponentami w Angularze jest znacznie trudniejsze ni\u017c robienie tego w React.\n<\/p>\n \n Core React jest trudny do utrzymania na poziomie aplikacji. Stan komponentu jest \u0142atwy, ale je\u015bli chcesz prawdziwego zarz\u0105dzania stanem na poziomie aplikacji, b\u0119dziesz potrzebowa\u0107 Redux lub Flux, co, jak powiedzia\u0142em wcze\u015bniej, jest cholernie myl\u0105ce. Zewn\u0119trzne pakiety, kt\u00f3re s\u0105 cz\u0119sto u\u017cywane, takie jak nowy router React w wersji 4, s\u0105 nieco trudne do zrozumienia, ale s\u0105 r\u00f3wnie\u017c bardzo wydajne, gdy nauczysz si\u0119 je uruchamia\u0107 i konfigurowa\u0107. Istnieje r\u00f3wnie\u017c wiele r\u00f3\u017cnych sposob\u00f3w jego wykorzystania. React nie ma podstawowego komponentu HTTP, takiego jak Angular, ale mo\u017cesz u\u017cy\u0107 Fetch lub Axios, kt\u00f3ry jest zewn\u0119trznym klientem HTTP, a nast\u0119pnie Enzyme jest popularny do po\u015bwiadczania React. Istnieje kilka r\u00f3\u017cnych pakiet\u00f3w, kt\u00f3re s\u0105 powszechnie u\u017cywane z Reactem, mimo \u017ce nie s\u0105 cz\u0119\u015bci\u0105 rzeczywistej biblioteki.\n<\/p>\n \n Chocia\u017c obie technologie maj\u0105 wiele wsp\u00f3lnych funkcji, je\u015bli por\u00f3wnujesz tylko podstawowe technologie, to Angular jest zwyci\u0119zc\u0105.\n<\/p>\n \n Zwyci\u0119zca: Angular<\/strong>\n<\/p>\n \n Angular i React maj\u0105 ca\u0142kiem niez\u0142e interfejsy wiersza polece\u0144. Angular CLI i Create React App s\u0105 \u015bwietne i naprawd\u0119 pozwalaj\u0105 nam usprawni\u0107 programowanie. Angular CLI jest nieco pot\u0119\u017cniejszy, poniewa\u017c mo\u017cemy szybko generowa\u0107 komponenty i us\u0142ugi. Create React nie mo\u017ce tego zrobi\u0107. Musisz stworzy\u0107 wszystko sam, je\u015bli chodzi o pliki i podstawow\u0105 struktur\u0119. Oba systemy korzystaj\u0105 z pakietu internetowego, maj\u0105 w\u0142asne serwery deweloperskie z automatycznym \u0142adowaniem oraz narz\u0119dzia do kompilacji i budowania. Oczywi\u015bcie Angular ma dodatkowe zadanie polegaj\u0105ce na transponowaniu maszynopisu. CLI ma skrypt do tego, kiedy uruchamiamy ng serve. Wszystko to dzia\u0142o si\u0119 za kulisami. U\u017cywa do tego czego\u015b, co nazywa si\u0119 TSC lub TypeScript Compiler i oba maj\u0105 r\u00f3wnie\u017c narz\u0119dzia testowe.\n<\/p>\n \n Je\u015bli jest to aplikacja z pe\u0142nym stosem, s\u0105 one naprawd\u0119 wa\u017cne. Nie musisz ich u\u017cywa\u0107. Mo\u017cesz zbudowa\u0107 aplikacj\u0119 React od podstaw za pomoc\u0105 pakietu webowego. U\u0142atwiaj\u0105 one nie tylko tworzenie aplikacji, ale tak\u017ce kompilowanie i tworzenie jej na potrzeby produkcji.\n<\/p>\n \n Obie s\u0105 \u0142adne nawet w tym dziale.\n<\/p>\n \n Zwyci\u0119zca: Angular<\/strong>\n<\/p>\n \n Jak powiedzia\u0142em, obie te technologie maj\u0105 swoje w\u0142asne ekosystemy, kt\u00f3re obecnie rozprzestrzeniaj\u0105 si\u0119 daleko poza przegl\u0105dark\u0119 internetow\u0105.\n<\/p>\n \n Ionic to popularna platforma hybrydowa, kt\u00f3ra jest aplikacj\u0105 Angular dzia\u0142aj\u0105c\u0105 w natywnym opakowaniu dla aplikacji mobilnych. Mo\u017cesz tworzy\u0107 aplikacje mobilne za pomoc\u0105 Angular. Aplikacje hybrydowe mog\u0105 by\u0107 nieco toporne w por\u00f3wnaniu z aplikacjami natywnymi. Do\u015bwiadczenie u\u017cytkownika mo\u017ce czasami nie by\u0107 tak wspania\u0142e – nie tak szybkie i responsywne. W\u015br\u00f3d r\u00f3\u017cnych framework\u00f3w hybrydowych Ionic 3 jest najlepszy. Istnieje r\u00f3wnie\u017c NativeScript, kt\u00f3ry pozwala nam tworzy\u0107 prawdziwie natywne aplikacje iOS i Android z Angular i JavaScript.\n<\/p>\n \n Niemniej jednak NativeScript nie wydaje si\u0119 by\u0107 tak dobry jak React Native Facebooka, przynajmniej w tym momencie. Angular ma r\u00f3wnie\u017c bibliotek\u0119 komponent\u00f3w projektowania materia\u0142\u00f3w, je\u015bli jeste\u015b fanem projektowania materia\u0142\u00f3w. Angular Universal to projekt \u017ar\u00f3d\u0142owy, kt\u00f3rego mo\u017cna u\u017cy\u0107 do renderowania Angular po stronie serwera. Jest te\u017c sklep NgRx, kt\u00f3ry jest bibliotek\u0105 zarz\u0105dzania stanem inspirowan\u0105 Reax redux. Opiera si\u0119 na stanie zmutowanym przez reduktory r\u00f3wnorz\u0119dne. Posiada r\u00f3wnie\u017c integracj\u0119 z rozszerzeniami Reactive.\n<\/p>\n \n Zauwa\u017cy\u0142by\u015b. Pewnego razu jeden z nich robi co\u015b, a drugi kopiuje w inny spos\u00f3b. React i Angular sta\u0142y si\u0119 frameworkami JavaScript firmy Microsoft i Apple.\n<\/p>\n \n React ma ca\u0142kiem niez\u0142y ekosystem. Ma React natywny, kt\u00f3ry jest popularny. To najlepszy spos\u00f3b na tworzenie aplikacji mobilnych przy u\u017cyciu technologii internetowych. React Native jest szybki, a wiele aplikacji, je\u015bli jest poprawnie zbudowanych, dor\u00f3wnuje aplikacjom natywnym, kt\u00f3re s\u0105 zbudowane na Swift lub Javie. React ma bibliotek\u0119 projektowania materia\u0142\u00f3w o nazwie Material-UI, kt\u00f3ra bardzo przypomina komponent projektowania materia\u0142\u00f3w Angulara, ale jest bardziej dojrza\u0142a. JS to framework do renderowania aplikacji React po stronie serwera. Ma na celu zrobienie tego w najprostszy mo\u017cliwy spos\u00f3b, wi\u0119c mo\u017cna to por\u00f3wna\u0107 do Angular Universal. MobX to kolejny spos\u00f3b zarz\u0105dzania stanem. Dzia\u0142a to troch\u0119 inaczej ni\u017c redux. Zapewnia zestaw dekorator\u00f3w do definiowania obserwowalnych i obserwator\u00f3w oraz wprowadza logik\u0119 reaktywn\u0105 do twojego stanu.\n<\/p>\n \n Storybook to \u015brodowisko programistyczne dla React. Pozwala przegl\u0105da\u0107 bibliotek\u0119 komponent\u00f3w, wy\u015bwietla\u0107 r\u00f3\u017cne stany ka\u017cdego komponentu oraz interaktywnie opracowywa\u0107 i testowa\u0107 komponenty. Reactive VR wprowadza React do wirtualnej rzeczywisto\u015bci. React desktop to biblioteka JavaScript zbudowana na bazie biblioteki Reacts, kt\u00f3ra rzekomo zapewnia natywn\u0105 obs\u0142ug\u0119 pulpitu w Internecie, zawieraj\u0105c\u0105 wiele komponent\u00f3w systemu macOS i Windows 10. Ekosystem React jest niezwykle du\u017cy i pot\u0119\u017cny. React wkracza w ka\u017cdy aspekt technologii i jest wyra\u017anym zwyci\u0119zc\u0105.\n<\/p>\n \n Zwyci\u0119zca: Reaguj<\/strong>\n<\/p>\n \n Je\u015bli decydujesz mi\u0119dzy tymi frameworkami, sp\u00f3jrz na r\u00f3\u017cne kategorie i zobacz, co Ci\u0119 interesuje. Wypr\u00f3buj oba i zobacz, kt\u00f3ry wybierzesz szybciej. Zr\u00f3b wi\u0119cej bada\u0144 ni\u017c ten blog. Nigdy nie uzyskasz wszystkich potrzebnych informacji z jednego bloga, wi\u0119c poczytaj troch\u0119 wi\u0119cej.\n<\/p>\n \n Je\u015bli szukasz wi\u0119kszego ekosystemu, kt\u00f3ry obejmuje tworzenie natywnych aplikacji mobilnych, wybierz React bez zastanowienia. Je\u015bli szukasz funkcji, Angular jest ogromny. Jest wi\u0119cej funkcji ni\u017c potrzebujesz.\n<\/p>\n<\/p>\n |