Programmering

Beyond jQuery: En ekspertguide til JavaScript-rammer

Det definerende kendetegn ved en rigtig god programmør er dovenskab. Det betyder dog ikke dumt eller uvidende. Den rigtig gode dovne programmør skriver ikke (skal derefter debugge og teste) 100 linjer kode, når 10 gør det. I JavaScript-verdenen vil den virkeligt dovne udvikler stole på en effektiv, velprøvet og velunderstøttet ramme for at undgå konstant at genopfinde løsninger på almindelige problemer.

Frameworks "klumper" meget af den finkornede funktionalitet af JavaScript-sproget ind i metodekald, hvilket reducerer mængden af ​​kode, som den dovne programmør har brug for for at skrive, teste og fejle. Der er to forhindringer, der skal fjernes, før du høster den fordel: at vælge en ramme til dit formål og lære det.

Når du først har lært en ramme, er det oplagte kursus at holde fast ved det for alt, hvad du udvikler, så du ikke behøver at lære noget andet, men det er ikke altid nyttigt. Faktisk er et af sporene, der siger, at du bruger den forkerte ramme til din nuværende opgave, at du finder dig selv i at arbejde meget. Så vær virkelig doven og fortsæt altid med at lære.

En lille JavaScript-historie

JavaScript-historien går tilbage til udviklingsarbejde, som Brendan Eich udførte på Mocha-sproget for webbrowserfirmaet Netscape i 1995. Mocha blev frigivet som LiveScript senere samme år og omdøbt til JavaScript, da Sun tildelte Netscape en varemærkelicens. Forsøg på at binde den lette C-lignende JavaScript-fortolker til den ikke-relaterede tunge Java - et objektorienteret, token-kompileret sprog - ved hjælp af et lignende navn virkede som en god idé til markedsføringsformål i 1995, men gennem årene har dette valg forårsagede ingen ende på forvirring.

Udviklingen af ​​JavaScript i løbet af det næste årti var præget af uenigheder mellem browserimplementerne og en ret svag ECMA-standardindsats. Hvad der ændrede denne utilpashed og reenergiserede sproget var stigningen i Dynamic HTML og Ajax i midten af ​​2000'erne, efterfulgt hurtigt af introduktionen af ​​open source JavaScript-biblioteker som Prototype, jQuery, Dojo og MooTools, som var beregnet til at skabe dynamisk HTML og Ajax nemmere at bruge, og at levere "widgets" til JavaScript, der vil forbedre funktionaliteten af ​​HTML-formularkontroller.

Selvom Netscape udgav en JavaScript-server kort efter JavaScript til browseren, startede sproget ikke rigtig til back-end-brug, indtil Node.js begyndte i 2009. En del af det, der gjorde Node.js attraktivt, var brugen af ​​Googles højt indstillet V8 JavaScript-motor til biblioteksmoduler med kernekode i ret bærbar C ++.

Denne rundvisning i JavaScript-rammer er et forsøg på at give mening om nutidens store JavaScript-biblioteker i tre kategorier: dem, der kører i Node.js-servere, dem, der fungerer i browsere, og dem, der understøtter native eller hybrid mobile apps.

Node.js-rammer

Node.js er en JavaScript- og C ++ - baseret serverteknologi, der har tiltrukket en hel del opmærksomhed og støtte siden dens introduktion (til en stående ovation) af forfatter Ryan Dahl ved European JSConf i november 2009. Node.js er kendetegnet ved en begivenhedsdrevet arkitektur, der er i stand til asynkron I / O, et lille hukommelsesfodaftryk og høj kapacitet og skalerbarhed til webapplikationer.

Mens Node.js har alle de stykker, der er nødvendige for at implementere en webserver, kræver det noget arbejde at skrive dette lag. TJ Holowaychuk udgav Express 1.0 Beta i juli 2010, og det blev snart den "standard" back-end-server for Node.js og en del af MEAN-stakken med MongoDB-databasen og Angular.JS front-end-rammen.

Ikke desto mindre har forskellige udviklere og organisationer forskellige behov. Express har direkte eller indirekte skabt Locomotive, Hapi, Koa, Kraken og Sails.js. Meteor er helt anderledes, selvom det også kører på Node.js.

Express. Express er et minimalt og fleksibelt Node.js-webapplikationsrammer, der giver et robust sæt funktioner til opbygning af enkeltsidede, flersidede og hybride webapplikationer. Express API beskæftiger sig med webapplikationen, HTTP-anmodninger og svar, routing og middleware. Fra og med Express 4.x ligger den understøttede middleware til Express i et antal separate arkiver.

Adskillige gafler af Express og add-ons til Express er dukket op, herunder Locomotive, Hapi og Koa. Koa blev oprettet af en af ​​hovedbidragsydere til Express.

