Který byste si měli vybrat v roce 2022?

autor:
Tweet
Share
Share
Pin

Tento text se zaměřuje na významné funkce a odlišnosti mezi React a Angular, což jsou populární nástroje používané při tvorbě webových aplikací.

Jak Angular, tak i React se využívají pro vývoj webových aplikací a těší se podobné oblibě, jak ukazují trendy Google. Zatímco Angular si vydobyl pozici předního webového frameworku, React zaznamenává od roku 2018 rapidní růst. Angular je komplexní framework, který vychází z architektury MVC. React nabízí několik zajímavých funkcí, díky kterým je vhodný i pro méně náročné aplikace.

Než se podíváme na klíčové rozdíly, pojďme si oba nástroje stručně představit.

Co je Angular?

Angular je webový framework, který vývojářům poskytuje strukturu pro jejich práci. Využívá se k vytváření dynamických webových aplikací. Angular je open-source projekt napsaný v TypeScriptu. Nejnovější verze Angularu je 12.1.4, vydaná v červenci 2021. Angular eliminuje problémy, kterým vývojáři čelí při použití JavaScriptu jako hlavního skriptovacího jazyka na straně klienta.

Představte si Angular jako rozšíření HTML s novými, snadno použitelnými atributy. Pro lepší pochopení se podívejme na jednoduchý kód:

    <noscript>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <body>

    <style>

    form.ng-dirty {

    color:orange;

    }

    form.ng-pristine {

    color:blue;

    }

    </style>

    <form ng-app="">

    <p><b>Jak se jmenuješ?</b> <input type="text" ng-model="user_name"></p>

    <h1>Ahoj {{user_name}}! Dnes vypadáš skvěle!</h1>

    </form>

    </body>
  </noscript>

V uvedeném kódu uživatel zadá jméno do textového pole. Jakmile začne psát, změní se barva textu. Jméno se zobrazí spolu s uvítací zprávou.

  • Používáme zde formulář Angular, který nevyžaduje žádné další CSS elementy.
  • O změny barev se starají prvky formuláře jako ng-dirty a ng-pristine.
  • ng-app je název aplikace Angular.
  • Atribut ng-model je podobný atributu name v HTML.
  • Textovou hodnotu zobrazíme pomocí dvojitých složených závorek.

Pro využití všech funkcí Angularu, jako jsou ovladače, komponenty a moduly, je potřeba nainstalovat npm balíček (s node.js), což přesahuje rámec tohoto textu.

Podívejte se na tento kurz pro naučení se Angularu.

Co je React?

React je bezplatná a open-source knihovna spravovaná společností Facebook. Ve srovnání s frameworky uživatelského rozhraní je rychlejší a zároveň nabízí flexibilitu pro integraci s jinými frameworky.

Pomocí deklarativního přístupu k programování v Reactu můžeme vytvářet opakovaně použitelné komponenty uživatelského rozhraní. Tento přístup výrazně snižuje úsilí potřebné pro vývoj uživatelského rozhraní. Jednoduchá aplikace v Reactu může být rozdělena do několika opakovaně použitelných komponent následovně:

Pro využití všech funkcí Reactu, jako jsou komponenty a moduly pro reálnou aplikaci, je nutné nainstalovat node.js. Pro lepší pochopení funkcí Reactu přepišme výše uvedený příklad:

    <noscript>
    <html>

    <body>

    <div id="root"></div>

    <!—- add all the libraries -->

    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>

    <script src="https://unpkg.com/react/umd/react.development.js"></script>

    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

    <script type="text/babel">

    // Add new React component to get and print user’s name

    class WelcomeMessage extends React.Component {

    constructor(props){

    super(props);

    this.state = { name: '' };

    }


    handleChange = event => {

    this.setState({ name: event.target.value });

    };


    // render the UI and display result when the state changes

    render() {

    return (

    <React.Fragment>

    <form>

    <label htmlFor="name">Zadejte své jméno: </label>

    <input

    type="text"

    name="name"

    value={this.state.name}

    onChange={this.handleChange}

    />

    </form>


    <h1>Ahoj {this.state.name}! Dnes vypadáš skvěle!</h1>

    </React.Fragment>

    );

    }

    }

    ReactDOM.render(

    <WelcomeMessage />,

    document.getElementById('root')

    );

    </script>

    </body>

    </html>
  </noscript>

