Programmering

Utover jQuery: En ekspertguide til JavaScript-rammer

Den definerende egenskapen til en virkelig god programmerer er latskap. Det betyr ikke dumt eller uvitende. Den virkelig gode lat programmereren skriver ikke (trenger da å feilsøke og teste) 100 kodelinjer når 10 vil gjøre det. I JavaScript-verdenen vil den virkelig late utvikleren stole på et effektivt, velprøvd og godt støttet rammeverk for å unngå å stadig finne opp løsninger på vanlige problemer.

Frameworks "deler" mye av den finkornede funksjonaliteten til JavaScript-språket til metodeanrop, og reduserer mengden kode den dovne programmereren trenger for å skrive, teste og feilsøke. Det er to hindringer å fjerne før du høster den fordelen: velge et rammeverk for formålet ditt, og lære det.

Når du har lært et rammeverk, er det åpenbare kurset å holde fast ved det for alt du utvikler, slik at du ikke trenger å lære noe annet, men det er ikke alltid nyttig. Faktisk, en av ledetrådene som sier at du bruker feil rammeverk for din nåværende oppgave, er at du gjør deg mye arbeid. Så vær egentlig lat og alltid fortsette å lære.

Litt JavaScript-historie

Historikken til JavaScript går tilbake til utviklingsarbeidet Brendan Eich gjorde på Mocha-språket for nettleserselskapet Netscape i 1995. Mocha ble utgitt som LiveScript senere det året og ble omdøpt til JavaScript da Sun ga Netscape en varemerkelisens. Å prøve å knytte den lette C-lignende JavaScript-tolken til den ubeslektede tungvekten Java - et objektorientert, token-kompilert språk - ved hjelp av et lignende navn virket som en god ide for markedsføringsformål i 1995, men gjennom årene har valget forårsaket ingen slutt på forvirring.

Utviklingen av JavaScript i løpet av det neste tiåret var preget av uenigheter mellom nettleserimplementørene og en ganske svak ECMA-standardinnsats. Det som forandret denne uvelheten og reenergiserte språket var økningen av Dynamic HTML og Ajax på midten av 2000-tallet, fulgt raskt av introduksjonen av JavaScript-biblioteker med åpen kildekode som Prototype, jQuery, Dojo og MooTools, som var ment å lage Dynamic HTML og Ajax enklere å bruke, og å tilby "widgets" for JavaScript som vil forbedre funksjonaliteten til HTML-skjemakontroller.

Selv om Netscape ga ut en JavaScript-server kort tid etter JavaScript for nettleseren, tok ikke språket virkelig fart for backend-bruk før økningen av Node.js startet i 2009. En del av det som gjorde Node.js attraktivt var bruken av Googles høyt innstilt V8 JavaScript-motor for biblioteksmoduler, med kjernekode i ganske bærbar C ++.

Denne omvisningen i JavaScript-rammeverk er et forsøk på å gi mening om dagens store JavaScript-biblioteker i tre kategorier: de som kjører i Node.js-servere, de som fungerer i nettlesere, og de som støtter native eller hybrid mobilapper.

Node.js-rammeverk

Node.js er en JavaScript- og C ++ - basert serverteknologi som har tiltrukket seg mye oppmerksomhet og støtte siden introduksjonen (til en stående applaus) av forfatteren Ryan Dahl på European JSConf i november 2009. Node.js er preget av en hendelsesdrevet arkitektur som er i stand til asynkron I / O, et lite minnefotavtrykk og høy gjennomstrømning og skalerbarhet for webapplikasjoner.

Mens Node.js har alle delene som trengs for å implementere en webserver, tar det litt arbeid å skrive laget. TJ Holowaychuk ga ut Express 1.0 Beta i juli 2010, og det ble snart den "standard" back-end-serveren for Node.js og en del av MEAN-stakken, med MongoDB-databasen og Angular.JS frontend-rammeverket.

Likevel har forskjellige utviklere og organisasjoner forskjellige behov. Express har direkte eller indirekte gytt Locomotive, Hapi, Koa, Kraken og Sails.js. Meteor er ganske annerledes, selv om det også kjører på Node.js.

Uttrykke. Express er et minimalt og fleksibelt rammeverk for Node.js-webapplikasjon, og gir et robust sett med funksjoner for å bygge enkeltsidige, flersidige og hybrid-webapplikasjoner. Express API håndterer webapplikasjonen, HTTP-forespørsler og svar, ruting og mellomvare. Fra og med Express 4.x ligger den støttede mellomvaren for Express i en rekke separate arkiver.

Flere Expressks-gafler og tillegg til Express har dukket opp, inkludert Locomotive, Hapi og Koa. Koa ble skapt av en av hovedbidragsyterne til Express.

