Beyond jQuery: En expertguide för JavaScript-ramar

Den definierande egenskapen hos en riktigt bra programmerare är latskap. Det betyder dock inte dumt eller okunnigt. Den riktigt bra lata programmeraren skriver inte (behöver då felsöka och testa) 100 rader kod när 10 kommer att göra. I JavaScript-världen kommer den riktigt lata utvecklaren att förlita sig på ett effektivt, väl testat och väl stödt ramverk för att undvika att ständigt uppfinna lösningar på vanliga problem.

Frameworks "delar" mycket av den finkorniga funktionaliteten i JavaScript-språket till metodanrop, vilket minskar mängden kod som den lata programmeraren behöver för att skriva, testa och felsöka. Det finns två hinder att ta bort innan du utnyttjar den fördelen: att välja en ram för ditt syfte och lära dig den.

När du väl har lärt dig en ram är den självklara kursen att hålla fast vid den för allt du utvecklar så att du inte behöver lära dig något annat, men det är inte alltid användbart. Faktum är att en av ledtrådarna som säger att du använder fel ram för din nuvarande uppgift är att du jobbar mycket. Så var riktigt lat och fortsätt alltid att lära dig.

Lite JavaScript-historik

JavaScript-historien går tillbaka till utvecklingsarbetet som Brendan Eich gjorde på Mocha-språket för webbläsarföretaget Netscape 1995. Mocha släpptes som LiveScript senare samma år och döptes om till JavaScript när Sun beviljade Netscape en varumärkeslicens. Att försöka knyta den lätta C-liknande JavaScript-tolken till den orelaterade tungvikten Java - ett objektorienterat, token-sammanställt språk - med ett liknande namn verkade som en bra idé för marknadsföringsändamål 1995, men genom åren har valet orsakade inget slut på förvirring.

Utvecklingen av JavaScript under det kommande decenniet präglades av oenigheter bland webbläsarimplementörerna och en ganska svag ECMA-standardinsats. Det som förändrade denna sjukdom och återupplivade språket var ökningen av Dynamic HTML och Ajax i mitten av 2000-talet, följt snabbt av introduktionen av JavaScript-bibliotek med öppen källkod som Prototype, jQuery, Dojo och MooTools, som var avsedda att göra Dynamic HTML och Ajax enklare att använda, och att tillhandahålla "widgets" för JavaScript som skulle förbättra funktionaliteten i HTML-formulärkontroller.

Även om Netscape släppte en JavaScript-server strax efter JavaScript för webbläsaren, tog språket inte riktigt fart för backend-användning förrän Node.js ökade med början 2009. En del av det som gjorde Node.js attraktivt var användningen av Googles högt inställd V8 JavaScript-motor för biblioteksmoduler, med kärnkod i ganska bärbar C ++.

Denna rundtur i JavaScript-ramverk är ett försök att förstå dagens stora JavaScript-bibliotek i tre kategorier: sådana som körs på Node.js-servrar, sådana som fungerar i webbläsare och sådana som stöder inbyggda eller hybrid-mobilappar.

Node.js-ramar

Node.js är en JavaScript- och C ++ - baserad serverteknik som har fått mycket uppmärksamhet och stöd sedan dess introduktion (till stående ovation) av författaren Ryan Dahl vid European JSConf i november 2009. Node.js utmärks av en händelsestyrd arkitektur med asynkron I / O, ett litet minnesavtryck och hög kapacitet och skalbarhet för webbapplikationer.

Medan Node.js har alla delar som behövs för att implementera en webbserver, tar det lite arbete att skriva det lagret. TJ Holowaychuk släppte Express 1.0 Beta i juli 2010, och det blev snart ”standard” back-end-servern för Node.js och en del av MEAN-stacken, med MongoDB-databasen och Angular.JS front-end-ramverk.

Ändå har olika utvecklare och organisationer olika behov. Express har direkt eller indirekt skapat Locomotive, Hapi, Koa, Kraken och Sails.js. Meteor är helt annorlunda, även om det också körs på Node.js.

Uttrycka. Express är ett minimalt och flexibelt ramverk för Node.js webbapplikation, som ger en robust uppsättning funktioner för att bygga enkelsidiga, flersidiga och hybrid webbapplikationer. Express API hanterar webbapplikationen, HTTP-förfrågningar och svar, routing och mellanprogram. Från och med Express 4.x finns den stödda mellanvaran för Express i ett antal separata arkiv.

Flera Express-gafflar och tillägg för Express har dykt upp, inklusive Locomotive, Hapi och Koa. Koa skapades av en av de viktigaste bidragsgivarna till Express.

