Osvědčené postupy:

Co zaručeně odradí uživatele? Pomalé uživatelské rozhraní, nekonzistentní písmo nebo špatně umístěná tlačítka. Je těžké vybrat „vítěze“, ale ve webové aplikaci, na které pracujete, nechcete mít ani jednu z nich.

Vytváření špatného uživatelského rozhraní se naštěstí můžete vyhnout použitím správného frontendového frameworku. Čtěte dál a zjistěte, který je můj oblíbený.

Co je to framework frontendu?

Frontendem se obvykle rozumí rozhraní, se kterým uživatelé komunikují při prohlížení webu. Obecně se frontend vztahuje k prohlížeči, ale může také znamenat uživatelské rozhraní aplikace. Dříve museli vývojáři psát všechny kódy ručně, aby vytvořili prvky, chování a vyměnili si data s backendem.

Frontendový framework tuto úlohu zjednodušuje, protože má předem napsané kódy, na kterých můžete stavět. Slouží jako základ, který obsahuje běžně používané prvky, jako je mřížka, předdefinovaná typografie a komponenty webu, jako jsou tlačítka, posuvníky a boční panely.

Ušetří vás vynalézání kola pro každý projekt.

Podíl frameworků uživatelského rozhraní na trhu

K dispozici je více než hrstka frameworků uživatelského rozhraní, ale 3 z nich jsou mezi komunitou vývojářů velmi oblíbené.

Vede React, který má v průměru 7 milionů stažení týdně. S výrazným náskokem překonává Vue.js a Angular, protože druzí v pořadí zaznamenali v průměru 1,5 milionu a 500 tisíc týdenních stažení.

React

React vyvinula společnost Facebook ve snaze vytvořit vysoce výkonné a efektivní uživatelské rozhraní. Je založen na JavaScriptu a umožňuje uživatelům vytvářet webové uživatelské rozhraní pomocí dynamických komponent HTML. Jakmile jsou komponenty navrženy, React je podle toho vykreslí na základě nejnovějších dat.

V Reactu jsou komponenty vytvořeny tak, aby zapouzdřovaly stav, ve kterém se nacházejí. Díky tomu si komponenty mohou předávat bohatá data a nevyžadují zpracování stavu pomocí objektového modelu dokumentu (DOM).

Facebook vydal první verzi Reactu v roce 2013. O několik let později byla představena verze React Native pro mobilní aplikace.

V případě Reactu je logika vykreslování úzce propojena s další logikou uživatelského rozhraní. To umožňuje bezproblémové provádění zpracování událostí, přechodu mezi stavy a přípravy dat pro zobrazení. To je odchylka od běžné praxe, kdy jsou značkovací a logické prvky uchovávány v oddělených souborech.

Ačkoli je praxe, kdy jsou značkovací i Javascriptové prvky v jednom souboru, zavrhována, v případě Reactu to zajišťuje přehlednost zobrazení.

Díky jednoduchosti frameworku React jej používají některé z největších společností, například Twitter, Pinterest, Netflix nebo Udemy.

Pros React

React používá virtuální DOM, což je výtah skutečného DOM pro vykreslování uživatelského rozhraní. Je efektivnější, protože zobrazení komponent na obrazovce trvá kratší dobu.
Jelikož jsou komponenty v Reactu zapouzdřené, lze je používat nezávisle na sobě bez jakýchkoli omezení.
React je modelován na základě funkcionálního programování definovaného neměnnými daty, čistými funkcemi a deklarativním stylem. Kódy vytvořené pomocí Reactu se proto snadno testují, jsou hlavní a lze je znovu použít.
Jako nejpopulárnější framework se React může pochlubit velkou globální komunitou. To také znamená, že budete mít k dispozici velkou nabídku balíčků s otevřeným zdrojovým kódem, se kterými můžete pracovat.
React proaktivně aktualizuje a vydává novější verze frameworku. Získáte tak včasné opravy chyb a vylepšení.
S Reactem můžete implementovat různé techniky vykreslování, jako je vykreslování na straně klienta(CSR), vykreslování na straně serveru(SSR) nebo dokonce generování statických souborů

Nevýhody Reactu

Pokud s Reactem začínáte, může být koncept míchání šablonování s logikou (JSX) na začátku matoucí.
Příliš velký důraz je kladen na jádro knihovny. Záležitosti jako směrování a globální správa stavu jsou delegovány na doprovodné knihovny. Odpovědnost za to, jak s jednotlivými knihovnami vyvíjet, padá ve velké míře na vývojáře.
S růstem projektu se může stát, že se ztratí „tok a datové komponenty“. Situaci ještě zhoršuje fakt, že dokumentace Reactu je často neúplná, ne díky jeho rychlému růstu.

