Programovanie

Beyond jQuery: Odborný sprievodca rámcami JavaScript

Charakteristickou vlastnosťou skutočne dobrého programátora je lenivosť. To však neznamená hlúpe alebo ignorantské. Skutočne dobrý lenivý programátor nenapíše (potom je potrebné odladiť a otestovať) 100 riadkov kódu, keď to urobí 10. Skutočne lenivý vývojár sa bude vo svete JavaScript spoliehať na efektívny, dobre otestovaný a dobre podporovaný rámec, aby zabránil neustálemu objavovaniu riešení bežných problémov.

Rámec „oddeľuje“ veľkú časť jemnozrnnej funkčnosti jazyka JavaScript do volaní metód, čím sa znižuje množstvo kódu, ktorý lenivý programátor potrebuje na zápis, testovanie a ladenie. Pred využitím tejto výhody je potrebné prekonať dve prekážky: výber rámca pre váš účel a osvojenie si tohto princípu.

Keď ste sa naučili nejaký rámec, je zrejmé, že sa ho budete držať pri všetkom, čo rozvíjate, aby ste sa nemuseli učiť niečo iné, ale to nie je vždy užitočné. Jednou z indícií, ktoré hovoria, že pre svoju aktuálnu úlohu používate nesprávny rámec, je skutočnosť, že robíte veľa práce. Takže buďte naozaj lenivý a stále sa učiť.

Trochu histórie JavaScriptu

História JavaScriptu siaha do vývoja spoločnosti Brendan Eich, ktorá sa zaoberala jazykom Mocha pre spoločnosť Netscape s webovým prehliadačom v roku 1995. Mocha bol vydaný ako LiveScript neskôr v tom roku a premenovaný na JavaScript, keď Sun udelil spoločnosti Netscape licenciu na ochrannú známku. Pokúsiť sa spojiť ľahký interpret jazyka JavaScript podobný jazyku C s nepríbuzným ťažkým jazykom Java - objektovo orientovaným jazykom kompilovaným pomocou tokenov - pomocou podobného názvu sa javilo ako dobrý nápad pre marketingové účely v roku 1995, ale v priebehu rokov táto voľba nespôsobil koniec zmätku.

Vývoj JavaScriptu v nasledujúcom desaťročí bol poznačený nezhodami medzi implementátormi prehľadávača a pomerne slabým úsilím štandardov ECMA. To, čo zmenilo túto nevoľnosť a obnovilo napájanie jazyka, bol rozmach Dynamic HTML a Ajax v polovici 2000-tych rokov, nasledovaný rýchlym zavedením open source knižníc JavaScriptu, ako sú Prototype, jQuery, Dojo a MooTools, ktoré boli určené na vytváranie Dynamic HTML. a Ajax sa ľahšie používajú a poskytujú „widgety“ pre JavaScript, ktoré by vylepšili funkčnosť ovládacích prvkov formulára HTML.

Aj keď Netscape uvoľnil server JavaScript krátko po spustení JavaScriptu pre tento prehliadač, jazyk sa skutočne začal používať na back-endové účely až od vzostupu súborov Node.js, ktoré sa začali v roku 2009. Súčasťou atraktívneho súboru Node.js bolo použitie služieb Google vysoko vyladený JavaScriptový modul V8 pre moduly knižnice so základným kódom v pomerne prenosnom jazyku C ++.

Táto prehliadka rámcov jazyka JavaScript je pokusom o pochopenie hlavných súčasných knižníc jazyka JavaScript v troch kategóriách: tie, ktoré bežia na serveroch Node.js, tie, ktoré fungujú v prehliadačoch, a tie, ktoré podporujú natívne alebo hybridné mobilné aplikácie.

Rámce Node.js

Node.js je serverová technológia založená na JavaScripte a C ++, ktorá si od svojho uvedenia (do standing ovation) autora Ryana Dahla na európskom JSConf v novembri 2009 získala značnú pozornosť a podporu. Node.js sa vyznačuje architektúra založená na udalostiach schopná asynchrónneho I / O, malá pamäťová stopa a vysoká priepustnosť a škálovateľnosť pre webové aplikácie.

