Který rámec byste měli použít?

autor:
Tweet
Share
Share
Pin

React a Vue patří mezi nejznámější JavaScriptové knihovny/rámce pro vývoj webových aplikací. Pokud jste vývojář, vědět, který framework/knihovnu si vybrat, může být těžké, protože oba mají své výhody i nevýhody.

V tomto článku podrobně vysvětlím, jak tyto rámce/knihovny fungují, jejich podobnosti, rozdíly a případy použití každé knihovny/rámců.

Co je React?

React je JavaScriptová knihovna vyvinutá společností Meta, dříve Facebook, pro vytváření uživatelských rozhraní. Tato knihovna vám umožňuje vytvářet uživatelská rozhraní z komponent nebo jednotlivých kusů.

React používá architekturu založenou na komponentách, která uživatelům umožňuje rozdělit svůj kód na malé opakovaně použitelné komponenty. Tato knihovna využívá virtuální DOM (Document Object Model) a vytváří jednostránkové aplikace.

Značky používající React

Co je Vue?

Vue/ Vue.js je progresivní JavaScriptový framework pro vytváření webových uživatelských rozhraní. Tento framework je postaven na standardních HTML, CSS a JavaScript.

Vue byl vytvořen Evanem You a oficiálně uveden na trh v únoru 2014. Vue přijímá architekturu založenou na komponentách, která umožňuje vývojářům rozdělit jejich kód uživatelského rozhraní na malé, opakovaně použitelné, samostatné komponenty.

Značky používající Vue

  • Tencent
  • Alibaba
  • Xiaomi
  • Baidu
  • Carrefour

Reagovat vs. Vue: Podobnosti

Než se pustíme do toho, jak se React a Vue liší ve funkčnosti, můžeme také zkontrolovat jejich podobnosti.

To jsou některé ty pozoruhodné;

  • Oba se používají pro vytváření uživatelských rozhraní (front-end vývoj)
  • Oba jsou frameworky/knihovny JavaScriptu
  • Oba používají architekturu založenou na komponentách
  • Oba používají virtuální DOM

Reagovat vs. Vue: Rychlé srovnání

FunkceReactVueSyntaxe šablony JSXHTMLKomunitaVelká a aktivníRůst a aktivníDokumentaceKomplexníKřivka dobrého učeníStředníSnadnýMobilní vývojReact NativeVue NativeSpráva státuPoužívá ReduxPoužívá VeuxPopularitaVelmi populárníPopulární library a nástrojeRozsáhlý adresář nástrojů a nástrojů třetích stran librariesAdresář nástrojů a nástrojů třetích stran

Reagovat vs. Vue: Hluboké srovnání

I když můžete použít React nebo Vue k vytváření uživatelských rozhraní, tyto dva rámce/knihovny se liší v následujících ohledech;

#1. Syntax

Reagovat

React používá JSX, rozšíření, které umožňuje vývojářům psát JavaScript a HTML do stejného souboru. Pro použití JSX se třídy v CSS jmenují classNames. Soubory reakcí můžete uložit pomocí přípony jsx nebo js. Pokud máte například komponentu, kterou chcete pojmenovat „Home“, můžete ji uložit jako Home.jsx nebo Home.js.

  Co je Adobe Creative Cloud a stojí za to?

Vue

Vue je založen na HTML, JavaScriptu a CSS. Má intuitivní syntaxi, která kombinuje JavaScript, šablony založené na HTML a další direktivy. Šablony HTML jsou podobné čistému HTML, ale obsahují speciální direktivy, které vám umožňují svázat data s objektovým modelem dokumentu (DOM).

#2. Rozvoj a flexibilita

Reagovat

React je bez názorů a nabízí vývojářům flexibilitu při vytváření aplikací. Jako vývojář Reactu ovládáte, jak strukturujete kód.

Existuje několik přístupů, které můžete použít k vytvoření aplikace React. Bez ohledu na váš přístup musíte mít na svém místním počítači nainstalovaný Node.js.

Pro demonstrační účely můžeme použít cli přístup create-react-app. Jazyk šablony si můžete vybrat jako TypeScript nebo JavaScript. Pokud nevyberete jazyk šablony, nástroj create-react-app ve výchozím nastavení vybere JavaScript.