Express er ældre end sine scions, og det har et større fodaftryk. Ikke desto mindre har det også et større samfund og mere stabilitet. Jeg ser konstant Express indarbejdet i andre rammer og værktøjer uden kommentarer, som om det var det eneste mulige valg til at opbygge en webserver på Node.js. På GitHub har rammen mere end 23.000 stjerner og 4.000 gafler.

Hapi. Hapi er en brugervenlig, konfigurationscentreret ramme med indbygget understøttelse af inputvalidering, caching, godkendelse og andre vigtige faciliteter til opbygning af web- og servicesapplikationer. Hapi giver udviklere mulighed for at fokusere på at skrive genanvendelig applikationslogik på en meget modulær og ordinerende måde. Det blev udviklet af Walmart Labs og er et godt valg til store teams og store projekter.

Hapi blev oprindeligt bygget oven på Express, men blev senere redesignet til at være enkeltstående. Det er baseret på idéerne om, at "konfiguration er bedre end kode" og "forretningslogik skal isoleres fra transportlaget." I eksemplet ovenfor skal du bemærke, hvordan klar og ren konfigurationen af ​​serverruter vises i koden.

Koa. Koa er en ny webramme designet af teamet bag Express, men uafhængig af Express-koden. Koa sigter mod at være et mindre, mere udtryksfuldt og mere robust fundament for webapplikationer og API'er. Koa bruger ES6-generatorer til middleware i stedet for at bruge Node.js callbacks. Det følgende er en “hej, verden” Koa-applikation ved hjælp af en generator, der gør en udbytte næste at overføre kontrol til næste generator:

Forskellen mellem middleware-generatorer, som de bruges af Koa, og callbacks, som de bruges af Express og Connect, er at du får mere fleksibilitet med generatorer. For eksempel sender Connect simpelthen kontrol gennem en række funktioner, indtil man vender tilbage, mens Koa giver kontrol "nedstrøms", hvorefter kontrol strømmer tilbage "opstrøms." I eksemplet ovenfor "indpakker" x-responstiden responsgeneratoren med udbytte næste erklæring, der markerer opkaldet. Yielding er mere fleksibel end eksplicitte funktionsopkald, da det gør det let at indsætte en anden generator i sekvensen - for eksempel en weblogger mellem timeren og svaret.

Kraken. Et PayPal open source-projekt, Kraken er et sikkert og skalerbart lag, der udvider Express ved at levere struktur og konvention, ligesom Locomotive. Selvom Kraken er den vigtigste søjle i dets rammer, kan følgende moduler også bruges uafhængigt af hinanden: Lusca (sikkerhed), Kappa (NPM-proxy), Makara (LinkedIn Dust.js I18N) og Adaro (LinkedIn Dust.js Templating).

Kraken stoler på yo for at generere projekter, som vist på skærmbilledet til venstre. Ligesom lokomotiv organiserer det sine projekter i konventionelle Rails-lignende mapper, herunder modeller, controllere og konfiguration. Som genereret binder Kraken til Express som standard middleware, defineret som en app, som derefter har sin app.use () og app.listen () metoder kaldet. Hver rute i en Kraken-server lever i sin egen fil i controllermappen.

Lokomotiv. Som en webramme for Node.js understøtter Locomotive MVC-mønstre, RESTful ruter og konvention over konfiguration (som Rails), mens den integreres problemfrit med enhver database og skabelonmotor. Lokomotiv bygger på Express og Connect, som er en enkel limramme til middleware, der bruges af et antal Node.js-rammer.

Lokomotiv tilføjer til Express noget Ruby on Rails-lignende struktur, som du kan se på billedet ovenfor, som Express ellers mangler. Lokomotivvisninger er ofte indlejrede JavaScript (html.ejs) filer, som vist her, men Locomotive understøtter også Jade og andre kompatible skabelonmotorer til Express. REST-funktionaliteten styres af ruter, som det normalt er tilfældet i Express-baserede servere. Du kan bruge det ønskede database- og ORM-lag (objektrelationskortlægning) med Locomotive. Guiden demonstrerer brug af MongoDB med Mongoose samt arbejde med Passport til brugergodkendelse.

Meteor. Meteor giver dig en radikalt enklere måde at opbygge mobil- og webapps i realtid, helt i JavaScript, fra en kodebase. I stedet for at sende HTML via ledningen sender Meteor data fra serveren, som klienten kan gengive. Udover at køre stand-alone kan Meteor integreres med AngularJS og React. Meteor er ikke noget som Express, selvom det også er bygget oven på Node.js og understøtter styr, Blaze og Jade-skabeloner.