Zatiaľ čo Node.js má všetky prvky potrebné na implementáciu webového servera, napísanie tejto vrstvy si vyžaduje určitú prácu. TJ Holowaychuk vydal Express 1.0 Beta v júli 2010 a čoskoro sa stal „predvoleným“ serverom typu back-end pre Node.js a súčasťou zásobníka MEAN s databázou MongoDB a front-endovým rámcom Angular.JS.

Rôzni vývojári a organizácie majú rôzne potreby. Express priamo alebo nepriamo vytvoril Locomotive, Hapi, Koa, Kraken a Sails.js. Meteor je úplne iný, aj keď beží aj na Node.js.

Expresné. Express je minimálny a flexibilný rámec webových aplikácií Node.js, ktorý poskytuje robustnú sadu funkcií na vytváranie jednostránkových, viacstránkových a hybridných webových aplikácií. Express API sa zaoberá webovou aplikáciou, požiadavkami a odpoveďami HTTP, smerovaním a middlewarom. Od verzie Express 4.x sa podporovaný middlevér pre Express nachádza v niekoľkých samostatných úložiskách.

Na povrch vyplávalo niekoľko vidličiek Expressu a doplnkov Express, vrátane Locomotive, Hapi a Koa. Koa bol vytvorený jedným z hlavných prispievateľov do Expressu.

Express je starší ako jeho potomkovia a má väčšiu stopu. Napriek tomu má tiež väčšiu komunitu a väčšiu stabilitu. Neustále vidím Express začlenený do iných rámcov a nástrojov bez komentára, akoby to bola jediná možná voľba pre vytvorenie webového servera na Node.js. Na GitHub má rámec viac ako 23 000 hviezd a 4 000 vidličiek.

Hapi. Hapi je ľahko použiteľný rámec zameraný na konfiguráciu so zabudovanou podporou overovania vstupu, ukladania do pamäte cache, autentifikácie a ďalších základných zariadení na vytváranie webových aplikácií a aplikácií služieb. Hapi umožňuje vývojárom sústrediť sa na písanie opakovane použiteľnej logiky aplikácií vysoko modulárnym a normatívnym spôsobom. Bol vyvinutý spoločnosťou Walmart Labs a je dobrou voľbou pre veľké tímy a veľké projekty.

Hapi bol pôvodne postavený na vrchole Expressu, neskôr ho však prepracovali tak, aby bol samostatný. Je založený na myšlienkach, že „konfigurácia je lepšia ako kód“ a „obchodná logika musí byť izolovaná od transportnej vrstvy“. Vo vyššie uvedenom príklade si všimnite, ako jasná a čistá je konfigurácia trás servera v kóde.

Koa. Koa je nový webový rámec navrhnutý tímom stojacim za službou Express, ale nezávislý od kódu Express. Cieľom spoločnosti Koa je byť menším, expresívnejším a robustnejším základom pre webové aplikácie a API. Koa používa skôr generátory ES6 pre middleware, než aby používala spätné volania Node.js. Nasleduje aplikácia „ahoj, svet“, ktorá používa generátor, ktorý robí a výnos ďalej odovzdať riadenie ďalšiemu generátoru:

Rozdiel medzi generátormi middlewaru, ktoré používa spoločnosť Koa, a spätnými volaniami, ktoré používajú programy Express a Connect, spočíva v tom, že s generátormi získate väčšiu flexibilitu. Napríklad Connect jednoducho prechádza kontrolou cez sériu funkcií, kým sa jedna nevráti, zatiaľ čo Koa poskytuje kontrolu „po prúde“, potom riadenie prúdi späť „po prúde“. V príklade vyššie x-response-time „zabalí“ generátor odozvy s výnos ďalej vyhlásenie označujúce hovor. Výťažok je flexibilnejší ako explicitné volania funkcií, pretože umožňuje do sekvencie ľahko vložiť ďalší generátor - napríklad webový záznamník medzi časovačom a odpoveďou.