Express är äldre än sina scions, och det har ett större fotavtryck. Ändå har den också ett större samhälle och mer stabilitet. Jag ser ständigt Express integreras i andra ramar och verktyg utan kommentarer, som om det var det enda möjliga valet för att bygga en webbserver på Node.js. På GitHub har ramverket mer än 23 000 stjärnor och 4 000 gafflar.

Hapi. Hapi är en enkel att använda, konfigurationscentrerad ram med inbyggt stöd för ingångsvalidering, cachning, autentisering och andra viktiga faciliteter för att bygga webb- och tjänsteapplikationer. Hapi tillåter utvecklare att fokusera på att skriva återanvändbar applikationslogik på ett mycket modulärt och föreskrivande sätt. Den utvecklades av Walmart Labs och är ett bra val för stora team och stora projekt.

Hapi byggdes ursprungligen ovanpå Express, men designades senare för att vara fristående. Det bygger på idéerna att "konfiguration är bättre än kod" och "affärslogik måste isoleras från transportlagret." I exemplet ovan märker du hur tydlig och ren konfigurationen av servervägar visas i koden.

Koa. Koa är ett nytt webbramverk designat av teamet bakom Express, men oberoende av Express-koden. Koa syftar till att vara en mindre, mer uttrycksfull och mer robust grund för webbapplikationer och API: er. Koa använder ES6-generatorer för mellanprogram istället för att använda Node.js-återuppringningar. Följande är en “hej, värld” Koa-applikation med en generator, som gör a för yield nextatt överföra kontrollen till nästa generator:

Skillnaden mellan mellanvarugeneratorer, som används av Koa, och återuppringningar, som används av Express och Connect, är att du får mer flexibilitet med generatorer. Till exempel skickar Connect helt enkelt kontrollen genom en serie funktioner tills en återvänder, medan Koa ger kontroll "nedströms", sedan strömmar kontrollen tillbaka "uppströms." I exemplet ovan "omsluter" x-svarstiden svarsgeneratorn, med yield nextuttalandet som markerar samtalet. Avkastning är mer flexibel än explicita funktionsanrop, eftersom det gör det enkelt att sätta in en annan generator i sekvensen - till exempel en webblogger mellan timern och svaret.

Kraken. Ett PayPal-projekt med öppen källkod, Kraken är ett säkert och skalbart lager som sträcker sig Express genom att tillhandahålla struktur och konvention, ungefär som Locomotive. Även om Kraken är huvudpelaren i dess ramverk kan följande moduler också användas oberoende: Lusca (säkerhet), Kappa (NPM-proxy), Makara (LinkedIn Dust.js I18N) och Adaro (LinkedIn Dust.js-mall).

Kraken förlitar sig på yoatt generera projekt, som visas på skärmdumpen till vänster. Precis som loket organiserar det sina projekt i konventionella Rails-liknande kataloger, inklusive modeller, kontroller och konfiguration. Som genererat binder Kraken till Express som standard middleware, definierat som en app, som sedan har sina app.use()och app.listen()metoder kallade. Varje rutt i en Kraken-server lever i sin egen fil i styrmappen.

Lokomotiv. Som ett webbramverk för Node.js stöder Locomotive MVC-mönster, RESTful-rutter och konvention över konfiguration (som Rails), samtidigt som den integreras sömlöst med alla databaser och mallmotorer. Lok bygger på Express och Connect, som är ett enkelt limram för mellanprogram som används av ett antal Node.js-ramar.

Locomotive lägger till Express lite Ruby on Rails-liknande struktur, som du kan se på bilden ovan, som Express annars saknar. Lokvyer är ofta inbäddade JavaScript-filer (html.ejs), som visas här, men Locomotive stöder också Jade och andra kompatibla mallmotorer för Express. REST-funktionaliteten styrs av rutter, vilket vanligtvis är fallet i Express-baserade servrar. Du kan använda vilken databas och ORM (objektrelationell mappning) som du vill med Locomotive. Guiden demonstrerar användning av MongoDB med Mongoose, samt arbete med Passport för användarautentisering.

Meteor. Meteor ger dig ett radikalt enklare sätt att bygga mobil- och webbappar i realtid, helt i JavaScript, från en kodbas. Istället för att skicka HTML via kabeln skickar Meteor data från servern som klienten ska göra. Förutom att köra fristående kan Meteor integreras med AngularJS och React. Meteor är inget som Express, även om det också är byggt ovanpå Node.js och stöder mallar för handtag, Blaze och Jade.

Meteor möjliggör snabb prototyp och producerar plattformskod (webb, Android, iOS). Den integreras med MongoDB, med hjälp av Distribuerat dataprotokoll och ett publiceringsprenumerationsmönster för att automatiskt sprida dataändringar till klienter utan att utvecklaren behöver skriva någon synkroniseringskod. På klienten beror Meteor på jQuery och kan användas med alla JavaScript UI-widgetbibliotek.

