Tento článek vznikl ve spolupráci se společností Sencha. Děkujeme, že podporujete partnery, díky nimž je SitePoint možný.
JavaScript je technologie, která je srdcem dnešních svižných a rychlých webových aplikací. Existuje nespočet frameworků a knihoven uživatelského rozhraní pro vytváření komplexních, reaktivních aplikací, které se dobře škálují.
Některé vám pomohou psát efektivnější a lépe udržovatelný kód. Nebo potřebujete pomoci s návrhem sady konzistentních, interoperabilních a rychlých komponent uživatelského rozhraní. Téměř v každé situaci můžete najít možnost, která udělá velkou část těžké práce za vás. Není třeba začínat od nuly a znovu vynalézat kolo.
Nejoblíbenější dostupné rámce JavaScriptu představují některé společné schopnosti. Zejména:
- umějí udržovat synchronizovaný stav a zobrazení
- nabízejí funkce směrování
- umožňují vývojářům vytvářet, opakovaně používat a udržovat komponenty uživatelského rozhraní, které efektivně a rychle reagují na interakci uživatele.
Počet dostupných frameworků JS je vysoký a tento počet stále roste. Podívejte se na tyto možnosti. Pro zvědavce jsem uvedl jak stabilní, populární knihovny, tak novější možnosti.
Představíme si elegantní framework JavaScriptu podnikové úrovně – Ext JS od společnosti Sencha.
Ext JS by Sencha
Potřebujete vytvořit webovou aplikaci, která zpracovává velké množství dat, a potřebujete výkonné a flexibilní nástroje front-endu pro jejich zobrazení a práci s nimi?
Sencha Ext JS je popisován jako…
nejkomplexnější framework JavaScriptu pro vytváření datově náročných, multiplatformních webových a mobilních aplikací pro jakékoli moderní zařízení. Ext JS obsahuje více než 140 předintegrovaných a otestovaných vysoce výkonných komponent uživatelského rozhraní.
Mezi tyto komponenty patří např:
- kalendář HTML5
- mřížky
- stromy
- seznamy
- formuláře
- menu
- panely nástrojů
- a mnoho dalšího
Ext JS je spolehlivý placený framework, který je vybaven vynikajícími dokumenty, výukovými programy a balíčky podpory. Nedávné testy ukázaly, že datová mřížka Ext JS je 300× rychlejší než u předních konkurentů. Ve skutečnosti její Virtual Scrolling experience načte a zobrazí velké množství dat za méně než sekundu.
Mezi výhody Ext JS patří:
- rychlý a plynulý vývoj. Užijte si bezproblémovou integraci mezi podnikovým frameworkem a nejmodernějšími komponentami a nástroji.
- komplexní sada bezpečných komponent. Nikdy nebudete muset vycházet z frameworku, abyste našli nějaký chybějící widget nebo funkci.
- skvělé možnosti návrhu díky obsaženým integrovaným nástrojům. Sencha Architect nabízí možnost přetahování. Sencha Stencils umožňuje vývojářům vytvářet makety, styly, prototypy a testovat koncepty uživatelského rozhraní.
- úžasné nástroje pro jednotkové a end-to-end testování díky aplikaci Sencha Test.
- správce rozvržení. Spravujte zobrazení dat a obsahu v různých prohlížečích a velikostech obrazovky. Responzivní konfigurační systém přizpůsobí rozhraní orientaci zařízení a velikosti okna prohlížeče.
- snadné dosažení shody s přístupností pomocí balíčku Ext JS ARIA
- robustní datový balíček, který odděluje komponenty uživatelského rozhraní od datové vrstvy.
Další informace o frameworku Ext JS najdete na jeho stránkách.
React
React je mezi vývojáři front-endu nesmírně populární. Je to open-source knihovna JavaScriptu pro vytváření bleskurychlých, interaktivních uživatelských rozhraní. Knihovnu React poprvé vytvořil Jordan Walke, softwarový inženýr pracující pro společnost Facebook. Poprvé byla nasazena v newsfeedu Facebooku v roce 2011 a na Instagramu v roce 2012. Používají ho například společnosti Netflix, Airbnb, Instagram a New York Times.
Důvody, proč si pro svůj příští projekt vybrat právě React, jsou následující:
- React se rychle učí a používá. Je to JavaScript s malým API.
- Kódové komponenty jsou stabilní a opakovaně použitelné. Jejich vytváření a údržba je díky deklarativní syntaxi API hračka.
- React podporuje velká společnost a silná komunita.
- Knihovna je stack agnostic, umí se vykreslovat i na serveru pomocí Node.js a v mobilních aplikacích pomocí React Native.
Angular
Angular je bezplatný open-source framework od Googlu, který funguje jak pro desktop, tak pro mobilní zařízení.
Je tu křivka učení, včetně seznámení se s TypeScriptem, nadmnožinou jazyka JavaScript. Přesto zůstává Angular skvělým frameworkem pro práci. Zde jsou některé důvody, proč ho používat:
- pro různé platformy – progresivní webové aplikace, nativní mobilní aplikace i desktop
- nabízí rychlost a výkon
- má skvělé funkce, jako jsou filtry, obousměrné vázání dat, direktivy a další
- dává k dispozici úžasné nástroje pro rychlejší vývoj
- má plnou podporu od společnosti Google a stojí za ním silná komunita vývojářů.
Pro více informací si nenechte ujít Úvod do jazyka Angular:
Vue
Vue JS je svobodný a open-source progresivní framework JavaScriptu, který vytvořil Evan You. Používá syntaxi šablon (jako Angular) a spoléhá na architekturu založenou na komponentách (jako React).
Takto se Vue popisuje na vlastní stránce repozitáře GitHub:
Vue (vyslovuje se
/vjuː/, jako view) je progresivní framework pro vytváření uživatelských rozhraní. Je od základu navržen tak, aby byl postupně osvojitelný, a lze jej snadno škálovat mezi knihovnou a frameworkem v závislosti na různých případech použití. Skládá se z přístupné základní knihovny, která se zaměřuje pouze na vrstvu zobrazení, a ekosystému podpůrných knihoven, který vám pomůže vypořádat se se složitostí rozsáhlých jednostránkových aplikací.
Tady jsou některé z nejsilnějších stránek Vue:
- přátelský k vývojářům. Pokud znáte webové jazyky (HTML, CSS a JavaScript), stačí vám dokumentace k Vue k tomu, abyste mohli ihned začít tvořit.
- můžete jej postupně integrovat v rámci projektu. Snadno se škáluje od knihovny k plnohodnotnému frameworku.
- je malý a přichází se superrychlým virtuálním DOM.
- má za sebou úžasnou komunitu, díky které si ho můžete stabilně osvojit.
- nabízí skvělou dokumentaci.
Pokud se chcete ponořit hlouběji, přečtěte si článek Jak poznat, zda je Vue.js je ten správný framework pro váš příští projekt, napsala Karolina Gawron.
Ember
Ember, který v prosinci 2011 vydali Yehuda Katz a Tom Dale, je:
Framework pro ambiciózní webové vývojáře.
Ember.js je produktivní, bitvou prověřený JavaScriptový framework pro tvorbu moderních webových aplikací. Obsahuje vše, co potřebujete k vytváření bohatých uživatelských rozhraní, která fungují na jakémkoli zařízení.
Tento framework JavaScriptu je zdarma, má otevřený zdrojový kód a stojí za ním silná komunita. Zde jsou některé z důvodů, proč je Ember mezi vývojáři úspěšný:
- využívá přístup konvence nad konfigurací, který prosazoval David Heinemeier Hansson. Jeho cílem je snížit počet rozhodnutí, která musí vývojář udělat (bez obětování flexibility).
- téměř vše, co potřebujete k nastavení aplikace, je dodáváno s Emberem hned po vybalení.
- zpětně kompatibilní.
- rychle přejímá nejnovější webové standardy a funkce JavaScriptu.
- nabízí skvělé dokumenty a zdroje.
Svelte 3
Ačkoli rychle roste, Svelte 3 je nováčkem na bloku frameworků. Rich Harris uvolnil Svelte v listopadu 2016 jako open-source projekt. Verze 3 vyšla v dubnu 2019 a byla kompletně přepracována.
Svelte funguje jinak než většina dosud uvedených frameworků. Konkrétně:
Pokud tradiční frameworky jako React a Vue vykonávají většinu své práce v prohlížeči, Svelte tuto práci přesouvá do kroku kompilace, ke kterému dochází při sestavování aplikace.
Mnoho frameworků používá techniky, jako je virtuální rozlišování DOM. Svelte místo toho chirurgicky aktualizuje DOM, když se změní stav vaší aplikace. Kompilace kódu vytváří znatelné výkonnostní výhody.
Svelte je rychlý a začátečníci s ním mohou začít pracovat. Můžete vytvářet komponenty bez spousty šablonovitého kódu. Stačí použít HTML, CSS a JavaScript. Na webu Svelte najdete zdroje vhodné pro začátečníky. Ty zahrnují výukový program, příklady a podrobné rozhraní API pro zkušenější vývojáře Svelte. Chcete-li získat pomoc a podporu, můžete se připojit k vyhrazenému serveru Discord.
Závěr
Výběr frameworku je vždy okolnostní rozhodnutí. Zahrnuje věnování pozornosti tomu, jaké jsou výzvy vašeho konkrétního projektu. Znamená to také zvážit zkušenosti a preference vašeho týmu.
Pokud například váš tým potřebuje vytvářet datově náročné projekty na podnikové úrovni, které potřebují bezpečný, spolehlivý a komplexní framework s velkou sadou vzájemně dobře spolupracujících komponent, je Ext JS od společnosti Sencha skvělou volbou. Nikdy nebudete muset vycházet z rámce a hledat komponenty. Pro projekty, které začínají v malém, ale potřebují flexibilitu a možnosti škálování, by mohl dobře fungovat Vue. A pokud má váš front-endový tým rozsáhlé zkušenosti s Reactem, mohla by být volba Reactu tou nejlepší volbou.
Máte nějaké další JS UI frameworky nebo knihovny, které byste chtěli doporučit? Které z nich jste jako vývojáři používali nejčastěji? Dejte nám vědět na Twitteru.