Kraken. Kraken je open source projekt PayPal. Je to bezpečná a škálovateľná vrstva, ktorá rozširuje Express tým, že poskytuje štruktúru a konvencie, podobne ako lokomotíva. Aj keď je Kraken hlavným pilierom jeho rámca, nasledujúce moduly je možné použiť aj samostatne: Lusca (bezpečnosť), Kappa (NPM proxy), Makara (LinkedIn Dust.js I18N) a Adaro (LinkedIn Dust.js Templating).

Kraken sa spolieha jaj na generovanie projektov, ako je znázornené na snímke obrazovky vľavo. Rovnako ako lokomotíva organizuje svoje projekty do konvenčných adresárov podobných Rails, vrátane modelov, ovládačov a konfigurácií. Kraken je vygenerovaný a spája sa s Expressom ako štandardný middleware definovaný ako aplikácia, ktorá má potom svoju app.use () a app.listen () metódy zvané. Každá trasa na serveri Kraken žije v samostatnom súbore v priečinku radičov.

Rušeň. Ako webový rámec pre Node.js podporuje Locomotive vzory MVC, trasy RESTful a konvencie týkajúce sa konfigurácie (napríklad Rails), pričom sa bezproblémovo integruje do akejkoľvek databázy a šablón. Lokomotíva stavia na platformách Express a Connect, čo je jednoduchý rámec pre lepidlo pre middleware používaný mnohými rámcami Node.js.

Lokomotíva pridáva do Expressu nejakú štruktúru podobnú Ruby on Rails, ktorú môžete vidieť na obrázku vyššie, ktorá Expressu inak chýba. Zobrazenia lokomotívy sú často vložené súbory JavaScriptu (html.ejs), ako je to znázornené tu, ale lokomotíva podporuje aj Jade a ďalšie kompatibilné šablónové motory pre Express. Funkcia REST je riadená trasami, ako je to obvykle na serveroch založených na serveri Express. S lokomotívou môžete použiť ľubovoľnú vrstvu databázy a vrstvu ORM (objektovo-relačné mapovanie). Sprievodca demonštruje použitie MongoDB s Mongoose, ako aj prácu s Passportom na autentifikáciu používateľa.

Meteor. Meteor vám ponúka radikálne jednoduchší spôsob vytvárania mobilných a webových aplikácií v reálnom čase, úplne v JavaScripte, z jednej kódovej základne. Namiesto odosielania HTML po sieti posiela Meteor klientovi dáta zo servera, ktoré sa majú vykresliť. Okrem samostatného chodu sa Meteor môže integrovať aj s AngularJS a React. Meteor nie je nič ako Express, aj keď je tiež postavený na vrchole Node.js a podporuje šablóny Handlebars, Blaze a Jade.

Meteor umožňuje rýchle prototypovanie a produkuje multiplatformový (web, Android, iOS) kód. Integruje sa s MongoDB pomocou protokolu distribuovaných údajov a vzoru publikovania a prihlasovania na automatické šírenie zmien údajov klientom bez toho, aby vývojár musel písať synchronizačný kód. Na klientovi závisí Meteor od jQuery a dá sa použiť s ľubovoľnou knižnicou widgetov používateľského rozhrania JavaScriptu.

Meteor je vyvíjaný spoločnosťou Meteor Development Group, startupom inkubovaným spoločnosťou Y Combinator. Meteor je teraz dosť vyspelý na to, aby podporil pol tucta učebných kníh. Tento projekt pritiahol na GitHub viac ako 32 000 hviezd.

Samotný Meteor je bezplatný softvér s otvoreným zdrojovým kódom, ale skupina Meteor ho speňažuje predajom predplatných Meteor Galaxy DevOps, ktoré zahŕňajú priestor servera AWS a základnú podporu Meteor, a samostatného predplatného podpory Premium.

Sails.js. Pomocou aplikácie Sails môžete vytvárať vlastné podnikové aplikácie Node.js. Je navrhnutý tak, aby napodobňoval známy model-view-controller (MVC) vzorcov rámcov ako Ruby on Rails, ale s podporou požiadaviek moderných aplikácií: dátovo orientovaných API s škálovateľnou architektúrou orientovanou na služby. Je obzvlášť vhodný na vytváranie chatovacích aplikácií, dashboardov v reálnom čase alebo hier pre viacerých hráčov, ale môžete ho použiť pre akýkoľvek projekt webových aplikácií. Plachty podporujú webové zásuvky a automaticky odosiela správy soketov na trasy vašej aplikácie.

