Detta är mitt andra inlägg inom ramen för kursen RIA-utveckling med JavaScript. Artikeln behandlar Steg 1 – Vägval.

Det är så dags att sammanfatta veckans arbete som inneburit väldigt mycket läsning och instudering. Det finns verkligen hur mycket som helst som man vill fördjupa sig i men det gäller att sålla och prioritera. Fokus har legat på instudering av Backbone.js.

Backbone.js

Backbone.js är helt nytt för mig. Jag har givetvis stött på det i många sammanhang men aldrig tagit mig tiden att sätta mig in i vad det egentligen är. Jag har haft bilden av det stora och komplicerade ramverket men när jag nu tagit mig tiden att lära känna det så har jag snarare mötts av ett litet nätt bibliotek vilket var en positiv överraskning. Det känns rätt för denna kurs att själv få styra över sin kodorganisation och istället få hjälp av biblioteket där det är motiverat.

Jag gillade verkligen Nick Gauthiers introduktion till Backbone.js och speciellt hans tips kring upplägg. Det som han inte fokuserar speciellt mycket på i videon är organisation av vyer/modeller och collections och namngivningen är väldigt okonsekvent så där kan man försöka vara mer strukturerad och noggrann.

Nick använder Backbone.js tillsammans med template-hanteratren Handlebars. Jag gillade helt klart upplägget och köper detta rakt upp och ned utan någon egentlig efterforskning. Jag stämde även av med David kring detta och fick rekommendationen att fokusera ifrån vilken template-hanterare som används och snarare fokusera på hur den ska användas med rådet om att hålla sina templates/vyer i separata html-filer som hanteras via modulhanteraren snarare än att lägga in dessa i ursprungsdokumentet inkapslade i script-taggar. Detta är absolut något jag ska ha fokus kring.

Editor:

I mitt förra inlägg så flaggade jag för att jag kommer att köra Sublime Text 2, men under veckan som gått så har jag tänkt om. Jag vill verkligen gå “all in” och köra på det som jag tror kommer att gälla i framtiden. Ett helt onlinebaserat IDE. Det självklara (?) valet blir därför Cloud9 IDE där integration etc. är snyggt löst gentemot GitHub. Förövrigt så har jag tankar om att även börja rekommendera Cloud9 i min introkurs då det skulle underlätta handledningen väsentligt.

Kodstil:

Jag är ganska färgad av Zakas och Crockford vad det gäller kodstil och jag ser ingen anledning till förändring här. Jag har kikat igenom Googles JavaScript Style Guide och jag tycker även den är väldigt samstämmig med Zakas och Crockford. JSLint (eller fork av) kommer att användas och följas även om mina känslor kommer att såras.

För att bredda mig lite jag läst igenom Zakas bok “Maintainable JavaScript” och den innehåller en hel del matnyttigt kring just kodstil och generellt upplägg av projekt. Jag kommer att så konsekvent jag kan försöka följa regelverket och rekommendationerna i boken och förhoppningsvis kunna återknyta i slutet av kursen hur detta gått.

4 mellanslags indentering är det jag kommer att köra på, och det verkar dessutom vara default i Cloud9.

Testning

Jag har velat fram och tillbaka om jag ska släppa det eller gå all in och efter samtal med David har jag kommit fram till att testa på att testa. Kanske kan man börja med att bara testa sina modeller? Hur som helst så kommer jag att köra på Jasmine.

Modulhantering

Require.js är rekommenderat för kursen för att sköta beroenden och kodorganisation och jag kommer absolut att försöka mig på att få rätt på det. Jag har dock inte ännu bestämt om jag ska gå hela vägen med att köra jQuery och Backbone som AMD-moduler eller om jag låter dessa yttre beroenden finnas. Troligtvis lutar det i ett inledningsskede åt det senare.

Dokumentation

Eftersom slutmålet är en applikation som förvisso inte är så stor, men som ska vara framtagen som om den är ett väldigt stort projektet så kommer jag att fokusera min dokumentation till JSDoc. I mitt tycker verkar Brocco lämpa sig bättre till mindre projekt där koden kanske ryms i en eller ett fåtal filer.

Applikationsidé:

I en kurs likt denna där fokus är på process och arkitektur snarare än produktinnovation så känns det naturligt att välja en uppgift i en känd problemdomän. Mitt val blir därför att göra en single page-applikation för rapportering av resultat som är tänkt att kunna användas av handledare/examinatorer för att på sikt rapportera in resultat till CoursePress vid laborationshandledning. Applikationen kommer att vara en offlineapplikation som sparar alla resultat mot localstorage, men som fördjupning i kursen tänkte jag skjuta in mig på att få en snygg synkning av dessa resultat med hjälp av en WebWorker (dock inte spikat).

Vid laborationshandledningar är det inte helt ovanligt att man inte har tillgång till internetuppkoppling under redovisningstillfället varför det också är naturligt att spara allting lokalt och kunna använda applikationen i offlineläge.

3 huvudvyer: Laborationsgruppsvy, Laborationsvy och Studentvy.

Eventuellt kommer jag också att göra ett inmatningsgränssnitt för att lägga till studenter/uppgifter etc. Men i praktiken är detta något som görs på backenden. I första skedet siktar jag in mig på en enkel importfunktion av exempeldata via XHR.

Som avgränsning kommer jag troligtvis att “hårdkoda” applikationen till att enbart gälla för en fördefinierad kurs med fördefinierade moment och betygsskalor. Det bör dock inte vara något problem att utveckla och lägga till även kurshantering etc.

Följande setup av ramverk/bilbliotek och tillägg tänker jag mig använda:

• JavaScript ES5 Strict
• Backbone.js
  - loacalStorage-modul
• Underscore.js – I de fall då ES5 helt enkelt inte räcker till. (Dessutom så kräver Backbone detta)
• jQuery – För hantering av DOM-element då Underscore.js ej har hantering för detta. Dock fokus på användning av templates i vyerna.
• Handlebars – Templates.
• Twitter Bootstrap – UI-hjälp. Även smidigt eftersom applikationen ska vara någorlunda responsiv.
• Offline-hantering via  HTML5  Offline Web Applications. Även trolig fördjupning tillsammans med web workers.
• RequireJS för modulhantering.
• Jasmine för tester
• JSDoc för dokumentation

Avgränsningar:

Jag har länge varit nyfiken på CoffieScript men känner att detta inte är rätt tid och plats. Jag vill kunna fokusera på Backbone och kodstruktur utan att lära mig ny syntax. Jag lämnar detta för nu helt enkelt. Även Sweet.js låter intressant men det får helt enkelt vara nog med sötsaker för nu.

Jag blickar nu framåt mot nästa vecka. Äntligen dags att börja koda, om inte så mycket så i alla fall lite.