{ RIA-utveckling med JavaScript 2012 }

Information

Presentation

Välkommen

...till kurshemsidan för RIA-utveckling med JavaScript, en valbar del av det frivilliga tredje året på Webbprogrammeringsprogrammet på Linnéuniversitetet. Här hittar du allt du behöver för att genomföra kursen.

Navigera i dokumentet genom att klicka på flikarna för att välja rubrik i varje sektion. Du hittar också en Navigeringsöversikt i övre högra hörnet.

Om du vill konsumera sidan utan fliknavigering kan du växla till att visa hela siten som ett enda dokument, genom att stänga av flikarna via den andra knappen i övre högra hörnet. Du kan också skriva ut sidan, som då kommer printas i sin helhet.

Externa länkar ser ut som den till programhemsidan ovan, och öppnas alla i ett nytt fönster. Interna länkar ser ut så här. De växlar till en annan tabb. Webbläsarhistoriken bibehålls, så du kan exempelvis använda dess bakåt-knapp för att backa till tidigare tabb.

Om kursen

Kursen RIA-utveckling med JavaScript syftar till att lära ut best-practices gällande just RIA-utveckling med JavaScript. Detta görs genom att - you guessed it - bygger en RIA (Rich Internet Application) i JavaScript!

Den största delen av kursen handlar om detta bygge. Fokus är inte på målet utan på processen. Applikationens omfattning kommer därför vara något mindre än vad ni kanske är vana vid från andra kurser, just för att ge plats åt påläsning, reflektion och diskussion angående metodiken i bygget.

I bygget får ni testa att använda bibliotek och arbetssätt som är vanliga ute i det vilda. Exempelvis kommer ni bygga projektet med hjälp av ramverket Backbone, och hosta koden på Github.

Under arbetets gång kommer ni ha regelbunden handledning av lärare över Skype, just för att hålla diskussionen levande. JavaScript är ett ovanligt dynamiskt och expressivt språk vilket gör det väldigt kraftfullt, men samtidigt också mindre självklart hur applikationer bäst konstrueras och kod organiseras. 

Ni kommer också få tillfällen att diskutera med varandra, både generellt på kursens forum men också mer direkt via kollaborering i varandras projekt.

Kursen avslutas med en djupdykning i någon av de tekniker eller teknologier ni använt i er applikation. Denna djupdykning resulterar sedan i en presentation som alla kursdeltagare kan ta del av.

Förhoppningen är att detta sammantaget kommer ge en god bild av vad det innebär att strukturera applikationer i JavaScript, och vilka de bästa verktygen och metoderna är!

Förkunskapskrav

Följande kurser, alternativt motsvarande kunskaper, är förkunskapskrav för kursen.

Kursplan

Den officiella kursplanen hittar du här.

Veckoplanering

Nedan ser du en en översikt över tidsperspektiven för kursens steg.

KursstegDatum
Steg 0 - IntroVecka 3 (16-22 jan)
Steg 1 - PlaneringVecka 4-5 (23 jan - 5 feb)
Steg 2 - ImplementeringVecka 6-8 (6-26 feb)
Steg 3 - KollaboreringVecka 9-10 (27 feb - 11 mars)
Steg 4 - FördjupningVecka 11 (12-18 mars)
Steg 5 - UtvärderingVecka 12 (19-25 mars)

Forum

Navet i kursen, förutom denna statiska informationssida, är det för ändamålet uppsatta nätverket på Yammer. Det är här som löpande kursrelaterade annonseringar görs, diskussioner hålls, frågor ställs, etc.

Litteratur

Böcker

Kursen har ingen officiell kurslitteratur, men dessa två böcker kommer starkt rekommenderade:

Online-resurser

Här är ett urval av generella online-resurser som kan tjäna dig väl i kursen:

Lärare

Deltagare

Här är en lista över alla kursens deltagare, med länk till blogg & Github-repo. Ropa till om någon länk felar!

Arkiv

Tidigare års kurswebbar hittar du här. Ha dock i åtanke att uppläggen där skiljer sig något åt från årets version.

Steg

Kursgenomförandet är uppdelat i ett antal steg. Varje steg innebär...

För en översikt över de olika stegens deadlines, se kursens planering.

