Programování

Beyond jQuery: Expert guide to JavaScript frameworks

Charakteristickou vlastností opravdu dobrého programátora je lenost. To však neznamená hloupý nebo ignorantský. Opravdu dobrý líný programátor nepíše (pak je třeba odladit a otestovat) 100 řádků kódu, když to udělá 10. Ve světě JavaScriptu bude líný vývojář spoléhat na efektivní, dobře otestovaný a dobře podporovaný rámec, aby se vyhnul neustálému objevování řešení běžných problémů.

Rámec „rozděluje“ velkou část jemnozrnné funkčnosti jazyka JavaScript do volání metod, čímž snižuje množství kódu, který líný programátor potřebuje k zápisu, testování a ladění. Před využitím této výhody je třeba vyjasnit dvě překážky: zvolit rámec pro svůj účel a naučit se ho.

Jakmile jste se naučili rámec, je samozřejmé držet se všeho, co vyvinete, abyste se nemuseli učit něco jiného, ​​ale to není vždy užitečné. Jednou ze stop, která říká, že pro svůj aktuální úkol používáte nesprávný rámec, je ve skutečnosti to, že děláte hodně práce. Tak buďte opravdu líný a stále se učit.

Trochu historie JavaScriptu

Historie JavaScriptu sahá až k vývojovým pracím, které Brendan Eich provedl na jazyce Mocha pro společnost Netscape pro webové prohlížeče. Mocha byl vydán jako LiveScript později v tomto roce a přejmenován na JavaScript, když Sun udělil Netscape licenci na ochrannou známku. Pokusit se spojit lehký interpret jazyka JavaScript podobný C s nepříbuznou těžkou Javou - objektově orientovaný, tokenem kompilovaný jazyk - pomocí podobného jména se v roce 1995 zdálo jako dobrý nápad pro marketingové účely, ale v průběhu let se tento výběr nezpůsobil žádný konec zmatku.

Vývoj JavaScriptu v příštím desetiletí byl poznamenán neshodami mezi implementátory prohlížeče a poměrně slabým úsilím standardů ECMA. To, co změnilo tuto malátnost a obnovilo energii jazyka, byl vzestup Dynamic HTML a Ajaxu v polovině 2000, následovaný rychlým zavedením open source knihoven JavaScriptu, jako jsou Prototype, jQuery, Dojo a MooTools, jejichž cílem bylo vytvořit Dynamic HTML a Ajax se snadněji používají a poskytují „widgety“ pro JavaScript, které by zlepšily funkčnost ovládacích prvků formuláře HTML.

Ačkoli Netscape vydal server JavaScriptu krátce po JavaScriptu pro prohlížeč, jazyk se pro back-endové použití opravdu nerozběhl, dokud od roku 2009 nevznikl Node.js. Část toho, co Node.js přitahovalo, bylo používání Google vysoce vyladěný JavaScriptový modul V8 pro moduly knihovny s jádrovým kódem v poměrně přenosném C ++.

Tato prohlídka rámců JavaScriptu je pokusem o pochopení dnešních hlavních knihoven JavaScriptu ve třech kategoriích: ty, které běží na serverech Node.js, ty, které fungují v prohlížečích, a ty, které podporují nativní nebo hybridní mobilní aplikace.

Node.js rámce

Node.js je serverová technologie založená na JavaScriptu a C ++, která od svého zavedení (do bouřlivých ovací) od autora Ryana Dahla na evropském JSConf v listopadu 2009 přilákala značnou pozornost a podporu. Node.js se vyznačuje architektura založená na událostech schopná asynchronního I / O, malá paměťová stopa a vysoká propustnost a škálovatelnost pro webové aplikace.

Zatímco Node.js má všechny součásti potřebné k implementaci webového serveru, psaní této vrstvy vyžaduje nějakou práci. TJ Holowaychuk vydal Express 1.0 Beta v červenci 2010 a brzy se stal „výchozím“ back-end serverem pro Node.js a součástí zásobníku MEAN s databází MongoDB a front-endovým rámcem Angular.JS.

Různí vývojáři a organizace však mají různé potřeby. Express přímo nebo nepřímo vytvořil Locomotive, Hapi, Koa, Kraken a Sails.js. Meteor je zcela odlišný, i když také běží na Node.js.

Vyjádřit. Express je minimální a flexibilní rámec webových aplikací Node.js, který poskytuje robustní sadu funkcí pro vytváření jednostránkových, vícestránkových a hybridních webových aplikací. Express API se zabývá webovou aplikací, požadavky a odpověďmi HTTP, směrováním a middlewarem. Od verze Express 4.x je podporovaný middleware pro Express umístěn v řadě samostatných úložišť.

Vynořilo se několik vidlic Express a doplňků pro Express, včetně Locomotive, Hapi a Koa. Koa byl vytvořen jedním z hlavních přispěvatelů do Expressu.

