Co lepsze dla Frontend Developera: ReactJS czy Angular?

Wybór między ReactemJS vs Angularem nie jest prosty. Dlatego podjęliśmy ten temat w naszej devdebacie, do której zaprosiliśmy, jak zwykle, doświadczonych developerów. Zapytaliśmy ich, jak oceniają próg wejścia, co poleciliby osobie, która zna już dobrze JavaScripta oraz jakie znają rozwiązania do automatycznego testowania napisanego kodu. Zobaczcie, czego się od nich dowiedzieliśmy.

Odpowiedzi udzielają:

Krystian Pudlik. Frontend Developer w Evojam. Fan dobrego UI/UX. Entuzjasta TypeScripta, funkcyjnego programowania i niekonwencjonalnych rozwiązań dla ekosystemu frontendowego. Na co dzień pracuje z Reactem i Angularem, a po godzinach eksperymentuje z Elmem. Wierzy w zalety restrykcyjnego podejścia do code review i procesu wytwarzania oprogramowania.

Tomasz Kryń. ​Senior ​JavaScript Developer w studio programistycznym Smultron​, tworzący gry i aplikacje webowe w Angular, Vue, React, Pixi, Node i VanillaJS. Z wykształcenia matematyk, który udowodnił kilka swoich twierdzeń​. Hobbystycznie zajmuje się sztuczną inteligencją, a w szczególności deep learningiem.

Tomasz Łakomy. Senior Frontend Developer w OLX Group. Prelegent na konferencjach JavaScriptowych/Reactowych, współorganizuje React Poznań Meetup oraz meet.js Poznań i uwielbia dzielić się wiedzą z innymi.

Daria Woźnicka. Programistka RoR & JS w BinarApps, koordynatorka Women in Technology Łódź. Absolwentka Politechniki Łódzkiej na kierunku Informatyka oraz studentka Akademii Menedżerów Muzycznych. Zawodowo — programistka tworząca aplikacje internetowe dla software house’u. Programuje głównie w Ruby on Rails i Javascript. Po godzinach organizuje koncerty muzyczne.

---

Pytanie #1. Jak ocenisz próg wejścia do ReactaJS, a jak próg wejścia do Angulara?

Odpowiada Krystian Pudlik, Frontend JavaScript Developer:

Sądzę, że React ma zdecydowanie niższy próg wejścia ze względu na mniejszą ilość zależności. TypeScript, na którym bazuje Angular, może sprawiać problemy programistom, którzy nie pisali wcześniej backendu lub nie znają języków statycznie typowanych. Dodatkowo z moich obserwacji wynika, że wielu ludzi używa RxJS w niepoprawny sposób, co może prowadzić do problemów wydajnościowych w aplikacjach napisanych w Angularze. Myślę, że nawet jeśli porównamy cały ekosystem Reacta z Angularem, a nie tylko samą bibliotekę z frameworkiem, to React nadal ma mniejszy próg wejścia.

Odpowiada Tomasz Kryń, ​Senior ​JavaScript Developer:

Zgadzam się, poza tym w Angularze mamy rozbudowaną (i dość sztywną) architekturę, której trzeba się nauczyć. Trzeba na to poświęcić czas, ale jak już to opanujemy, to pisze się prościej i efektywniej, bo każdy pisze niemal tak samo. Sama architektura wymusza dobrej jakości kod. W React mamy duży luz. Możemy po kilku godzinach z tutorialem/dokumentacją zacząć coś pisać, ale żeby pisać kod dobrej jakości, to trzeba być dobrym developerem. To trochę jak z jazdą na nartach/desce. Na nartach łatwiej zacząć, ale trudniej dojść do poprawnej technicznie jazdy.

Odpowiada Daria Woźnicka, Programistka RoR & JS:

Na wstępie zaznaczę, że przez Reacta mam na myśli cały ekosystem idący z biblioteką React.js w parze, czyli zwykle react-routerem, reduxem (lub fluxem), immutable etc. W ten sposób można porównać to z frameworkiem jakim jest Angular.io.

Próg wejścia zawsze zależy od tego, jakie zaplecze programistyczne, a przede wszystkim wiedzę o Javascripcie i ES6 posiadasz oraz do czego dążysz w danej technologii. Jeśli chodzi o czyste frameworki, to próg wejścia oceniam na bardzo zbliżony. Obie biblioteki korzystają ze składni ES6, jednak robią to na różne sposoby.

Przykładowo React idzie w parze z Babelem, który transpiluje składnię JSX do Javascriptu, a w przypadku Angulara polecany jest TypeScript, do których to już próg wejścia jest bardzo różny. TypeScript, przez podobieństwa do Javy, bardzo ułatwia pisanie skomplikowanych systemów. Mimo to jest bardzo łatwy w nauce – przynajmniej jeśli poznałeś kiedyś Javę (choć dodanie statycznego typowania do Javascriptu budzi różne kontrowersje w środowisku). Opanowanie JSXa zajęło mi zdecydowanie więcej czasu. Na szczęście, w obu przypadkach składnia jest tylko sugestią. Możemy pisać w czystym Javascripcie, jeśli jesteśmy dość odważni. Idąc tą drogą nie spodziewajmy się jednak dobrych przykładów w internecie.