Klicka på respektive flik för att se en detaljerad redogörelse över exakt vad som förväntas på de olika stegen.

0: Intro

Vecka 316-22 jan

Hello World! I detta första steg ska du kratta manegen för kursen genom att...

  1. läsa igenom materialet här på kurswebben. Det är viktigt att du snabbt får en översikt över hur arbetsgången kommer se ut!
  2. installera Git, registrera dig på Github och skapa ett repositorium för kursprojektet. Se Githubsektionen för mer info.
  3. genomgå John Resigs Learning Advanced jQuery, och eventuellt uppdatera/komplettera med kunskaper för att förstå hela resan! En utmärkt resurs för att bättra på / borsta av kunskaperna om JavaScripts mer esoteriska delar är JavaScript Garden.
  4. sätta upp en blogg där du sedermera ska redogöra för dina kursrelaterade förehavanden. Att använda en befintlig blogg är givetvis helt ok, använd i så fall gärna en unik tagg (typ "RIA") för kursens inlägg.
  5. skriva ett första blogginlägg. Det ska innehålla...
    • en kort presentation av dig själv, främst ur frontend-perspektiv. Hur ser din relation till JavaScript ut? Hur mycket använder du det i det dagliga värvet?
    • förväntningar & förhoppningar på kursen.
    • reflektioner runt Resigs Learn app. Hur nära ytan låg de kunskaperna för dig?
    • en länk till ditt Github-repo.
  6. fixa konto på Yammer.
  7. Lägga ett meddelande i presentationstråden på Yammer, där ni också skickar med länk till ert första blogginlägg. När du gjort det så kommer en länk till din blogg att läggas till i deltagarlistan.
  8. Fånga läraren för ett första Skypesamtal.

1: Planering

Vecka 4-523 jan - 5 feb

Med manegen krattad så är det dags att påbörja projektdelen av kursen! Den kommer genomföras i ett antal olika delsteg, detaljerade nedan. Redovisa gärna dessa med separata blogginlägg för varje del!

Även om många säkert vill speeda igenom denna del för att komma fram till kodandet - vi är ju trots allt programmerare - så uppmanas ni att ta er tid att verkligen fundera över de olika momenten i planeringen. Att strukturera JavaScriptapplikationer är lurigt, och det är framför allt dessa färdigheter som kursen som helhet vill tillhandahålla!

Verktyg

Innan du ger dig in på funderingar om vad du skall bygga, så kan det vara bra att fundera på vilka bibliotek och tekniker du vill använda, eftersom dessa kan påverka vilka spår du slår in på!

Botanisera runt på resurssidan och se vad som kittlar din nyfikenhet! En del saker är obligatoriska (Backbone & Github), men här finns också några ytterligare frivilliga områden att testa. Givetvis är det också ok att använda bibliotek & tekniker som inte finns listade här!

Projektval

Dags att bestämma vad du skall bygga! Följande punkter kan vara bra att tänka på:

Kravspecifikation

Nu när du vet vad du skall bygga så är det dags att göra en specifikation av vad detta innebär mer i detalj. Detta behöver inte betyda en fullständig kartläggning såsom i OOAD-kursen; huvudkravet är att när man efter att ha läst din specifikation vet mer eller mindre exakt vad din applikation skall kunna åstadkomma. 

Vad skall då kravspecifikationen bestå av? Här följer några förslag:

Gränsen mellan dessa olika kravspecifikationsingredienser är ofta ganska flytande. Du är som sagt fri att utforma specifikationen helt efter eget behav, förutsatt att den utgör en någorlunda lättillgänglig beskrivning över all funktionalitet i din applikation.

Objekt och data

Härnäst bör du specifiera de ingående objekten i applikationen, både vad gäller egenskaper och faktisk datarepresantion. Det innebär...

Address = {
	street: "Stävgatan 3E", // string
	zip: 12345, // 5-digit integer
	city: "Ystad" // string
}

User = {
	name: "David Waller", // string with full name
	age: 32, // integer
	adress: {} // Adress object
}

Detta för att du hädanefter behöver ha en tydlig idé om exakt hur datan ser ut som skickas till och från din applikations olika funktioner.

Moduler och funktioner