Kdy použít React

React je ideální front-end framework pro tvorbu webové aplikace, u které se očekává vysoká interakce a často se měnící stavy. Jeho jedinečný přístup využívající virtuální DOM znamená, že webová aplikace může rychle reagovat na vstupy uživatelů a dynamicky vykreslovat uživatelské rozhraní.

Pokud vytváříte webovou aplikaci a máte málo času, bude pro vás React také vhodným řešením. Jeho opakovaně použitelné komponenty prokazatelně pomáhají zkrátit dobu vývoje.

Vue.js

Vue.js sice postrádá rozpoznatelná jména z hlediska osvojitelů, ale přesto je mezi vývojáři velmi oblíbeným frameworkem. Tento framework vytvořil v roce 2014 Evan You. Je jednoduchý a všestranný a umožňuje vývojářům řešit dynamické procesy bez potřeby dalších knihoven.

Stejně jako React je i Vue.js založen na virtuálním DOM. Kromě toho je odlehčený a podporuje obousměrné vázání dat. To, že jde o framework malých rozměrů, také pomáhá zvyšovat výkon frontendu.

Pros Vue.js

Vue.js má rozsáhlou a stručnou dokumentaci, která vám pomůže naučit se framework jako nováčkovi.
Používá virtuální DOM, což zvyšuje efektivitu vykreslování.
Vue.js je vysoce integrovatelný. Menší komponenty Vue.js lze bez problémů integrovat do stávající infrastruktury, aniž by to mělo nepříznivý vliv.
Nabízí reaktivní a složitelné komponenty zobrazení.
Šablony vytvořené z Vue.js jsou ve formátu HTML. To je plusový bod pro vývojáře, kteří znají jazyk HTML.
Velikost celého frameworku je pouhých 18 kB, díky čemuž je Vue.js neuvěřitelně lehký a zlepšuje výkon UX.

Nevýhody Vue.js

Komunita kolem Vue.js je poměrně malá, protože mu chybí popularita. Získat podporu kolegů je proto poměrně obtížné.
Většina diskusí o Vue.js se vede v čínštině, protože tento framework je mezi čínskými společnostmi velmi populární. Jazyková bariéra ztěžuje komunikaci vývojářům v jiných zemích.
Díky nedostatku zkušených vývojářů, komunitní podpoře a problémům se stabilitou komponent je riskantní používat Vue.js ve velkých projektech.

Kdy používat Vue.js

Vue.js je skvělý pro tvorbu jednoduchých jednostránkových aplikací. Má mělkou křivku učení, na které se vývojáři mohou rychle naučit pracovat s tímto frameworkem. Zatím však není určen pro složité projekty, protože získat odborníka na Vue.js není snadné.

Angular

Angular, který je vytvořen na základě jazyka TypeScript, je komplexní frontendový framework společnosti Google. Byl vydán v roce 2016 a je postaven na přístupu objektově orientovaného programování. Framework obsahuje obousměrnou datovou vazbu, která dobře funguje při vývoji webových a mobilních aplikací.

K dnešnímu dni je Angular jedním z nejkomplexnějších frameworků vůbec, protože vývojáři mohou řešit složité úlohy v rámci samotného frameworku. Při vývoji složitého UI/UX nejsou potřeba žádné další knihovny.

Pros Angularu

Aplikační logika a vrstva uživatelského rozhraní jsou díky architektuře Angular Model-View-Controller odděleny. Podporuje také oddělení obav.
Můžete obejít výchozí vykreslování DOM šablony zachycením vykreslovacích volání. Vykreslovač lze například nakonfigurovat tak, aby dynamicky měnil uživatelské rozhraní.
Angular má silnou podporu pro vytváření a zpracování dynamických formulářů. Šablony lze použít k vytváření nových formulářů na základě dynamicky se měnícího datového modelu.
Knihovna RxJS se instaluje společně s aplikací Angular. Jedná se o knihovnu, která podporuje reaktivní programování s pozorovatelnými proudy pro snadné zpracování asynchronního kódu.
Služby a Dependency Injection v Angularu umožňují snadné opakované použití, testování a údržbu komponent. Tato funkce pomáhá rozsáhlejším projektům, protože závislosti lze volat z externích zdrojů, a ne je vytvářet v rámci třídy.
Kompilování v předstihu v systému Angular vede k rychlejšímu načítání a vyšší bezpečnosti. Při tomto procesu se kód JavaScriptu vytváří ve fázi sestavení namísto po stažení z prohlížeče.