Pro snadnou kompilaci kódu v jakémkoli prohlížeči používáme Babel transpilátor. Bez něj by nebylo možné použít některé části kódu Reactu.

Výše uvedený kód se může zdát příliš dlouhý na pouhé zobrazení jednoho pole. Reálné aplikace budou mít mnoho takovýchto komponent, které lze opakovaně používat, takže toto úsilí se vyplatí.

Všimli jste si, že v komponentě skriptu používáme HTML kód? Jak je to možné? Odpověď najdete v sekci: Vlastnosti React.

Vlastnosti Angularu

Pojďme se podívat na charakteristické rysy Angularu:

  • Vývojáři mohou rychle vytvářet progresivní aplikace bez nutnosti složité instalace.
  • Je vhodný pro tvorbu desktopových i mobilních aplikací.
  • Nabízí podporu napříč platformami.
  • Poskytuje aplikaci strukturu (architektura MVC).
  • Urychluje vývoj díky minimálnímu množství potřebného kódu.
  • Dosahuje dobrého výkonu.
  • Má silnou syntaxi šablon pro snadné vytváření uživatelských rozhraní.
  • Kód lze vyvíjet v jednoduchém textovém editoru nebo IDE.

Vlastnosti Reactu

Mezi typické vlastnosti Reactu patří:

  • ReactJS využívá syntaxi podobnou HTML, známou jako JSX (JavaScript XML), což umožňuje zapisovat kód JavaScript a HTML do jednoho souboru.
  • Aplikace v ReactJS mají jednotlivé opakovaně použitelné komponenty s vlastním ovládáním a logikou.
  • Komponenty jsou neměnné, což zajišťuje jednosměrnou vazbu a přehlednou kontrolu v rámci celé aplikace.
  • Jednosměrná vazba zefektivňuje a zvyšuje flexibilitu aplikací.
  • Podporuje virtuální reprezentaci DOM. Skutečný DOM se změní pouze v případě, že dojde ke změnám v reprezentacích DOM, čímž se šetří paměť.
  • Dosahuje vysokého výkonu a podporuje napříč platformami.

Aplikace Angularu

Angular lze využít pro rozsáhlé podnikové aplikace, jednostránkové aplikace a progresivní webové aplikace (PWA).

Mnoho známých společností používá Angular. Například Gmail a YouTube TV jsou postaveny na Angularu. Tyto aplikace jsou dostupné na různých platformách, jako je Android, Apple atd.

YouTube TV je přístupná na FireTV, Chromecastu a mnoha dalších platformách.

Další aplikace využívající Angular zahrnují e-learningovou platformu Udacity, bankovní aplikace jako Santander a PayPal, webový aplikační portál Wix a Microsoft Office Web.

Aplikace Reactu

React se široce používá pro vytváření uživatelských rozhraní jednostránkových aplikací (SPA). Funguje bez problémů pro mobilní i desktopové aplikace. Facebook, Bloomberg, Airbnb, Instagram a Skype jsou příklady webových aplikací, které využívají React Native, framework postavený na React JS.

React je řízen komunitou, což z něj činí oblíbenou volbu pro rychlé vytváření aplikací uživatelského rozhraní.

Výhody Angularu

Zopakujme si některé důležité výhody Angularu:

  • Efektivní řešení uživatelského rozhraní napříč platformami, které využívá funkce TypeScriptu jako je vkládání závislostí a směrování.
  • Rychlé načítání aplikací a vyšší výkon.
  • Rychlejší vývoj díky funkcím jako Angular CLI, rozsáhlá komunitní podpora, obousměrná vazba dat a diferenční načítání.
  • Moduly a komponenty zajišťují čitelnost kódu a jeho snadné ladění a testování.
  • Silné návrhové vzory, jako je vkládání závislostí a služby Angular.

Výhody Reactu