Nu när du vet vilken funktionalitet din applikation strävar efter och hur de ingående dataobjekten ser ut så kan du börja identifiera de funktioner som din applikation behöver. En väldesignad funktion har ett enda ansvarsområde - vi vill inte se monsterfunktioner som har fyra-fem olika uppdrag på sina axlar! För varje funktion, specifiera vilka argument den tar emot, hur den bearbetar den datan, och vad den returnerar. Precis som med objekten så kan du med fördel göra detta via koddefinitioner. Exempelt nedan har kommentarer av JSDoc-typ, men det funkar givetvis lika bra med fritext.

/**
  * @param addr An Address object
  * @return bool True if all props are ok
  */
function validateAddress(addr){
	// check if all properties are valid 
}

/**
  * @param users An array of User objects
  * @name name A name to match against
  * @return User* An array of all matching users (empty array if no matches)
  */
function findUserByName(users,name){
	// loop through users and add matches to result
}

När det gäller instansfunktioner (det vill säga funktioner som opererar på ett enskilt objekt) så finns det en fördel med att göra dessa som statiska funktioner istället - vi kan nu spara ned alla våra objekt direkt i en JSON-struktur i databasen, utan att oroa oss för att metoder går förlorade.

För en extra utmaning, försök hålla funktionerna fullständigt portabla genom att designa dem så att de endast hanterar sina argument, och inte rör några andra variabler eller metoder som finns i samma scope. Hur gör man då om en funktion behöver använda en annan funktion? Man skickar in även den andra funktionen som ett argument! Detta mönster kallas Dependency Injection. En stor fördel med denna approach är att de individuella funktionerna blir mycket lättare att testa, ifall du väljer att arbeta med unit testing.

När du väl har listat de funktioner du behöver så är det dags att sortera dessa i moduler. Hur kan funktionerna grupperas? Försök hitta gemensamma teman och dela upp funktionerna i enlighet med dessa. Varje sådan grupp blir sedan en modul, vilket i praktiken innebär ett JavaScriptobjekt (Singleton). Även dessa kan du med fördel skissa i kod som tidigare:

// User module, containing all User-related functions
User = {
	validateAddress: function(addr){...},
	findUserByName: function(users,name){...}
}

Kodorganisering

Med funktionerna och modulerna kartlagda så kan vi zooma ut ännu ett steg och fundera över var den här koden faktiskt skall bo. En vanlig approach är att varje modul blir en fil. Varje fil definierar en Singleton, som har sina funktioner som metoder.

Det som kräver ytterligare lite fundering är hur dessa filer skall laddas in i din applikation. Det vanligaste är att man direkt länkar in dem via script-taggar, men det kräver att de olika modulerna vet hur ditt namespace ser ut och var de ska "stoppa in sig själva". 

En bättre approach är att hålla varje modul ovetandes om den större kontexten, och istället låta dem returnera ett objekt. Den kontext som importerade modulen blir sedan ansvarig för att göra något vettigt av det objektet. Precis så fungerar det i Node, men i "ren JavaScript" finns ingen direkt motsvarighet ännu. Olika förslag finns dock till nästa version. 

Under tiden finns det dock ett antal olika bibliotek som löser problemet. En alldeles utmärkt översikt ges i denna text av Addy Osmani, som är mer eller mindre obligatorisk läsning på området.

Efter detta steg så har du en fullständig karta över dina olika metoder, i vilka moduler de bor, och hur dessa moduler skall importeras. Med andra ord är planeringen avklarad, och det är dags att (äntligen?) börja koda på riktigt!

2: Implementering

Vecka 6-86-26 feb

Äntligen dags att lägga ifrån sig pennan och ladda tangentborden!

Förberedelse

Förmodligen är det mesta av golvet redan lagt. Du har ett repositorium på Git, och i planeringssteget skapade du någon form av skiss över applikationens beståndsdelar. Men för att komma igång:

Programmering

Sedan är det äntligen dags att imlementera funktionaliteten! Arbeta utifrån din planering, och försök sortera bitarna så att du börjar med de som inte har några beroenden, och sedan arbetar dig uppåt. Här är några hållpunkter att tänka på:

Användargränssnitt

Avslutningsvis, med funktionaliteten på plats, är det dags att ge användargränssnittet lite kärlek. Du behöver inte uträtta några stordåd här, då kursens fokus ligger ganska långt ifrån artistisk färdighet, men något färglager kanske inte skadar!