Pytanie #2. Jak oceniasz społeczność ReactaJS oraz Angulara? Czy uważasz, że któraś z nich jest bardziej przyjazna/pomocna?

Odpowiada Krystian Pudlik, Frontend JavaScript Developer:

Oba rozwiązania mają dużą społeczność, jednakże Reactem zajmuje się zdecydowanie więcej ludzi i to ta społeczność jest bardziej pomocna i bardziej dojrzała. Sama biblioteka jest też dłużej na rynku, więc łatwiej będzie o pomoc. W przypadku Angulara często byłem skazany jedynie na twórców frameworka i zakładanie tasków na Githubie, ponieważ społeczność potrafiła pomóc jedynie do pewnego momentu. Dodatkowo wiele rozwiązań podawanych przez społeczność zawiera złe wzorce.

Odpowiada Tomasz Łakomy, Senior Frontend Developer:

Nie uważam, żeby któraś ze społeczności była bardziej przyjazna czy też pomocna, ale nie da się ukryć, że społeczność Reactowa jest zwyczajnie większa. Wiele konferencji JavaScriptowych, na których miałem okazję być jako widz/prelegent, w zasadzie przerodziło się w wydarzenia Reactowe ze względu na popularność tej biblioteki. W Poznaniu współorganizuję spotkania z cyklu React Poznań Meetup, na które regularnie przychodzi ponad setka ludzi.

Pytanie #3. Co poleciłbyś osobie, która zna dobrze JavaScripta: ReactaJS czy Angulara? Dlaczego?

Odpowiada Krystian Pudlik, Frontend Javascript Developer:

Jeśli patrzymy pod kątem szybkości wystartowania i tworzenia projektu to zdecydowanie React, ponieważ próg wejścia będzie zdecydowanie niższy. Z kolei jeśli jest to poboczny projekt i osoba ta chciałby poszerzyć wiedzę to zdecydowanie Angular. Sądzę, że szczególnie warto poznać TypeScripta i reaktywny paradygmat programowania, na których bazuje Angular. Często kończy się to tak, że po poznaniu TypeScripta ludzie nie chcą wracać do czystego JavaScriptu i nawet łączą go z Reactem.

Odpowiada Tomasz Kryń, ​Senior ​JavaScript Developer:

Można mieć różne cele, i w zależności od celu poleciłbym w odpowiedniej kolejności (A – Angular, R – React, V – Vue):

• szybko znaleźć pracę (RAV),
• więcej zarabiać (RAV),
• jak najszybciej się nauczyć (VRA),
• nauczyć się pisać jak najlepszej jakości kod (AVR),
• jak najszybciej wytworzyć mały projekt (VRA),
• jak najszybciej wytworzyć duży projekt (AVR),
• mieć przyjemność z pisania (VRA).

Odpowiada Tomasz Łakomy, Senior Frontend Developer:

Moje odpowiedzi będą dosyć mało obiektywne, bo jestem wielkim fanem Reacta. Między innymi dlatego, że można go rozumieć jako naturalny etap na drodze rozwoju programisty JavaScript. Przez to, że React sam w sobie jest biblioteką do obsługi UI, nie ma tzw. “czarnej magii” – jest to tylko JavaScript. Można by argumentować, że JSX jest pewnego rodzaju abstrakcją, ale jakby nie spojrzeć – to taki HTML, tylko na sterydach.

W swojej karierze miałem okazję spotkać świetnych programistów-Angularowców, którzy mieli braki z podstaw JavaScriptu – jest to efektem warstwy abstrakcji, za którą Angular ukrywa swoje “bebechy”. Nie jest to oczywiście nic złego, nikt nie chce wynajdywać koła na nowo (?), ale warto wiedzieć co dzieje się pod maską narzędzi, których używamy.

Odpowiada Daria Woźnicka, Programistka RoR & JS:

Wybrałabym Angulara, dzięki dobrze działającym integracjom z TypeScriptem, który wprowadza typowanie danych do Javascriptu. Jest to wyjątkowo wygodna w użyciu biblioteka. Jeśli biegle poruszasz się w Javascripcie, to nauka Rx’a – polecanej biblioteki do obsługi zdarzeń – też nie będzie problemem. Mimo tych zalet to React.js jest dużo szerzej znany i popularny, przez co wsparcie społeczności może być łatwiejsze. Polecałabym rozejrzeć się w grupie znajomych programistów i wybrać bibliotekę, którą znają oni, dzięki czemu uzyskasz wsparcie “na żywo”, co zawsze lepiej i szybciej uczy pracy w danej technologii. Patrząc na popyt na rynku, to w obu rozwiązaniach znajdziesz wystarczającą ilość projektów, by nie martwić się o pracę.

Pytanie #4. Czy istnieją dobre narzędzia do testowania automatycznego dla obydwu rozwiązań?

Odpowiada Krystian Pudlik, Frontend JavaScript Developer:

Jak najbardziej. Właściwie to rozwiązania do testowania automatycznego są niejako niezależne od technologii (a zwłaszcza narzędzia do testów E2E, co wynika z samej definicji) i możemy ich w większości przypadków używać zarówno do Reacta, jak i Angulara.

Oczywiście preferencje twórców są różne, w przypadku unit testów, Angular bazuje na stacku Karma + Jasmine, natomiast React na narzędziu Jest, które udostępnia funkcjonalność “snapshot testing”. Z moich doświadczeń spokojnie można użyć Jesta do testowania Angulara, nawet z opcją snapshotów. Jak już jesteśmy przy Angularze, to warto wspomnieć o “marble testingu” używanego do testowania streamów RxJS. Jest to ciekawe podejście do testowania asynchronicznych streamów, polegające mniej więcej na rysowaniu w kodzie osi czasu, tzw. “marbles”.

Odpowiada Tomasz Łakomy, Senior Frontend Developer:

Mówiąc o testach automatycznych możemy mieć na myśli dwie rzeczy – testy E2E (end-to-end) lub unit testy. Jeżeli mowa o E2E to na szczęście od jakiegoś czasu istnieje cypress.io – dzięki temu narzędziu nie musimy myśleć o tym w jakim frameworku jest napisana nasza aplikacja, a jej testowanie to czysta przyjemność (ze względu na brak Selenium pod spodem). Mówiąc o unit testach to istnieją dedykowane narzędzia zarówno do Angulara jak i Reacta, które mają swoje zalety oraz wady (czasami więcej tych drugich, ale testy to nigdy nic łatwego).

Pytanie #5. Czy dostrzegasz różnice w łatwości utrzymania dużej aplikacji między ReactJS a Angular? Jakie?

Odpowiada Krystian Pudlik, Frontend JavaScript Developer:

Podstawową różnicą i plusem na korzyść Angulara jest moim zdaniem TypeScript. Mogę zabrzmieć nieco subiektywnie, ale nie wyobrażam sobie utrzymywania dużej aplikacji bez TypeScripta, dlatego dołączam go też do aplikacji Reactowych. Statycznie typowana aplikacja jest dokumentacją samą w sobie dzięki czemu nowy programista lub programista wracający po latach do projektu jest w stanie poruszać się po nim sprawdzając kontrakty między typami. W przypadku czystego JavaScriptu/Reacta jesteśmy zmuszeni napisać dokumentację używając chociażby JSDoc, ale moim zdaniem jest to połowiczne rozwiązanie. TypeScript dodatkowo jest w stanie wykryć wiele błędów, świetnie zintegrować się z edytorem i podpowiadać składnię.

Mam też wrażenie, że w React dużo łatwiej jest napisać brzydki kod, więc może mieć to jakieś znaczenie dla utrzymywania aplikacji. Jeśli dorzucimy TypeScripta/Flow do Reacta i aplikacja będzie napisana starannie, to różnice w utrzymywaniu nie są aż tak duże. Angular po prostu jest bardziej restrykcyjny ze względu na TypeScripta i ciężej w nim napisać coś brzydkiego. Swoboda jaką daje React może wpłynąć negatywnie lub pozytywnie na utrzymywanie dużej aplikacji w zależności od poziomu zaawansowania programisty.

Odpowiada Tomasz Łakomy, Senior Frontend Developer:

Trudność w utrzymaniu aplikacji nie zależy od frameworka/biblioteki wykorzystanej przy implementacji. Można pisać czytelny, udokumentowany i prosty w utrzymaniu kod z wykorzystaniem jQuery, a także spaghetti code, którego nie rozumie sam autor po dwóch godzinach z wykorzystaniem Angulara czy Reacta. W mojej prywatnej opinii kod aplikacji Reactowych jest łatwiejszy do zrozumienia, ale niekoniecznie musi oznaczać to, że jest on łatwiejszy w utrzymaniu. Warto pamiętać o słówku “engineering” w określeniu “software engineer”, to w końcu nasze zadanie, żeby utrzymywać kod — nie programistów z Google czy Facebooka.

Odpowiada Daria Woźnicka, Programistka RoR & JS:

Dobrze napisana aplikacja powinna być łatwa w utrzymaniu niezależnie od wybranej technologii, dlatego zależy to bardziej od programisty niż frameworku. Zdecydowanie aplikacje używające Reacta lub Angulara są dużo łatwiejsze w utrzymaniu niż aplikacje JQuery’owe czy używające czystego Javascriptu. Według mnie stopień łatwości utrzymania w obu przypadkach jest podobny. Wydaje mi się jednak, że kiedy szukamy nowego programisty do utrzymania naszej aplikacji, łatwiej będzie go znaleźć, jeśli aplikacja jest napisana w React.js.

---

Zapraszamy Was, drodzy Czytelnicy, do udziały w tej devdebacie. Odpowiedzcie na jedno z zadanych wyżej pytań w komentarzach, ponieważ jesteśmy ciekawy Waszych opinii. Drugą część tej devdebaty znajdziecie tutaj.