Meteor är utvecklat av Meteor Development Group, en start som inkuberas av Y Combinator. Meteor är nu mogen för att stödja ett halvt dussin handböcker. Projektet har dragit mer än 32 000 stjärnor på GitHub.

Meteor själv är gratis öppen källkodsprogramvara, men Meteor-gruppen tjänar pengar på det genom att sälja Meteor Galaxy DevOps-prenumerationer, som inkluderar AWS-serverutrymme och grundläggande Meteor-support och en separat Premium-abonnemang.

Sails.js. Med Sails kan du bygga anpassade Node.js-appar i företagsklass. Det är utformat för att efterlikna det välkända MVC-modellen (Model-View-Controller) av ramar som Ruby on Rails, men med stöd för kraven på moderna appar: datadrivna API: er med en skalbar, serviceorienterad arkitektur. Det är särskilt bra för att bygga chattappar, instrumentpaneler i realtid eller multiplayer-spel, men du kan använda det för alla webbapplikationsprojekt. Sails stöder WebSockets och skickar automatiskt socketmeddelanden till din apps rutter.

Liksom Rails värderar Sails konvention över konfiguration, tillhandahåller generatorer och byggnadsställningar för att snabbt bygga ut REST API: er från ritningar och använder ett MVC / aktivt postmönster. Sails byggs ovanpå Express och använder Waterline för sin ORM, med stöd för ORM-anslutningar. Waterline stöder både SQL- och NoSQL-databaser.

Sails är ett backend-ram som är utformat för att vara kompatibelt med alla front-end-webbramar, som Angular eller Backbone, eller mobilenheter, som iOS eller Android, som du råkar gilla eller behöver stödja. Det finns en bok på Sails.js, fortfarande bara delvis komplett.

HTML5 / JavaScript-ramar

Vi anser traditionellt att JavaScript-bibliotek och ramar körs i webbläsare. Som jag nämnde tidigare uppstod några av dessa - jQuery, Dojo och MooTools - i mitten av 2000-talet, främst för att göra Dynamic HTML och Ajax enklare att skriva. Några av dessa har sedan dess expanderat till ytterligare funktionsområden, såsom widgetar för användargränssnitt och mobila enhetsgränssnitt.

Andra har kommit till på senare tid. AngularJS är ett frontend-ramverk som utökar HTML med markering för dynamiska vyer och bindning av data. Backbone.js och Ember är utformade för att utveckla webbsidor med en sida. React är för att bygga ett användargränssnitt eller en vy, vanligtvis för enkelsidiga applikationer.

Ytterligare andra ramar strävar efter smalare specialiseringsområden. D3 gör datavisualisering och animationer. Socket.IO implementerar webbappar i realtid. Knockout är ett sätt på hög nivå att länka en datamodell till ett webbgränssnitt. Polymer erbjuder ett lätt "sockerande lager" ovanpå webbkomponentens API: er för att hjälpa till att bygga dina egna webbkomponenter. Understreck är ett allmänt verktygsbibliotek.

Som du kan förvänta dig har du en förlägenhet av rikedomar att välja mellan för webbutveckling på klientsidan.

AngularJS.  AngularJS (eller helt enkelt Angular, bland vänner) är ett JavaScript-Ajax-ramverk för modell-view-whatever (MVW) som utökar HTML med markering för dynamiska vyer och databindning. Angular är särskilt bra för att utveckla webbsidor med en sida och länka HTML-formulär till modeller och JavaScript-kontroller.

Det konstigt klingande mönstret-oavsett mönstret är ett försök att inkludera modellvisningsstyrenheten, modellvisningsvisningsmodellen (MVVM) och modellvisningspresentatorn (MVP) under en moniker. Medan programmerare älskar att argumentera för skillnaderna mellan dessa tre närbesläktade mönster, bestämde Angular-utvecklarna att välja bort diskussionen.

I grund och botten synkroniserar Angular automatiskt data från ditt användargränssnitt (vy) med dina JavaScript-objekt (modell) genom dubbelriktad databindning. För att hjälpa dig att strukturera din applikation bättre och göra det lätt att testa, lär Angular webbläsaren hur man gör beroendeinjektion och inversion av kontroll.

Angular skapades av Google och publicerades under MIT-licensen. Förvaret på GitHub har mer än 47 000 stjärnor och 22 000 gafflar. Tillverkad med Angular visar hundratals webbplatser byggda med Angular, många av dem högprofilerade webbegenskaper.