En introduktion till JavaScriptMVC

Nathalie Wassgren -

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.