Vi vill också att du funderar över användarvänlighet och tillgänglighet. Även om din applikation är ganska liten, så finns det förvånansvärt mycket hänsyn att ta under dessa rubriker. 

Mer information och inspiration finns på motsvarande sida på förra årets kurswebb.

Avslutning

Nu har du till slut en fungerande RIA, och det är dags att...

3: Kollaborering

Vecka 9-1027 feb - 11 mars

Än så länge har vi "bara" använt Github som ett repositorium för versionshantering. Dess stora styrka ligger dock i hur smidigt det är att kollaborera på projekt, vilket är vad vi skall testa på i detta kurssteg!

Kollaborering på Github sker genom att man...

  1. forkar ett repositorium,
  2. committar sina ändringar
  3. och skickar en pull request
  4. som repositoriets ägare sedan kan merga in i ursprungsrepot.

Det är så här man jobbar i open-source-projekt, som exempelvis jQuery. Det är inte en stängd grupp med utvecklare som gjort jQuery, utan hundratalet olika människor runtom i världen, på just det sätt som beskrivits ovan. Dock finns det givetvis en grupp människor som är ansvariga för repositoriet, och som trycker på merge-knappen när det kommer en pull request (eller, vilket förmodligen är vanligare, låter bli).

I kurssteget skall vi nu testa den här processen. Det du skall göra är att...

  1. kolla igenom deltagarlistan, läs på bloggarna och hitta ett projekt som du vill bidra till
  2. testa applikationen och försök komma på funktionalitet att lägga till
  3. läs igenom den genererade dokumentationen för projektet
  4. om du vill eller tror dig behöva, ta kontakt med projektets ägare och snacka ihop dig med honom/henne
  5. gör en fork av projektet på Github, och skapa ett lokalt repositorium av projektet på din dator
  6. Genomför dina ändringar. Det kan handla om att lägga till ny funktionalitet, men också om att fixa buggar eller bara organisera koden på ett bättre sätt.
  7. Committa dina ändringar och pusha upp dem till din fork.
  8. Via Githubs interface skickar du nu en pull request, som repositoriets ägare skall besvara!
  9. Håll sedan ett öga på din pull request. Kanske mergar ägaren den direkt, men det kan också hända att han eller hon har uppföljande frågor, som då kan ställas i requestens diskussionstråd!

På motsvarande sätt kommer du förhoppningsvis bli föremål för pull requests. När du får en sådan så skall du...

  1. kolla igenom requesten. Dels kan du läsa vad avsändaren skrivit, men genom diff-kommandot kan du också se exakt vad som är ändrat.
  2. Om det är några oklarheter eller något du vill ha ändrat/klargjort, skriv en kommentar i pull requesten och invänta svar från avsändaren.
  3. När du är tillfreds med att pull requesten innebär en reell förbättring av ditt projekt, merga in den i ditt repositorium!
  4. Nu måste du också göra en pull från ditt lokala repositorium på datorn. Se till att du först har committat eventuella ändringar i dina filer.
  5. När du sedan pullar ner uppdateringarna från Github, så kan det hända att det uppstår en conflict mellan den nya koden och ändringar som du har gjort efter att forken gjordes. Dessa löser du manuellt, fil för fil.
  6. När alla conflicts är lösta, committa ändringarna och pusha upp dem till Github!

Ni får som sagt själva välja vilka projekt ni vill kollaborera med. Eftersom tabellen haltar lite så är det enklaste kanske att ni snackar ihop er på Yammer, för att snabbt få en överblick över vilka som är i mål och har ett live projekt ni kan jobba mot. Förutsättningen är ju...

Mitt förslag är att alla ni som uppfyller detta skriver ett meddelande på Yammer, så att ni snabbt kan hitta varandra!

Så, hur många pull requests behöver ni göra? Jag vill ogärna säga en siffra här, då tidsåtgången kan variera oerhört beroende på vad ni gör och hur projektet ser ut. Använt sunt förnuft, och det faktum att steget har 20h avsatt.

När kollaboreringssteget är klart, publicera ett blogginlägg där ni...

4: Fördjupning

Vecka 1112-18 mars