Express er eldre enn sine scions, og det har et større fotavtrykk. Likevel har den også et større samfunn og mer stabilitet. Jeg ser stadig Express innlemmet i andre rammer og verktøy uten kommentarer, som om det var det eneste mulige valget for å bygge en webserver på Node.js. På GitHub har rammeverket mer enn 23.000 stjerner og 4000 gafler.

Hapi. Hapi er et brukervennlig, konfigurasjons-sentrisk rammeverk med innebygd støtte for inndatavalidering, caching, autentisering og andre viktige fasiliteter for å bygge nett- og tjenesteapplikasjoner. Hapi lar utviklere fokusere på å skrive gjenbrukbar applikasjonslogikk på en svært modulær og forskrivende måte. Den ble utviklet av Walmart Labs og er et godt valg for store team og store prosjekter.

Hapi ble opprinnelig bygget på toppen av Express, men ble senere redesignet for å være frittstående. Det er basert på ideene om at "konfigurasjon er bedre enn kode" og "forretningslogikk må isoleres fra transportlaget." I eksemplet ovenfor, legg merke til hvor tydelig og ren konfigurasjonen av serverruter vises i koden.

Koa. Koa er et nytt web-rammeverk designet av teamet bak Express, men uavhengig av Express-koden. Koa har som mål å være et mindre, mer uttrykksfullt og mer robust grunnlag for webapplikasjoner og API-er. Koa bruker ES6-generatorer for mellomvare i stedet for å bruke Node.js tilbakeringing. Følgende er en "hei, verden" Koa-applikasjon ved hjelp av en generator, som gjør en gi neste for å overføre kontrollen til neste generator:

Forskjellen mellom mellomvaregeneratorer, slik de brukes av Koa, og tilbakeringinger, slik de brukes av Express og Connect, er at du får mer fleksibilitet med generatorer. For eksempel fører Connect ganske enkelt kontrollen gjennom en rekke funksjoner til en kommer tilbake, mens Koa gir kontroll "nedstrøms", og deretter flyter kontrollen tilbake "oppstrøms." I eksemplet ovenfor "bryter" x-responstiden responsgeneratoren med gi neste uttalelse som markerer samtalen. Avkastning er mer fleksibel enn eksplisitte funksjonsanrop, da det gjør det enkelt å sette inn en annen generator i sekvensen - for eksempel en weblogger mellom tidtakeren og responsen.

Kraken. Et PayPal open source-prosjekt, Kraken er et sikkert og skalerbart lag som utvider Express ved å tilby struktur og konvensjon, omtrent som Locomotive. Selv om Kraken er hovedpilen i rammeverket, kan følgende moduler også brukes uavhengig: Lusca (sikkerhet), Kappa (NPM-proxy), Makara (LinkedIn Dust.js I18N) og Adaro (LinkedIn Dust.js Templating).

Kraken stoler på yo for å generere prosjekter, som vist på skjermbildet til venstre. I likhet med lokomotivet organiserer det prosjektene sine i konvensjonelle Rails-lignende kataloger, inkludert modeller, kontrollere og konfigurering. Som generert knytter Kraken seg til Express som standard mellomvare, definert som en app, som da har sin app.use () og app.listen () metoder som kalles. Hver rute i en Kraken-server lever i sin egen fil i kontrollermappen.

Lokomotiv. Som et web-rammeverk for Node.js støtter Locomotive MVC-mønstre, RESTful ruter og konvensjon over konfigurasjon (som Rails), mens den integreres sømløst med hvilken som helst database og malmotor. Lokomotiv bygger på Express og Connect, som er et enkelt limrammeverk for mellomvare som brukes av en rekke Node.js-rammer.

Lokomotiv legger til Express noen Ruby on Rails-lignende struktur, som du kan se på bildet ovenfor, som Express ellers mangler. Lokomotivvisninger er ofte innebygde JavaScript-filer (html.ejs), som vist her, men Locomotive støtter også Jade og andre kompatible malmotorer for Express. REST-funksjonaliteten styres av ruter, som det vanligvis er tilfelle i Express-baserte servere. Du kan bruke hvilken database som helst og ORM (objekt-relasjonskartlegging) som du vil med Locomotive. Guiden demonstrerer bruk av MongoDB med Mongoose, samt arbeid med Passport for brukerautentisering.

Meteor. Meteor gir deg en radikalt enklere måte å bygge sanntids mobil- og nettapper, helt i JavaScript, fra en kodebase. I stedet for å sende HTML over ledningen, sender Meteor data fra serveren som klienten skal gjengi. I tillegg til å kjøre frittstående, kan Meteor integreres med AngularJS og React. Meteor er ingenting som Express, selv om det også er bygget på toppen av Node.js og støtter håndtak, Blaze og Jade-maler.