React má některé přesvědčivé vlastnosti, které ho odlišují od Angularu:

  • Dodržuje deklarativní přístup – to znamená, že při jakékoli změně stavu aplikace React aktualizuje požadované komponenty a vykreslí je, když se data změní.
  • React lze použít jako knihovnu na straně klienta nebo na serveru pomocí React Native a Node.js.
  • Snadná křivka učení, dobrá dokumentace, skvělá podpora komunity a výukové zdroje. Každý, kdo má znalosti JavaScriptu, může psát kód v Reactu.
  • Využívá JSX pro snadné vykreslování konkrétních komponent.
  • React namísto toho, aby vývojáři psali kód DOM, převádí virtuální komponenty na DOM, čímž dosahuje vyššího výkonu.

Nevýhody Angularu

Angular nabízí mnoho pokročilých funkcí, jako jsou komponenty a vkládání závislostí. To však může ztěžovat jeho učení pro začátečníky. Naučení se a implementace konceptů do projektu může nějakou dobu trvat.

Nevýhody Reactu

JSX pomáhá vývojářům vykreslovat HTML v JS. Pokud je však komponenta příliš rozsáhlá, například validace formuláře, může být kód složitý a obtížně se ladí, zejména pro začátečníky. React také pokrývá pouze uživatelské rozhraní a neposkytuje kompletní pracovní postup.

Měli byste si vybrat Angular nebo React?

Než odpovíme na tuto otázku, shrňme si hlavní rozdíly mezi Angular a React:

Angular React
Nabízí kompletní framework pro návrh velkých podnikových, progresivních a jednostránkových aplikací. Používá se jako knihovna JavaScriptu k vykreslování jednotlivých komponent uživatelského rozhraní.
Poskytuje pokročilé funkce, jako je vkládání závislostí, diferenční načítání, líné načítání. Podporuje pouze líné načítání.
Angular je založen na TypeScriptu. React je založen na JavaScriptu.
Sleduje architekturu MVC. Založeno na virtuálním DOM.
Lze ho vnímat jako rozšíření atributů HTML. Vývojáři mohou psát HTML kód do skriptu, který React vykresluje jako komponentu.
Poskytuje funkce ladění a testování jako nástroj. React neposkytuje žádný vestavěný nástroj, takže pro různé typy testování je nutné použít různé nástroje.
Má strmější křivku učení, ale poměrně snadné nastavení. Má snazší křivku učení, ale nastavení vyžaduje více času.
Obousměrná vazba, kdy se stav modelu mění se změnou dat. Jednosměrná datová vazba, kdy se prvky uživatelského rozhraní mění pouze při změně stavu modelu.
Do zdrojového kódu nelze přidat knihovnu JavaScript. Umožňuje přidat knihovnu JavaScript do zdrojového kódu.
Angular CLI poskytuje řadu nástrojů pro vývoj a bezproblémové aktualizace. Vzhledem k tomu, že React se stará pouze o uživatelské rozhraní, nemá CLI.

S ohledem na výše uvedené rozdíly se zdá, že jak Angular, tak React jsou dobré volby pro jednostránkové aplikace. Pokud je ale vaše aplikace rozsáhlá a potřebuje mnoho validací, směrování a závislostí, doporučuje se pracovat s Angularem, protože kód lze také snadno otestovat.

Angular může být s veškerými svými funkcemi až příliš komplexní, pokud jsou požadavky vaší aplikace jednoduché a založené na menších komponentách. React má navíc snazší křivku učení.

Volbu proveďte na základě požadavků projektu, nákladů a použitelnosti.

Závěr 👨‍🏫

Tento text ukázal malé úryvky kódu pro srovnání fungování Angularu a Reactu a poté představil hlavní rozdíly mezi nimi.

Zatímco Angular je plnohodnotný framework pro vývoj a testování, React vývojářům pouze umožňuje vytvářet komponenty uživatelského rozhraní pro jejich aplikace. React je na druhou stranu rychlý, efektivní a jeho popularita roste, protože je lehký a vhodný pro nativní mobilní a jednostránkové aplikace. Angular je již zavedený framework vhodný pro SPA a velké aplikace.