Co kryje si\u0119 za tysi\u0105cami linikek kodu i aplikacjami, kt\u00f3rych u\u017cytkownicy po prostu lubi\u0105 u\u017cywa\u0107? Umiej\u0119tno\u015bci i wiedza to jedno, ale nie bez znaczenia przy tworzeniu produkt\u00f3w cyfrowych s\u0105 te\u017c odpowiednie narz\u0119dzia. W przypadku pracy programisty frontendowego od lat ma miejsce swego rodzaju pojedynek gigant\u00f3w. Bez w\u0105tpienia Angular i React, bo o nich mowa, s\u0105 doskona\u0142ymi frameworkami frontendowymi, kt\u00f3re mog\u0105 wzbogaci\u0107 tw\u00f3j stos technologiczny. Ale kt\u00f3ry z nich jest lepszy? W artykule zebra\u0142em najwa\u017cniejsze funkcjonalno\u015bci oraz wady i zalety obu rozwi\u0105za\u0144.<\/p>\n\n\n\n
<\/p>\n
Angular to framework JavaScriptowy, stworzony przez Google w 2009 roku. Obecnie jest jednym z najstarszych dost\u0119pnych framework\u00f3w frontendowych. React z kolei to biblioteka frontendowa autorstwa Facebooka, dost\u0119pna na rynku od 2013 roku. Od tego czasu zdoby\u0142a ogromn\u0105 popularno\u015b\u0107 i sta\u0142a si\u0119 jedn\u0105 z najcz\u0119\u015bciej u\u017cywanych bibliotek w swojej klasie. <\/p>\n\n\n\n
Oba narz\u0119dzia pozwalaj\u0105 na budowanie aplikacji internetowych i oba zaprowadz\u0105 ci\u0119 do celu, ale inn\u0105 drog\u0105. W tym artykule por\u00f3wnam te dwie popularne opcje, aby pom\u00f3c ci zdecydowa\u0107, kt\u00f3ra z nich b\u0119dzie lepsza dla twojego projektu. <\/p>\n\n\n\n
Je\u015bli zastanawiasz si\u0119, czym r\u00f3\u017cni\u0105 si\u0119 Angular i React oraz czy s\u0105 to tak naprawd\u0119 to\u017csame rozwi\u0105zania, lecz pod inn\u0105 nazw\u0105, odpowied\u017a brzmi: nie. <\/p>\n\n\n\n
Po pierwsze, React powsta\u0142 przy u\u017cyciu j\u0119zyka JavaScript (st\u0105d nazwa: React.js), podczas gdy Angular to framework oparty na j\u0119zyku TypeScript. <\/p>\n\n\n\n
Warto zaznaczy\u0107, \u017ce chocia\u017c React jest bibliotek\u0105, to prawie ka\u017cdy projekt wykorzystuj\u0105cy React zawiera r\u00f3wnie\u017c zestaw pomocniczych narz\u0119dzi, cz\u0119sto zaprojektowanych specjalnie dla niego, co czyni go niemal kompletnym frameworkiem aplikacji internetowych. Z tego powodu w dalszej cz\u0119\u015bci artyku\u0142u b\u0119dziemy u\u017cywa\u0107 terminu „framework” zar\u00f3wno w odniesieniu do Angulara, jak i Reacta. <\/p>\n\n\n\n
W praktyce zespo\u0142y deweloperskie cz\u0119sto maj\u0105 jasne preferencje i wybieraj\u0105 jedno z tych narz\u0119dzi. I tak Angular jest najcz\u0119\u015bciej stosowany do tworzenia z\u0142o\u017conych aplikacji korporacyjnych (aplikacje jednostronicowe SPA oraz progresywne aplikacje internetowe PWA). Z kolei React wykorzystuje si\u0119 do budowania komponent\u00f3w interfejsu u\u017cytkownika (UI) w r\u00f3\u017cnych aplikacjach, zw\u0142aszcza takich, kt\u00f3re charakteryzuj\u0105 si\u0119 cz\u0119stymi zmianami informacji. <\/p>\n\n\n\n
React jest \u0142atwiejszy w nauce, poniewa\u017c dostarcza tylko podstawowych narz\u0119dzi do tworzenia aplikacji. Natomiast z Angularem sprawa wygl\u0105da nieco trudniej ze wzgl\u0119du na obfito\u015b\u0107 wbudowanych funkcji i mechanizm\u00f3w. <\/p>\n\n\n\n
React (lub React.js\/ReactJS) s\u0142u\u017cy do tworzenia interfejs\u00f3w u\u017cytkownika z pomoc\u0105 deklaratywnego stylu programowania<\/a>. React jest u\u017cywany do tworzenia r\u00f3\u017cnorodnych aplikacji internetowych, aplikacji natywnych oraz mobilnych.\u00a0\u00a0<\/p>\n\n\n\n Angular to bezp\u0142atny framework do tworzenia aplikacji internetowych o otwartym kodzie \u017ar\u00f3d\u0142owym, rozwijany wsp\u00f3lnie z zaanga\u017cowaniem spo\u0142eczno\u015bci \u2013 os\u00f3b prywatnych i firm. Pocz\u0105tkowo mia\u0142 wspiera\u0107 tworzenie stron internetowych. Obecnie u\u0142atwia programowanie na frontendzie. <\/p>\n\n\n\n Przy okazji omawiania tych narz\u0119dzi nie mo\u017ce zabrakn\u0105\u0107 wzmianki o wa\u017cnej technice, kt\u00f3r\u0105 oferuje obecnie wi\u0119kszo\u015b\u0107 narz\u0119dzi dost\u0119pnych na rynku. Data binding, czyli wi\u0105zanie danych,<\/strong> jest kluczowym elementem nowoczesnych aplikacji frontendowych, kt\u00f3re staj\u0105 si\u0119 dzi\u0119ki niej szybsze i \u0142atwiejsze do debugowania. Je\u015bli jeste\u015b programist\u0105 JavaScript, to wa\u017cne jest, aby\u015b zrozumia\u0142, w jaki spos\u00f3b technika ta jest implementowana w r\u00f3\u017cnych frameworkach i bibliotekach JavaScript. <\/p>\n\n\n\n Data binding to mechanizm, kt\u00f3ry pozwala na synchronizacj\u0119 danych mi\u0119dzy modelem (np. danymi w aplikacji) a widokiem (interfejsem u\u017cytkownika). <\/strong> <\/p>\n\n\n\n Dzi\u0119ki niemu zmiany wprowadzone w jednym z tych element\u00f3w automatycznie znajduj\u0105 odzwierciedlenie w drugim, a aplikacja jest zawsze aktualna bez potrzeby r\u0119cznego zarz\u0105dzania danymi w tych dw\u00f3ch miejscach. <\/p>\n\n\n\n Angular oferuje pe\u0142ne wsparcie dla dwukierunkowego wi\u0105zania danych <\/strong>(two-way data binding). Chodzi tu o to, \u017ce zmiana danych w modelu powoduje automatycznie aktualizacj\u0119 widoku, a zmiana danych w widoku znajduje odzwierciedlenie w modelu. Mechanizm dwukierunkowego wi\u0105zania jest szeroko wykorzystywany na przyk\u0142ad w formularzach. <\/p>\n\n\n\n Przyk\u0142ad dwukierunkowego wi\u0105zania danych w Angularze: <\/p>\n\n\n\n W powy\u017cszym przyk\u0142adzie wprowadzona warto\u015b\u0107 w polu input b\u0119dzie natychmiast znajdowa\u0142a odzwierciedlenie w nag\u0142\u00f3wku h1. <\/p>\n\n\n\n React stosuje jednokierunkowe wi\u0105zanie danych<\/strong> (one-way data binding<\/strong>). To znaczy, \u017ce dane przep\u0142ywaj\u0105 tylko w jednym kierunku: od \u201crodzica” (ParentComponent<\/strong>) do \u201cdziecka\u201d (ChildComponent<\/strong>). W przypadku gdy komponenty podrz\u0119dne chc\u0105 przekaza\u0107 dane do komponent\u00f3w nadrz\u0119dnych, u\u017cywane s\u0105 funkcje zwrotne (callbacks<\/strong>). <\/p>\n\n\n\n Przyk\u0142ad jednokierunkowego wi\u0105zania danych w React: <\/p>\n\n\n\n W tym przyk\u0142adzie ChildComponent przekazuje warto\u015b\u0107 pola input do komponentu ParentComponent za pomoc\u0105 funkcji zwrotnej onChange. <\/p>\n\n\n\n Poni\u017cej znajdziesz kluczowe funkcje, kt\u00f3re sprawiaj\u0105, \u017ce Angular jest tak cenionym narz\u0119dziem do tworzenia \u015brodowisk frontendowych: <\/p>\n\n\n\n 1. Wieloplatformowo\u015b\u0107<\/strong> <\/p>\n\n\n\n Wieloplatformowo\u015b\u0107 to mo\u017cliwo\u015b\u0107 tworzenia aplikacji na dowolne urz\u0105dzenie. Dzi\u0119ki tej funkcji Angular \u015bwietnie sprawdza si\u0119 w tworzeniu Progressive Web Applications (PWA)<\/a>. Co wi\u0119cej, dzi\u0119ki wieloplatformowo\u015bci mo\u017cesz wdro\u017cy\u0107 aplikacj\u0119 zar\u00f3wno jako lokaln\u0105, jak i progresywn\u0105.\u00a0<\/p>\n\n\n\n 2. Wydajna architektura MVC<\/strong> <\/p>\n\n\n\n Model-View-Controller (MVC) stanowi jedn\u0105 z kluczowych funkcji Angulara 8. To wzorzec projektowy, kt\u00f3ry zak\u0142ada rozdzielno\u015b\u0107 poszczeg\u00f3lnych warstw celem oddzielenia logik i uporz\u0105dkowania architektury. <\/p>\n\n\n\n MVC zwi\u0119ksza mo\u017cliwo\u015bci platformy w zakresie tworzenia aplikacji, z dba\u0142o\u015bci\u0105 o wi\u0105zanie danych i zakresy. Dzi\u0119ki MVC wszystkie niezb\u0119dne elementy aplikacji s\u0105 \u0142\u0105czone, co pozwala unikn\u0105\u0107 dodatkowego kodowania. <\/p>\n\n\n\n 3. Struktura modu\u0142owa<\/strong> <\/p>\n\n\n\n Wspania\u0142\u0105 cech\u0105 Angulara jest mo\u017cliwo\u015b\u0107 organizowania kodu w r\u00f3\u017cne modu\u0142y w miar\u0119 jego tworzenia. Struktura modu\u0142owa pozwala stworzy\u0107 wielokrotnie u\u017cywane bloki kodu oraz u\u0142atwia podzia\u0142 zada\u0144 mi\u0119dzy programistami Angular. Daje te\u017c aplikacjom mo\u017cliwo\u015b\u0107 wczytywania modu\u0142\u00f3w z op\u00f3\u017anieniem. Przydatne, zw\u0142aszcza gdy poszczeg\u00f3lne modu\u0142y (modu\u0142 u\u017cytkownika, zarz\u0105dzania tre\u015bci\u0105, magazynu), s\u0105 tworzone przez r\u00f3\u017cne zespo\u0142y, kt\u00f3re maj\u0105 swoje odpowiedzialno\u015bci. Dzi\u0119ki temu wiedza domenowa jest rozproszona. <\/p>\n\n\n\n A w jaki spos\u00f3b ta funkcja poprawia do\u015bwiadczenia u\u017cytkownika? Wczytywanie modu\u0142\u00f3w z op\u00f3\u017anieniem ma miejsce np., gdy wchodzimy na stron\u0119. W\u00f3wczas nie wczytuj\u0105 si\u0119 wszystkie modu\u0142y, a strona \u0142aduje si\u0119 szybko i jest bardziej responsywna dla u\u017cytkownika. Dopiero gdy wejdzie on w jaki\u015b okre\u015blony modu\u0142, zostanie on pobrany z serwera. W efekcie strona \u0142aduje si\u0119 2 sekundy, zamiast, przyk\u0142adowo, p\u00f3\u0142 minuty. <\/p>\n\n\n\n 4. Angular CLI<\/strong> <\/p>\n\n\n\n Angular CLI (Command Line Interface) to narz\u0119dzie do tworzenia stron internetowych. CLI automatyzuje wiele proces\u00f3w za pomoc\u0105 prostych polece\u0144. Dzi\u0119ki temu mo\u017cna \u0142atwo dodawa\u0107 lub usuwa\u0107 zdefiniowane funkcje. Angular CLI umo\u017cliwia r\u00f3wnie\u017c szybkie uruchamianie test\u00f3w jednostkowych i test\u00f3w end-to-end, co poprawia jako\u015b\u0107 kodu. <\/p>\n\n\n\n Przyk\u0142adowo, CLI Angulara pozwala za pomoc\u0105 komend tworzy\u0107 ca\u0142e modu\u0142y. Dzi\u0119ki temu, zamiast tworzy\u0107 folder, kilka plik\u00f3w itp., wykorzystujemy komend\u0119, kt\u00f3ra zast\u0119puje ten nudny proces. Przyk\u0142ad z dokumentacji: https:\/\/angular.io\/cli\/generate.<\/a> <\/p>\n\n\n\n 5. Wi\u0105zanie danych<\/strong> <\/p>\n\n\n\n Wi\u0105zanie danych pozwala \u0142atwo manipulowa\u0107 elementami strony internetowej za pomoc\u0105 przegl\u0105darki. Angular wykorzystuje dynamiczny HTML, co pozwala unikn\u0105\u0107 m.in. stosowania skomplikowanych skrypt\u00f3w. Jest to szczeg\u00f3lnie przydatne przy tworzeniu stron internetowych z interaktywnymi komponentami (gry czy samouczki) lub takimi, kt\u00f3re zawieraj\u0105 du\u017c\u0105 ilo\u015b\u0107 danych, zwi\u0119kszaj\u0105c efektywno\u015b\u0107 wy\u015bwietlania. <\/p>\n\n\n\n 6. Zestaw dyrektyw<\/strong> <\/p>\n\n\n\n AngularJS rozszerza funkcjonalno\u015b\u0107 HTML poprzez zestaw wbudowanych atrybut\u00f3w, zwanych dyrektywami. Zwi\u0119kszaj\u0105 one mo\u017cliwo\u015bci HTML, dostosowuj\u0105c go do dynamicznych aplikacji po stronie klienta. Co wa\u017cne, dyrektywy mog\u0105 by\u0107 inicjowane samodzielnie za pomoc\u0105 AngularJS. <\/p>\n\n\n\n 7. \u0141atwiejsza praca z kodem dzi\u0119ki TypeScript<\/strong> <\/p>\n\n\n\n TypeScript u\u0142atwia prac\u0119 z kodem, a Angular jest napisany w\u0142a\u015bnie przy jego u\u017cyciu i pozwala wydoby\u0107 wszystkie zalety tego j\u0119zyka. Najwa\u017cniejsze z nich to wykrywanie i naprawianie b\u0142\u0119d\u00f3w w kodzie w trakcie pisania oraz wspieranie funkcji bezpiecze\u0144stwa Angular, takie jak prymitywy i interfejsy. <\/p>\n\n\n\n 8. Deklaratywny interfejs u\u017cytkownika<\/strong> <\/p>\n\n\n\n Jedn\u0105 z kluczowych cech Angulara jest deklaratywny interfejs u\u017cytkownika. Angular pozwala na opisywanie interfejsu u\u017cytkownika przy u\u017cyciu HTML, co jest bardziej intuicyjne ni\u017c u\u017cywanie samego JavaScriptu. Deklaratywny interfejs Angulara pozwala na precyzyjne opisanie uk\u0142adu strony i \u015bcie\u017cek danych, co upraszcza rozw\u00f3j aplikacji. <\/p>\n\n\n\n 9. Obszerna dokumentacja i wsparcie spo\u0142eczno\u015bci<\/strong> <\/p>\n\n\n\n Google, jako g\u0142\u00f3wny rozwijaj\u0105cy Angulara, zapewnia stabilno\u015b\u0107 frameworka i dostarcza bogat\u0105 dokumentacj\u0119. Dzi\u0119ki temu programi\u015bci zawsze mog\u0105 liczy\u0107 na wsparcie i odpowiedzi na swoje pytania, a tak\u017ce na dost\u0119p do narz\u0119dzi do rozwi\u0105zywania problem\u00f3w. Spo\u0142eczno\u015b\u0107 Angulara jest aktywna, co sprzyja wymianie wiedzy. <\/p>\n\n\n\n 10. Ivy Renderer<\/strong> <\/p>\n\n\n\n Ivy Renderer to zaawansowany mechanizm t\u0142umaczenia kodu napisanego w TypeScript i HTML na standardowe instrukcje JavaScript. Renderer jest kluczowy dla kompatybilno\u015bci aplikacji z r\u00f3\u017cnymi przegl\u0105darkami, co pozwala wy\u015bwietla\u0107 komponenty i szablony w odpowiedni spos\u00f3b. Ivy Renderer pozwala wyeliminowa\u0107 r\u00f3wnie\u017c nieu\u017cywany kod, a tym samym mniejsza rozmiar aplikacji. <\/p>\n\n\n\n Poni\u017cej zebra\u0142em g\u0142\u00f3wne cechy, kt\u00f3re sprawiaj\u0105, \u017ce React jest tak ceniony przez programist\u00f3w. <\/p>\n\n\n\n 1. Wirtualny DOM<\/strong> <\/p>\n\n\n\n Wirtualny DOM (Document Object Model) jest swoist\u0105 reprezentacj\u0105 oryginalnego DOM, utrzymywan\u0105 w pami\u0119ci wirtualnej przez Reacta. Za ka\u017cdym razem, gdy wyst\u0119puj\u0105 zmiany w aplikacji, ca\u0142y interfejs u\u017cytkownika jest najpierw renderowany w wirtualnym DOM, a nast\u0119pnie por\u00f3wnywany z oryginalnym DOM. Dzi\u0119ki temu tylko zmienione komponenty s\u0105 aktualizowane na stronie, co znacznie przyspiesza proces renderowania i poprawia wydajno\u015b\u0107 aplikacji. <\/p>\n\n\n\n 2. JavaScript XML (JSX)<\/strong> <\/p>\n\n\n\n React wykorzystuje specjaln\u0105 sk\u0142adni\u0119 znacznik\u00f3w zwan\u0105 JSX (JavaScript XML), kt\u00f3ra pozwala na opisywanie struktury interfejsu u\u017cytkownika w spos\u00f3b zbli\u017cony do HTML. JSX sprzyja wprowadzaniu dynamizmu do aplikacji oraz u\u0142atwia tworzenie komponent\u00f3w React, dzi\u0119ki czemu programi\u015bci mog\u0105 pisa\u0107 bardziej czytelny i zwi\u0119z\u0142y kod. <\/p>\n\n\n\n 3. React Native<\/strong> <\/p>\n\n\n\n Zdolno\u015b\u0107 do tworzenia aplikacji natywnych dla platform mobilnych, takich jak Android i iOS. React Native, oparty na React, umo\u017cliwia tworzenie aplikacji mobilnych, kt\u00f3re dzia\u0142aj\u0105 jak aplikacje natywne. Dzi\u0119ki temu mo\u017cna \u0142atwo przenosi\u0107 kod mi\u0119dzy r\u00f3\u017cnymi platformami, co znacznie przyspiesza proces tworzenia rozwi\u0105za\u0144 mobilnych. <\/p>\n\n\n\n 4. Jednokierunkowe wi\u0105zanie danych<\/strong> <\/p>\n\n\n\n Jak wspomnia\u0142em, React stosuje jednokierunkowe wi\u0105zanie danych. Dzi\u0119ki funkcji wywo\u0142ania zwrotnego (callback<\/strong>) do aktualizacji stanu komponent\u00f3w przep\u0142yw danych jest bardziej kontrolowany i przewidywalny. Architektura Flux wspiera to podej\u015bcie i pozwala rozwija\u0107 aplikacje w spos\u00f3b bardziej modu\u0142owy i skalowalny. <\/p>\n\n\n\n 5. Deklaratywny interfejs u\u017cytkownika<\/strong> <\/p>\n\n\n\n Programista opisuje, jak powinien wygl\u0105da\u0107 interfejs w r\u00f3\u017cnych stanach, a React sam zajmuje si\u0119 jego aktualizacj\u0105 i synchronizacj\u0105 z DOM. Deklaratywny styl programowania czyni kod bardziej czytelnym, \u0142atwiejszym do zrozumienia i debugowania. <\/p>\n\n\n\n 6. Architektura oparta na komponentach<\/strong> <\/p>\n\n\n\n Ca\u0142y interfejs u\u017cytkownika jest podzielony na mniejsze, odizolowane od siebie komponenty. Ka\u017cdy z nich ma swoj\u0105 w\u0142asn\u0105 logik\u0119 i stan, co u\u0142atwia zarz\u0105dzanie aplikacj\u0105 i przekazywanie danych pomi\u0119dzy poszczeg\u00f3lnymi komponentami. <\/p>\n\n\n\n Przecyztaj artyku\u0142: Najlepsze frameworki frontendowe<\/a><\/p>\n\n\n\n 1. \u0141atwo\u015b\u0107 nauki<\/strong> <\/p>\n\n\n\n W por\u00f3wnaniu z innymi frameworkami React jest do\u015b\u0107 \u0142atwy w nauce, co czyni go bardzo atrakcyjnym narz\u0119dziem zw\u0142aszcza na pocz\u0105tku przygody z programowaniem. <\/p>\n\n\n\n 2. Bogaty interfejs u\u017cytkownika<\/strong> <\/p>\n\n\n\n Dzi\u0119ki deklaratywnym komponentom React umo\u017cliwia tworzenie atrakcyjnych, anga\u017cuj\u0105cych i interaktywnych interfejs\u00f3w u\u017cytkownika. <\/p>\n\n\n\n 3. Tworzenie w\u0142asnych komponent\u00f3w<\/strong> <\/p>\n\n\n\n Jedn\u0105 z najwi\u0119kszych zalet React jest mo\u017cliwo\u015b\u0107 tworzenia reu\u017cywalnych i unikalnych komponent\u00f3w spe\u0142niaj\u0105cych konkretne wymagania. <\/p>\n\n\n\n 4. Wi\u0119ksza produktywno\u015b\u0107<\/strong> <\/p>\n\n\n\n Funkcja ponownego wykorzystania komponent\u00f3w pozwala w efektywny spos\u00f3b redystrybuowa\u0107 obiekty cyfrowe. Zmiany w jednych komponentach nie wp\u0142ywaj\u0105 na inne, co u\u0142atwia utrzymanie i rozw\u00f3j kodu. <\/p>\n\n\n\nCzym jest Angular? <\/h2>\n\n\n\n
Data binding \u2013 technika wi\u0105zania danych w Angular i React <\/h2>\n\n\n\n
Czym jest data binding? <\/h3>\n\n\n\n
Wi\u0105zanie danych w Angularze <\/h2>\n\n\n\n
```html \n\n<!-- Widok --> \n\n<input [(ngModel)]=\"name\" \/> \n\n<h1>Hello {{name}}!<\/h1> \n\n``` <\/pre>\n\n\n\nWi\u0105zanie danych w React <\/h2>\n\n\n\n
```jsx \n\n\/\/ Komponent Nadrz\u0119dny \n\nimport React, { useState } from 'react'; \n\n \n\nconst ParentComponent = () => { \n\n const [name, setName] = useState(\"React\"); \n\n \n\n const handleChange = (event) => { \n\n setName(event.target.value); \n\n }; \n\n \n\n return ( \n\n <div> \n\n <ChildComponent name={name} onChange={handleChange} \/> \n\n <h1>Hello {name}!<\/h1> \n\n <\/div> \n\n ); \n\n}; \n\n \n\n\/\/ Komponent Podrz\u0119dny \n\nconst ChildComponent = ({ name, onChange }) => { \n\n return ( \n\n <input value={name} onChange={onChange} \/> \n\n ); \n\n}; \n\n``` <\/pre>\n\n\n\nKluczowe funkcje Angulara <\/h2>\n\n\n\n
Kluczowe funkcje React <\/h2>\n\n\n\n
Zalety Reacta <\/h2>\n\n\n\n