En introduktion till JavaScriptMVC

Att skapa och kanske framförallt bibehålla en schyst, begriplig struktur när man kodar JavaScript kan vara en besvärlig uppgift. Stora, dynamiska webbprojekt innebär ofta en stor, JS-tung kodbas som – allteftersom funktionaliteten utökas – kan bli mer och mer svårhanterlig. Koden saknar många gånger organisation, sprids ut och kan i slutändan leda till onödigt invecklad kod som blir svår att underhålla och utöka.

JavaScriptMVC (JMVC) är ett open source-ramverk med motivationen att hjälpa dig som klientutvecklare att bygga strukturerade, skalbara JavaScript-applikationer av hög kvalitet. Byggt ovanpå jQuery erbjuder JMVC en samling best-practices och verktyg där man plockat ut det bästa från jQuery i avsikt att bringa ordning i röran: jQueryMX, StealJS, FuncUnit och DocumentJS.

jQueryMX

jQueryMX består av ett gäng jQuery-bibliotek vars syfte är att tillhandahålla den struktur och organisation man många gånger saknar i jQuery-tunga applikationer. jQueryMX kommer bland annat med specialevents som drag-and-drop, DOM extensions och language helpers som förenklar hantering av JavaScript-data.

Utöver detta inför jQueryMX även MVC-tänket i JavaScript med sina $.Model-, $.View- och $.Controller-plugins. Dessa olika delar kan användas tillsammans eller separat vilket innebär att du endast inkluderar de plugins du faktiskt kommer att ha användning för.

MVC-upplägget fungerar enligt förväntan:

Modellen kapslar in service- och datalagret och kommunicerar via JSON-baserade REST-anrop.
Vyn renderar modelldata som hämtats från servern.
Controllern lyssnar på events och sköter kommunikation mellan modellen och vyn.

StealJS

StealJS är en samling verktyg som gör det enkelt att bygga, paketera och dela JavaScript-applikationer. Verktygen kommer med en mängd trevliga egenskaper:

StealJS är bra på Dependency Management.
StealJS hjälper dig bygga ihop dina JS- och CSS-filer till en enda komprimerad produktionsfil.
StealJS kan användas för att generera projektstrukturer.
StealJS kommer med stöd för SVN och GIT.
StealJS möjliggör code cleaning och validering via JSLint.
Och som en liten bonus kan StealJS göra din AJAX-app crawlable.

FuncUnit

FuncUnit är ett testramverk med ambitionen att göra enhetstestning och funktionell testning av webbapplikationer enklare och – som de själva säger – roligare! Med en jQuery-liknande syntax skriver, kör och debuggar du dina tester direkt i browsern (fungerar för IE 6+, FF 2+, Safari 4+, Opera 9+ och Chrome) och samma tester kan, via Selenium, också automatiseras. FuncUnit stödjer simulering av user actions såsom typing, clicking, *dragging *och scrolling.

Nedanstående kod, vilken testar att en AutoSuggest returnerar fem resultat, får fungera som exempel på ramverkets hyfsat okomplicerade syntax:

module("autosuggest",{
 setup: function() {
   S.open('autosuggest.html')
 }
});
 
test("JavaScript results",function(){
 S('input').click().type("JavaScript")
 
 // wait until we have some results
 S('.autocomplete_item').visible(function(){
   equal( S('.autocomplete_item').size(), 5, "there are 5 results")
 })
});

DocumentJS

DocumentJS tillhandahåller, precis som namnet avslöjar, verktyg för dokumentering av JavaScript-kod. DocumentJS hjälper dig generera, organisera, granska och underhålla din dokumentation och, precis som i alla andra delar av JavaScriptMVC, ligger fokus på användarvänlighet och enkelhet.