Rovnako ako Rails, aj Sails hodnotí konvenciu nad konfiguráciou, poskytuje generátory a lešenia na rýchle zostavenie rozhraní REST API z plánov a používa návrhový vzor MVC / active-record. Plachty sú postavené na platforme Express a používajú pre svoju ORM vodovodnú linku s podporou pre pripojenie ORM. Waterline podporuje databázy SQL aj NoSQL.

Sails je back-end framework navrhnutý tak, aby bol kompatibilný s akýmkoľvek front-endovým webovým frameworkom, ako je Angular alebo Backbone, alebo mobilným zariadením, ako je iOS alebo Android, ktoré sa vám náhodou páčia alebo ktoré potrebujete podporovať. V dielach na stránkach Sails.js je jedna kniha, ktorá je stále len čiastočne dokončená.

Rámce HTML5 / JavaScript

Tradične si knižnice a rámce JavaScriptu myslíme ako spustené v prehliadačoch. Ako som už spomínal, niektoré z nich - jQuery, Dojo a MooTools - vznikli v polovici 2000-tych rokov predovšetkým kvôli tomu, aby sa ľahšie písali Dynamic HTML a Ajax. Niektoré z nich sa odvtedy rozšírili do ďalších oblastí funkcií, ako sú napríklad widgety používateľského rozhrania a rozhrania mobilných zariadení.

Ostatné vznikli v poslednej dobe. AngularJS je front-end framework, ktorý rozširuje HTML o značky pre dynamické zobrazenia a väzbu údajov. Backbone.js a Ember sú určené na vývoj jednostránkových webových aplikácií. Reagovať je na vytvorenie používateľského rozhrania alebo zobrazenia, zvyčajne pre jednostránkové aplikácie.

Ešte ďalšie rámce sledujú užšie oblasti špecializácie. D3 robí vizualizáciu údajov a animácie. Socket.IO implementuje webové aplikácie v reálnom čase. Knockout je spôsob na vysokej úrovni na prepojenie dátového modelu s webovým používateľským rozhraním. Polymer ponúka ľahkú vrstvu „cukru“ na vrchole API webových komponentov, ktorá pomáha pri vytváraní vlastných webových komponentov. Podčiarknutie je všeobecne použiteľná knižnica.

Ako možno čakáte, pri vývoji webu na strane klienta máte na výber z bohatstva, z ktorého si môžete vybrať.

AngularJS. AngularJS (alebo jednoducho Angular, medzi priateľmi) je model Ajax framework JavaScript-model-view-whatever (MVW), ktorý rozširuje HTML o značky pre dynamické zobrazenia a väzbu údajov. Angular je obzvlášť vhodný na vývoj jednostránkových webových aplikácií a na prepojenie formulárov HTML s modelmi a radičmi JavaScriptu.

Podivne znejúci model-pohľad-akýkoľvek vzor je pokus zahrnúť modely-pohľad-radič, model-pohľad-pohľadmodel (MVVM) a model-pohľad-prezentátor (MVP) vzory pod jednou prezývkou. Zatiaľ čo programátori radi argumentujú rozdielmi medzi týmito tromi úzko súvisiacimi vzormi, vývojári Angular sa rozhodli z diskusie odhlásiť.

V zásade Angular automaticky synchronizuje údaje z vášho používateľského rozhrania (zobrazenia) s vašimi objektmi (modelom) jazyka JavaScript prostredníctvom obojsmernej dátovej väzby. Aby sme vám pomohli lepšie štruktúrovať aplikáciu a uľahčili jej testovanie, Angular učí prehliadač, ako robiť vkladanie závislostí a inverziu riadenia.

Angular vytvoril Google a bol otvorený na základe licencie MIT. Úložisko na GitHube má viac ako 47 000 hviezd a 22 000 vidličiek. Made with Angular predstavuje stovky webov vytvorených pomocou Angular, z ktorých mnohé sú vysoko profilované webové vlastnosti.

$config[zx-auto] not found$config[zx-overlay] not found