Meteor tillater rask prototyping og produserer plattformkode (Web, Android, iOS). Den integreres med MongoDB, ved hjelp av Distribuert dataprotokoll og et publiser-abonnementsmønster for automatisk å overføre dataendringer til klienter uten å kreve at utvikleren skriver noen synkroniseringskode. På klienten er Meteor avhengig av jQuery og kan brukes med hvilket som helst JavaScript UI-widgetbibliotek.

Meteor er utviklet av Meteor Development Group, en oppstart inkubert av Y Combinator. Meteor er nå moden nok til å støtte et halvt dusin opplæringsbøker. Prosjektet har tegnet mer enn 32 000 stjerner på GitHub.

Meteor selv er gratis programvare med åpen kildekode, men Meteor-gruppen tjener penger på det ved å selge Meteor Galaxy DevOps-abonnementer, som inkluderer AWS-serverplass og grunnleggende Meteor-støtte, og et eget Premium-abonnement.

Sails.js. Med Sails kan du lage egendefinerte Node.js-apper i bedriftsklasse. Den er designet for å etterligne det kjente mønsteret for modellvisnings-kontroller (MVC) av rammer som Ruby on Rails, men med støtte for kravene til moderne apper: datadrevne API-er med en skalerbar, serviceorientert arkitektur. Det er spesielt bra for å bygge chat-apper, dashbord i sanntid eller flerspillerspill, men du kan bruke det til ethvert webapplikasjonsprosjekt. Sails støtter WebSockets og sender automatisk socketmeldinger til appens ruter.

Som Rails, verdsetter Sails konvensjon over konfigurasjon, gir generatorer og stillas for å bygge ut REST APIer raskt fra tegninger, og bruker et MVC / aktivt postmønster. Sails er bygget oppå Express og bruker Waterline til sin ORM, med støtte for ORM-tilknytning. Waterline støtter både SQL- og NoSQL-databaser.

Sails er et back-end-rammeverk designet for å være kompatibelt med ethvert front-end-web-rammeverk, for eksempel Angular eller Backbone, eller mobilenheter, som iOS eller Android, som du tilfeldigvis liker eller trenger å støtte. Det er en bok i verk på Sails.js, fortsatt bare delvis komplett.

HTML5 / JavaScript-rammer

Vi tenker tradisjonelt på at JavaScript-biblioteker og -rammer kjører i nettlesere. Som jeg nevnte tidligere, oppsto noen av disse - jQuery, Dojo og MooTools - på midten av 2000-tallet, først og fremst for å gjøre Dynamic HTML og Ajax lettere å skrive. Noen av disse har siden utvidet seg til flere funksjonsområder, for eksempel widgets for brukergrensesnitt og grensesnitt for mobilenheter.

Andre har kommet til i det siste. AngularJS er et front-end-rammeverk som utvider HTML med markering for dynamiske visninger og datainnbinding. Backbone.js og Ember er designet for å utvikle ensides webapplikasjoner. React er for å bygge et brukergrensesnitt eller en visning, vanligvis for applikasjoner med én side.

Andre rammer forfølger smalere spesialiseringsområder. D3 gjør datavisualisering og animasjoner. Socket.IO implementerer sanntidsapps. Knockout er en måte å knytte en datamodell til et webgrensesnitt på høyt nivå. Polymer tilbyr et lett "sukkerholdig" lag på toppen av Web Components APIer for å hjelpe deg med å lage dine egne webkomponenter. Underscore er et bibliotek for generelle verktøy.

Som du kanskje forventer, har du en sjenanse av rikdom å velge mellom for web-utvikling på klientsiden.

AngularJS. AngularJS (eller rett og slett Angular, blant venner) er et MVW-JavaScript Ajax-rammeverk som viser modell-visning uansett hvilket utvider HTML med markering for dynamiske visninger og databinding. Angular er spesielt bra for utvikling av enkeltsideprogrammer og kobling av HTML-skjemaer til modeller og JavaScript-kontrollere.

Det rare lydmodell-visning-uansett mønsteret er et forsøk på å inkludere modell-visning-kontrolleren, modell-visning-visningsmodell (MVVM) og modell-visning-presentatør (MVP) mønstre under en moniker. Mens programmerere elsker å argumentere for forskjellene mellom disse tre nært beslektede mønstrene, bestemte Angular-utviklerne seg for å velge bort diskusjonen.

I utgangspunktet synkroniserer Angular automatisk data fra brukergrensesnittet ditt (visning) med JavaScript-objektene dine (modell) gjennom toveis databinding. For å hjelpe deg med å strukturere applikasjonen bedre og gjøre det enkelt å teste, lærer Angular nettleseren hvordan du gjør avhengighetsinjeksjon og invertering av kontroll.

Angular ble opprettet av Google og åpen kilde under MIT-lisensen. Datalageret på GitHub har mer enn 47 000 stjerner og 22 000 gafler. Laget med Angular viser hundrevis av nettsteder bygget med Angular, mange av dem høyprofilerte webeiendommer.