Under denna vecka skall ni fördjupa er i något ämne som kan sortera under kursens titel.

Ämnesval

Ämnet kan vara relaterat till något ni använde i projektet, eller också något annat JavaScriptämne som har råkat väcka ert intresse.

Föremålet för en undersökning kan vara ett JavaScriptbibliotek eller API. Det är dock viktigt att den inte resulterar endast i en presentation av API:t, utan innehåller en diskussion om användande, vilka problem det löser, vilken situation den är tänkt att användads i, etc. Som exempel så skulle jag rynka på pannan åt en fördjupning som endast detaljerar vilka metoder som localStorage innehåller. En fördjupning som undersöker alternativ och jämför dem med varandra, däremot, vore högrelevant!

Fördjupningen måste inte vara riktad mot ett speciellt bibliotek/API, utan kan också handla om en mer generell aspekt av RIA-utveckling. Ett utmärkt exempel vore att undersöka hur man gör en webapp offline-kapabel.

Här följer några förslag på fördjupningsämne:

Redovisning

Helst ser vi att ni redovisar genom att producera en kortare video, kanske där ni föreläser mot en presentation (powerpoint/keynote), eller där ni berättar samtidigt som ni demar live.

Ni kan också redovisa fördjupningen via ännu ett blogginlägg, men betänk då att detta (förmodligen) bör vara längre och mer ingående än de ni skrev under tidigare kurssteg.

Oavsett redovisningsform så skall ni efter färdigställandet annonsera fördjupningen på Yammer, så att övriga kursdeltagare kan åka snålskjuts på er nyvunna visdom!

Hur omfattande skall då redovisningen vara? Här får återigen sunt förnuft råda, och givetvis; ju mer tid själva fördjupningen tar, ju mindre tid har ni till att producera själva redovisningen. Ni har en halvtidsvecka till ert förfogande, dvs 20 timmar, vilket i någon mån bör återspeglas i resultatet.

5: Utvärdering

Vecka 1219-25 mars

Så var kursen klar! Det enda som återstår är att skriva ett avslutande blogginlägg. Där kan du...

Förmodligen får ni också tillfälle att fylla i en officiell utvärdering, men där återkommer förhoppningsvis Johan med mer information.

Så, vad händer sedan?

...och sedan hoppas jag att ni fortsätter på det inslagna spåret, mer trygga i att strukturera RIA:s med JavaScript! :)

Resurser

Här finns resurser samlade för ett antal olika bibliotek & tekniker relevanta för RIA-byggen. I första delen av planeringssteget ska du välja vilka av dessa du vill använda i kursen.

Ett av dessa områden kommer senare också bli fokus för din fördjupning.

Obligatoriska

Dessa koncept är obligatoriska för samtliga.

Github

Koden till applikationen du kommer bygga ska versionshanteras med hjälp av Git. Den i JavaScriptvärlden vanligaste providern av Gitrepositorier online är Github, som också är den lösning vi använder i kursen.

Tjuvkika gärna på denna sida i förra årets kurswebb, där flertalet tutorials och resurser finns länkade.

Redan i första kurssteget skall du installera Git (om du inte redan har det), registrera dig på Github, och skapa ett repositorium för din kursapp.

Därefter kommer du löpande att committa dina ändringar lokalt för att sedan pusha upp din kod till Github. Om du vill fördjupa dig lite mer i Gitanvändning så kanske du också kommer använda taggar för att markera milstolpar i projektet, och branches för att utveckla specifik funktionalitet som sedan mergas tillbaka in i huvudbranchen ("master").

I kursens fjärde steg, efter att applikationerna är färdigställda, skall ni få testa på Githubs verkliga styrka; möjlighet till kollaboration! Här är tanken att ni skall sätta er in i en kurskamrats projekt, forka dennes repositorium, göra en liten vidareutveckling/bugfix, och sedan skicka en pull request. På samma sätt kommer du själv också få ta ställning till pull requests från kurskamrater, och merga in dessa i din kod. Om du tycker ändringen håller måttet, vill säga...

Målet med Githubanvändningen i kursen är först och främst att ni skall bli någorlunda vana användare av det, då Github har blivit mer eller mindre en standard vid större JavaScriptprojekt. Men framför allt hoppas vi också på att ni ser nyttan av det - både vad gäller den smidiga versionshanteringen, den enkla molnbackupen, och kollaborationsmöjligheterna.