Express je starší než jeho potomci a má větší stopu. Má však také větší komunitu a větší stabilitu. Neustále vidím Express začleněný do jiných frameworků a nástrojů bez komentáře, jako by to byla jediná možná volba pro stavbu webového serveru na Node.js. Na GitHubu má framework více než 23 000 hvězd a 4 000 vidlic.

Hapi. Hapi je snadno použitelný rámec zaměřený na konfiguraci se zabudovanou podporou pro ověřování vstupů, ukládání do mezipaměti, ověřování a další základní vybavení pro vytváření webových aplikací a služeb. Hapi umožňuje vývojářům soustředit se na psaní opakovaně použitelné aplikační logiky vysoce modulárním a normativním způsobem. Byl vyvinut společností Walmart Labs a je dobrou volbou pro velké týmy a velké projekty.

Hapi byl původně postaven na Express, ale později byl přepracován tak, aby byl samostatný. Je založen na myšlenkách, že „konfigurace je lepší než kód“ a „obchodní logika musí být izolována od transportní vrstvy.“ Ve výše uvedeném příkladu si všimněte, jak jasná a čistá je konfigurace tras serveru, která se zobrazí v kódu.

Koa. Koa je nový webový rámec navržený týmem za Expressem, ale nezávislý na kódu Express. Koa si klade za cíl být menším, expresivnějším a robustnějším základem pro webové aplikace a API. Koa používá generátory ES6 pro middleware, místo aby používala zpětná volání Node.js. Následuje aplikace „ahoj, svět“ Koa pomocí generátoru, který dělá a výnos dále předat řízení dalšímu generátoru:

Rozdíl mezi generátory middlewaru, jak je používá Koa, a zpětná volání, jak používají Express a Connect, spočívá v tom, že získáte větší flexibilitu s generátory. Například Connect jednoduše předá řízení řadou funkcí, dokud se jeden nevrátí, zatímco Koa získá řízení „po proudu“, pak řízení teče zpět „po proudu“. Ve výše uvedeném příkladu x-response-time „zabalí“ generátor odezvy s výnos dále prohlášení označující hovor. Výtěžnost je flexibilnější než explicitní volání funkcí, protože usnadňuje vložení dalšího generátoru do sekvence - například webový záznamník mezi časovačem a odpovědí.

Kraken. Otevřený zdrojový projekt PayPal, Kraken je bezpečná a škálovatelná vrstva, která rozšiřuje Express tím, že poskytuje strukturu a konvenci, podobně jako lokomotiva. Ačkoli je Kraken hlavním pilířem jeho rámce, lze samostatně použít i následující moduly: Lusca (zabezpečení), Kappa (NPM proxy), Makara (LinkedIn Dust.js I18N) a Adaro (LinkedIn Dust.js Templating).

Kraken se spoléhá jo generovat projekty, jak je znázorněno na snímku obrazovky vlevo. Stejně jako lokomotiva organizuje své projekty do konvenčních adresářů podobných Rails, včetně modelů, řadičů a konfigurace. Jak je generováno, Kraken navazuje na Express jako standardní middleware, definovaný jako aplikace, který pak má své app.use () a app.listen () volané metody. Každá trasa na serveru Kraken žije ve svém vlastním souboru ve složce řadičů.

Lokomotiva. Jako webový rámec pro Node.js podporuje Locomotive vzory MVC, trasy RESTful a konvenci nad konfigurací (jako Rails), zatímco se bez problémů integruje do jakékoli databáze a šablony. Lokomotiva staví na Express a Connect, což je jednoduchý rámec lepidla pro middleware používaný řadou rámců Node.js.

Lokomotiva přidává do Expressu nějakou strukturu podobnou Ruby on Rails, kterou můžete vidět na obrázku výše, která Expressu jinak chybí. Zobrazení lokomotivy jsou často vložené soubory JavaScriptu (html.ejs), jak je znázorněno zde, ale lokomotiva podporuje také Jade a další kompatibilní šablony pro Express. Funkce REST je řízena trasami, jak je tomu obvykle na serverech založených na Express. S lokomotivou můžete použít libovolnou vrstvu databáze a vrstvu ORM (objektově-relační mapování). Průvodce ukazuje použití MongoDB s Mongoose a také práci s Passportem pro ověřování uživatelů.

Meteor. Meteor vám nabízí radikálně jednodušší způsob, jak vytvářet mobilní a webové aplikace v reálném čase, zcela v JavaScriptu, z jedné kódové základny. Spíše než posílat HTML po drátu, Meteor odesílá data ze serveru, aby je klient mohl vykreslit. Kromě samostatného běhu se Meteor může integrovat s AngularJS a React. Meteor není nic jako Express, i když je také postaven na vrcholu Node.js a podporuje šablony Handlebars, Blaze a Jade.

Meteor umožňuje rychlé prototypování a produkuje multiplatformní (Web, Android, iOS) kód. Integruje se s MongoDB, používá protokol distribuovaných dat a vzor publikování a odběru k automatickému šíření datových změn klientům, aniž by vývojář musel psát synchronizační kód. Na klientovi závisí Meteor na jQuery a lze jej použít s libovolnou knihovnou widgetů uživatelského rozhraní JavaScriptu.