Pokud chcete pokračovat, zadejte tyto příkazy do svého terminálu;

npx create-react-app my-app
cd my-app
npm start

Nyní můžete aplikaci otevřít ve svém oblíbeném editoru kódu.

Toto je struktura aplikace React.

Většinu kódu zapíšete do složky src.

Vue

Vue je považován za rámec s názorem, protože poskytuje perspektivu a strukturovanější způsob vytváření aplikací. Jeho konzistentní a jasná architektura vás vede k tomu, jak byste měli vytvářet své aplikace. Vue vyzývá uživatele, aby dodržovali osvědčené postupy a také prosazuje určité konvence.

K vytvoření aplikace Vue potřebujete vue-cli. Než začnete vytvářet svou první aplikaci Vue, ujistěte se, že máte Node.js.

Spusťte tyto příkazy;

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

Nyní můžete aplikaci otevřít ve svém oblíbeném editoru kódu.

Toto je struktura aplikace Vue;

Kód pro vaši aplikaci Vue bude umístěn ve složce src. Najdete zde také složku komponent, kam budete přidávat všechny své komponenty a psát kód.

#3. Výkon

React a Vue jsou rychlé; většina lidí si nemusí všimnout rozdílů ve výkonu. Oba používají virtuální DOM. Vykreslování v React i Vue je vysoce optimalizované.

Aplikace React je malá, po zkompilování má velikost asi 1-2 MB. Velikost balíčku se však může zvýšit, když přidáte závislosti z knihoven třetích stran, jako jsou Redux a React-Router.

Základní aplikace Vue má přibližně 16 kb. Vue poskytuje interní nástroje pro řízení státu. Můžete však také použít externí nástroje, které zvětší velikost aplikace.

  Jak odstranit cívku s návrhem na Instagramu

#4. Řízení státu

Správa stavu sleduje a aktualizuje všechna data použitá k vykreslení webové aplikace. Například nástroj pro správu stavu může kontrolovat uživatelská vstupní data a aktualizovat stav. Dobrým příkladem je počítadlo, které každým kliknutím zvyšuje číslo na obrazovce.

V Reactu můžete použít Local State Management, pokud je váš malý. S rostoucí velikostí aplikace však potřebujete externí knihovnu, jako je Redux nebo MobX pro správu stavu.

Vue má vestavěný systém reaktivity pro řízení stavu v malých aplikacích. Se zvyšující se složitostí vaší aplikace Vue však ke správě stavu potřebujete externí knihovnu, jako je Vuex.

#5. Testování

React a Vue nabízejí testovací rámce, které zajistí vývojářům vytváření webových aplikací s malým počtem chyb. Tyto dva rámce podporují testování jednotek, testování integrace a testování typu end-to-end. Některé testovací rámce, jako je Jest, lze použít v aplikacích React a Vue.

React nemá žádný oficiální testovací rámec, ale funguje perfektně s Enzyme, Jest a React Testing Library.

Pro aplikace Vue je oficiální testovací knihovnou Vue Test Utils. V závislosti na vašich potřebách však stále můžete používat jiné knihovny.

React má velmi velkou komunitu založenou na aktivitě na svém profilu GitHub. Projekt má přes 43,5 tisíc forků a přes 208 tisíc hvězd. Mimo GitHub má tato platforma velkou sledovanost na sociálních platformách, jako je Discord, Facebook a LinkedIn.

Vue má rostoucí sledovanost. Komunita je však menší než komunita Reactu. Rychlý pohled na tuto platformu na GitHubu ukazuje, že má více než 37,9 tisíc hvězdiček a více než 6,9 tisíc forků. Platforma nabízí pomoc prostřednictvím svého kanálu Discord a DEV Community.

#7. Nástroje

React má větší ekosystém nástrojů a knihoven. Tyto nástroje jsou v různých kategoriích. Pokud například chcete nástroje pro správu stavu, můžete použít nástroje jako Redux, MobX nebo Zustand. React má více nástrojů pro ladění, jako jsou React DevTools a Redux DevTools.

Vue má menší ekosystém, ale téměř vše, co potřebujete k vytvoření funkčního uživatelského rozhraní. Ke generování aplikace Vue můžete použít nástroje Vite, Vue CLI nebo dokonce Nuxt.js. Svou aplikaci Vue můžete také ladit pomocí Vue DevTools.