Om Github ger dig mersmak så rekommenderas du att göra din fördjupning om Github. Här har du en ypperlig chans att grotta ned dig ytterligare i detaljerna!

Backbone

Som grund till applikationen kommer vi använda oss av det lilla ramverket Backbone. Läs igenom det här avsnittet för att se vad Backbone är, och vad detta innebär för ditt applikationsbyggande!

Varför Backbone?

I tidigare iterationer av kursen har studenterna fritt fått välja ramverk, men i år är just Backbone obligatoriskt. Det finns flera anledningar till att vi vill att ni ska smaka på just detta ramverk:

Backboneresurser

Här listas ett antal resurser för att hjälpa dig komma igång med Backbone!

Insticksprogram

Som alla ramverk med självrespekt så är Backbone gjort för att enkelt kunna utökas via plugins. I fallet med Backbone så är detta extra viktigt, eftersom ramverket bara erbjuder grundläggande funktionalitet, och frestelsen för många utvecklare att bygga ut med mer specifik funktionalitet kommer därmed vara stor.

Här nedan följer en lista på några instick som skulle kunna vara intressanta för kursappen. Det finns inget tvång på att använda några plugins i kursen. Om du funderar på att göra din fördjupning om Backbone så rekommenderas du att använda åtminstone något plugin, eftersom det är ett alldeles utmärkt sätt att lära känna ramverket bättre.

Dokumentation

Ett obligatoriskt moment i projektbyggandet är att skapa en dokumentation över din kod i html-form, så att den enkelt kan länkas till och hostas på Github pages.

Du är fri att skapa den här dokumentationen precis som du vill, så att 'manuellt' tillhandahålla den är helt i sin ordning. Det uppmuntras dock att du istället genererar koden via något av de verktyg som är populära i branchen. Här är några exempel på sådana:

Även om dokumentationen blir fullständig först när din applikation är klar, så rekommenderas du att du redan i inledningen väljer vilken dokumentationslösning du vill använda. Då kan du löpande kommentera koden med rätt syntax, istället för att allra sist behöva gå igenom hela din kod och lägga in kommentarerna.

Frivilliga

Här listas förslag på några ytterligare ämnesområden du kan välja att använda i ditt projekt.

CoffeeScript

En av de hetaste trenderna i JavaScriptvärlden senaste året har varit CoffeeScript, som är en 'förfinad dialekt' av JavaScript. Enkelt förklarat så skriver man sin kod i CoffeeScript, som sedan kompileras om till JavaScript som körs 'som vanligt' i webbsidan (eller vad det nu är man programmerar).

Den officiella hemsidan länkad ovan är väldigt bra, du hittar också en förklaring och resurssamling här.

Notera att om du använder CoffeeScript i kursen så bör du committa bådeCoffeeScript-filerna och de genererade JavaScript-filerna till repositoriet!

Node.js

Node är ett 'JavaScript runtime environment', främst använt för att skriva Serverlösningar i JavaScript. De sista två åren har Node fått ett enormt genomslag, och spridningen bara ökar. Inledningsvis funderade vi på att ha med Node som en obligatorisk del av kursen, då den är en given plattform för en JavaScript-RIA idag. I slutändan valde vi dock att endast ha Node som en frivillig fördjupning. Om du är nyfiken, eller siktar på att arbeta professionellt med JavaScript, så rekommenderas du att kolla in Node!

Här är ett axplock av de mest användbara online-resurserna:

Om du väljer att använda Node i kursen så kan du inte ha Github Pages som publiceringsplattform för din app, eftersom denna bara hanterar rena webbappar. I NodeCloud-listan ovan finns dock ett antal gratis Node-hosting länkade.

NoSQL

Under utarbetning (förklaring om NoSQL)

Två olika:

CouchDB

CouchDB är ett projekt som sorterar under Apache Software Foundation. Ett utmärkt sätt att komma igång är att kika på onlineboken här eller Couch-sidan på förra årets kurswebb.

MongoDB

och MongoDB.

Under utarbetning (MongoDB-resurser)

Unit Testing

Under utarbetning (resurssamling om unit testing)