Meteor giver mulighed for hurtig prototyping og producerer cross-platform (Web, Android, iOS) kode. Det integreres med MongoDB ved hjælp af Distribueret dataprotokol og et publicerings-abonnementsmønster til automatisk at udbrede dataændringer til klienter uden at kræve, at udvikleren skriver nogen synkroniseringskode. På klienten afhænger Meteor af jQuery og kan bruges med ethvert JavaScript UI-widgetbibliotek.

Meteor er udviklet af Meteor Development Group, en opstart inkuberet af Y Combinator. Meteor er nu moden nok til at understøtte et halvt dusin vejledningsbøger. Projektet har tegnet mere end 32.000 stjerner på GitHub.

Meteor selv er gratis open source-software, men Meteor-gruppen tjener penge på det ved at sælge Meteor Galaxy DevOps-abonnementer, som inkluderer AWS-serverplads og grundlæggende Meteor-support og et separat Premium-supportabonnement.

Sails.js. Med Sails kan du oprette brugerdefinerede Node.js-apps i virksomhedsklasse. Det er designet til at efterligne det velkendte model-view-controller (MVC) mønster af rammer som Ruby on Rails, men med understøttelse af kravene til moderne apps: datadrevne API'er med en skalerbar, serviceorienteret arkitektur. Det er især godt til opbygning af chat-apps, dashboards i realtid eller multiplayer-spil, men du kan bruge det til ethvert webapplikationsprojekt. Sails understøtter WebSockets og sender automatisk socket-beskeder til din apps ruter.

Ligesom Rails værdsætter Sails konvention over konfiguration, giver generatorer og stilladser til hurtigt at opbygge REST API'er fra tegninger og bruger et MVC / aktiv-record designmønster. Sails er bygget oven på Express og bruger Waterline til sin ORM med understøttelse af ORM sammenføjninger. Waterline understøtter både SQL- og NoSQL-databaser.

Sails er en back-end-ramme designet til at være kompatibel med enhver front-end-web-framework, såsom Angular eller Backbone, eller mobilenhed, såsom iOS eller Android, som du tilfældigvis kan lide eller har brug for at støtte. Der er en bog i værkerne på Sails.js, stadig kun delvist komplet.

HTML5 / JavaScript-rammer

Vi tænker traditionelt på, at JavaScript-biblioteker og -rammer kører i browsere. Som jeg nævnte tidligere, opstod nogle af disse - jQuery, Dojo og MooTools - i midten af ​​2000'erne primært for at gøre Dynamic HTML og Ajax lettere at skrive. Nogle af disse er siden udvidet til yderligere funktionsområder, såsom brugergrænseflade-widgets og mobilenhedens grænseflader.

Andre er kommet for nylig. AngularJS er en frontend-ramme, der udvider HTML med markering til dynamiske visninger og databinding. Backbone.js og Ember er designet til at udvikle enkeltsidede webapplikationer. React er til opbygning af et brugergrænseflade eller en visning, typisk til applikationer med en side.

Stadig andre rammer forfølger smallere specialiseringsområder. D3 foretager datavisualisering og animationer. Socket.IO implementerer webapps i realtid. Knockout er en måde på højt niveau at linke en datamodel til et web-UI. Polymer tilbyder et let "sukkerholdigt" lag oven på Web Components API'erne for at hjælpe med at opbygge dine egne webkomponenter. Underscore er et bibliotek til almindelig brug.

Som du måske forventer, har du en forlegenhed over rigdom at vælge imellem til webudvikling på klientsiden.

AngularJS. AngularJS (eller simpelthen Angular, blandt venner) er en model-view-uanset (MVW) JavaScript Ajax-ramme, der udvider HTML med markering til dynamiske visninger og databinding. Vinklet er især godt til udvikling af web-applikationer på en side og linkning af HTML-formularer til modeller og JavaScript-controllere.

Det underligt klingende model-view-uanset mønster er et forsøg på at inkludere model-view-controller, model-view-viewmodel (MVVM) og model-view-presenter (MVP) mønstre under en moniker. Mens programmører elsker at argumentere for forskellene mellem disse tre nært beslægtede mønstre, besluttede Angular-udviklerne at fravælge diskussionen.

Dybest set synkroniserer Angular automatisk data fra din brugergrænseflade (visning) med dine JavaScript-objekter (model) gennem tovejs databinding. For at hjælpe dig med at strukturere din applikation bedre og gøre det let at teste, lærer Angular browseren, hvordan man gør afhængighedsinjektion og inversion af kontrol.

Angular blev oprettet af Google og open-source under MIT-licensen. Depotet på GitHub har mere end 47.000 stjerner og 22.000 gafler. Lavet med Angular viser hundredvis af websteder, der er bygget med Angular, hvoraf mange er profilerede webejendomme.