#8. Křivka učení

React i Vue mají jedinečné učební vzorce/koncepty, kterým musí vývojáři rozumět.

React má strmější křivku učení, protože představuje JSX, novou syntaxi. JSX umožňuje vývojářům psát HTML a JavaScript do stejného souboru. React má mnoho zdrojů a pro studenty, kteří právě začínají, může být zahlcující. Abyste z Reactu vytěžili to nejlepší, ujistěte se, že se učíte jednu věc po druhé.

  Jak odstranit všechny tweety z Twitteru

Vue se považuje za snadno naučitelný a postavený na standardním HTML, CSS a JavaScriptu. HTML šablona Vue je podobná HTML, takže je vhodná pro začátečníky. Platforma má také stručnou a jasnou dokumentaci.

Proč používat React?

  • Architektura založená na komponentách: React vám umožňuje rozdělit kód na malé, opakovaně použitelné prvky.
  • Flexibilní: React je bez názorů, což vám dává flexibilitu při strukturování kódu.
  • Velká komunita: React má velkou komunitu, nástroje a knihovny, které usnadňují vytváření aplikací.
  • Virtuální DOM: Virtuální DOM zajišťuje, že React aktualizuje a vykresluje pouze změněné komponenty. Díky tomu je aplikace React rychlá.

Omezení React

  • Strmá křivka učení pro začátečníky.
  • Fragmentace komunity je způsobena tím, že mnoho knihoven a rámců dosahuje stejných cílů.

Proč používat Vue?

  • Snadno se učí: Vue používá standardní HTML, což usnadňuje učení začátečníkům.
  • Architektura založená na komponentách: Vue vám umožňuje rozdělit kód na malé, opakovaně použitelné prvky.
  • Progresivní: Komponenty Vue můžete snadno přidat ke stávajícímu projektu nebo dokonce ke starším kódovým základnám.

Omezení Vue

  • Malá komunita
  • Málo možností nářadí

Z výše uvedeného srovnání jste si možná všimli některých případů, kdy React vyhraje. Na druhou stranu existuje několik oblastí, kde Vue vítězí. Můžeme je shrnout jako;

Kdy použít React

  • Hledáte knihovnu se skvělou komunitou: Skutečnost, že React vytvořila a spravuje Meta, dříve Facebook, mu dala popularitu oproti jiným frameworkům/knihovnám. React má velkou sledovanost; když uvíznete, pravděpodobně najdete pomoc na různých fórech.
  • Hledáte knihovnu s více pracovními pozicemi: Popularita Reactu způsobila, že ji přijalo mnoho společností. Pokud jste student a chcete knihovnu s mnoha zaměstnáními, React může být lepší volbou než Vue.
  • Chcete platformu s velkou sbírkou knihoven: Velká sledovanost Reactu také přilákala vývojáře, kteří vybudovali knihovny a nástroje pro rozšíření její použitelnosti. Ekosystém Reactu je větší než ekosystém Vue a pravděpodobně budete mít z čeho vybírat, protože můžete najít několik knihoven vykonávajících stejnou funkci.

Kdy použít Vue

  • Chcete progresivní rámec: Progresivní přístup usnadňuje přidávání Vue nebo jeho komponent do stávajícího projektu. Vue je tedy dobrou volbou, jak přidat nový rámec do vašeho staršího projektu.
  • Hledáte framework, který se snadno naučíte: Vue je snazší se naučit ve srovnání s Reactem. Rámec používá HTML šablony a je tedy snadné se jej naučit, pokud pocházíte z CSS a HTML.
  • Chcete framework s malou velikostí balíčku: Velikost balíčku aplikace ovlivňuje její výkon. Vue se hodí, pokud vytváříte aplikaci, kde jsou rychlost a výkon klíčové díky malé velikosti balíčku.

Zabalit se

Věříme, že poznáte rozdíly mezi Reactem a Vue. Výběr mezi těmito dvěma frameworky/knihovnami bude záviset na vašem vkusu, povaze aplikace, kterou chcete vytvořit, a vašich úrovních ovládání.

Můžete se podívat na náš článek o React vs. Next.js.