Nevýhody frameworku Angular

Někteří lidé mohou mít potíže s pochopením vícevrstvé architektury frameworku Angular, což může ovlivnit ladění frameworku. Ladění rozsáhlé aplikace založené na frameworku Angular může být úmorný proces.
Webové aplikace vytvořené pomocí frameworku Angular mají omezené možnosti SEO, které mohou být pro vyhledávače těžko dosažitelné.
Pro vývojáře, kteří se vyznají v JavaScriptu, bude Angular ve srovnání s Reactem a Vue poměrně obtížný.
Angular používá Typescript místo běžnějšího JavaScriptu.

Kdy použít Angular

Angular je framework, který se hodí při tvorbě velkých podnikových webových stránek nebo rozsáhlých projektů se složitou infrastrukturou. Je také vhodný pro projekty zahrnující progresivní webové aplikace (PWA).

Proč používáme React

React je bezpochyby náš oblíbený frontendový framework. Tady jsou důvody, proč ho milujeme:

Můžeme React používat v projektech různé složitosti. Funguje při vytváření MVP, startupu, podnikového řešení i e-commerce.
React nám dává tempo pro vytváření jednoduchých a škálovatelných řešení. Práce s Reactem byla vždy příjemným zážitkem.
Naši vývojáři už nemusí vytvářet komponenty od nuly. Obrovské množství knihoven a nástrojů Reactu drasticky zkracuje dobu vývoje.
Pomocí open-source komponent Reactu, jako jsou Ant Design a Material AI, můžeme pro naše produkty vytvářet úchvatná uživatelská rozhraní.
React je pravděpodobně nejoblíbenější front-end framework. Nemusíme se starat o údržbu a přizpůsobení, protože má živou komunitu vývojářů. Něco jiného je, pokud používáme Vue.js nebo Angular.
V porovnání s jinými frameworky je snazší najít pro náš tým vývojáře pro React.

Úspěšně jsme s Reactem vyvinuli několik projektů a zde jsou dva pozoruhodné.

Apprvl

Apprvl je aplikace vytvořená pro fotografy, která zjednodušuje schvalování jejich snímků klienty. Fotografové mohou prostřednictvím aplikace nahrávat svá díla a získávat komentáře sdílením vygenerovaných odkazů se svými klienty.

Naše řešení

Začínáme vytvořením hlavních funkčních částí na webové aplikaci, abychom mohli otestovat hypotézy s reálnými uživateli. Na základě zpětné vazby provedeme v částech příslušné změny.

Poté pokračujeme v budování škálovatelné backendové architektury a odstartujeme vývoj webové aplikace.

Na základě MVP jsme dokončili celý cyklus vývoje apprvl.

Výsledky

Pomocí Reactu jsme schopni dodat MPV, která splňuje všechny požadavky. Je dodán s minimem chyb v celém vývojovém cyklu a škálovatelný pro další vývoj.

Plai

Plai je bezplatný nástroj pro měření výkonu, který pomáhá rozvíjet, koordinovat a zapojovat vzdálený tým.

Naše řešení

Projekt jsme zahájili fází zjišťování, abychom identifikovali skutečné problémy a potřeby majitelů startupu.

Na základě zpětné vazby jsme k vytvoření webové aplikace použili React. To nám umožnilo vyvinout MVP velmi rychle.

Po otestování a ověření MVP náš tým pokračuje ve vývoji plné aplikace.

Výsledek

MVP je dodána v nejvyšší kvalitě a splňuje všechny požadavky. Dnes se webová aplikace dále rozrůstá, protože přidáváme další hodnotné funkce.

Shrnutí

Nemůžete si dovolit dodat nekvalitní uživatelské rozhraní nebo ztrácet příliš mnoho času vytvářením komponent pro webovou aplikaci. Využijte pohodlí a efektivitu frontendového frameworku při uvádění svých nápadů do života.

Neexistuje žádný univerzální framework. Pokud vytváříte jednoduchou aplikaci a máte velmi málo času, zvolte React nebo Vue.js. Angular zvolte pouze v případě, že budujete komplexní webové řešení, protože bolest při ladění aplikace je skutečná.

Pokud máte pochybnosti, rád vám poradím s nejlepší volbou. Napište mi sem.