Meteor je vyvíjen společností Meteor Development Group, startupem inkubovaným společností Y Combinator. Meteor je nyní dostatečně zralý na to, aby podporoval půl tuctu učebnic. Projekt přilákal na GitHub více než 32 000 hvězd.

Samotný Meteor je bezplatný software s otevřeným zdrojovým kódem, ale skupina Meteor jej zpeněžuje prodejem předplatných Meteor Galaxy DevOps, které zahrnují serverový prostor AWS a základní podporu Meteor, a samostatné předplatné podpory Premium.

Plachty. Js. S Sails můžete vytvářet vlastní podnikové aplikace Node.js. Je navržen tak, aby emuloval známý model model-view-controller (MVC) vzorců frameworků jako Ruby on Rails, ale s podporou požadavků moderních aplikací: datově řízená API s škálovatelnou architekturou orientovanou na služby. Je obzvláště vhodný pro vytváření chatovacích aplikací, řídicích panelů v reálném čase nebo her pro více hráčů, ale můžete jej použít pro jakýkoli projekt webových aplikací. Sails podporuje WebSockets a automaticky odesílá zprávy soketu na trasy vaší aplikace.

Stejně jako Rails, Sails hodnoty konvence nad konfigurací, poskytuje generátory a lešení pro rychlé sestavení rozhraní REST API z plánů a používá návrhový vzor MVC / active-record. Sails je postaven na Express a používá Waterline pro jeho ORM, s podporou pro ORM spojení. Waterline podporuje databáze SQL i NoSQL.

Sails je back-end framework navržený tak, aby byl kompatibilní s jakýmkoli front-endovým webovým frameworkem, jako je Angular nebo Backbone, nebo s mobilním zařízením, jako je iOS nebo Android, které se vám líbí nebo potřebujete podporovat. V pracích na Sails.js je jedna kniha, stále jen částečně dokončená.

Rámečky HTML5 / JavaScript

Tradičně si myslíme, že knihovny a rámce JavaScriptu běží v prohlížečích. Jak jsem již zmínil dříve, některé z nich - jQuery, Dojo a MooTools - vznikly v polovině dvacátých let především proto, aby bylo snazší psát Dynamic HTML a Ajax. Některé z nich se od té doby rozšířily do dalších oblastí funkcí, jako jsou widgety uživatelského rozhraní a rozhraní mobilních zařízení.

Jiné se objevily v poslední době. AngularJS je front-end framework, který rozšiřuje HTML o označení pro dynamická zobrazení a datovou vazbu. Backbone.js a Ember jsou navrženy pro vývoj jednostránkových webových aplikací. Reagovat je pro vytváření uživatelského rozhraní nebo zobrazení, obvykle pro jednostránkové aplikace.

Ještě další rámce sledují užší oblasti specializace. D3 provádí vizualizaci dat a animace. Socket.IO implementuje webové aplikace v reálném čase. Knockout je způsob na vysoké úrovni k propojení datového modelu s webovým uživatelským rozhraním. Polymer nabízí odlehčenou vrstvu „cukru“ nad API webových komponent, která vám pomůže při vytváření vlastních webových komponent. Podtržítko je knihovna s obecnými nástroji.

Jak můžete očekávat, máte rozpaky bohatství, ze kterých si můžete vybrat pro vývoj webových stránek na straně klienta.

AngularJS. AngularJS (nebo jednoduše Angular, mezi přáteli) je model Ajax framework JavaScript-view-whatever (MVW), který rozšiřuje HTML o označení pro dynamická zobrazení a datovou vazbu. Angular je obzvláště vhodný pro vývoj jednostránkových webových aplikací a propojení formulářů HTML s modely a řadiči JavaScriptu.

Podivně znějící model-pohled-jakýkoli vzor je pokusem zahrnout vzory model-pohled-řadič, model-pohled-pohledmodel (MVVM) a model-pohled-prezentátor (MVP) pod jednou přezdívkou. Zatímco programátoři rádi argumentují rozdíly mezi těmito třemi úzce souvisejícími vzory, vývojáři Angular se rozhodli odhlásit z diskuse.

V zásadě Angular automaticky synchronizuje data z vašeho uživatelského rozhraní (zobrazení) s vašimi objekty JavaScript (model) prostřednictvím obousměrné datové vazby. Abychom vám pomohli lépe strukturovat vaši aplikaci a usnadnili testování, Angular učí prohlížeč, jak provádět vkládání závislostí a inverzi ovládání.

Angular byl vytvořen společností Google a otevřen na základě licence MIT. Úložiště na GitHubu má více než 47 000 hvězd a 22 000 vidlic. Made with Angular představuje stovky webů vytvořených pomocí Angular, z nichž mnohé jsou vysoce postavené webové vlastnosti.