Kateogri arkiv: Webbutveckling

Todo – RIA

Nu är min RIA (Rich internet application) färdigställd (i alla fall inom ramarna för kursen) och då tänkte jag skriva några rader kring projekt och kursen överlag. Applikationen finns att se här, och källkoden finns här.

Innehåll:

  1. Planering
  2. Implementation
  3. localStorage
  4. Kollaborering
  5. slutsats

Anledningen till att jag valde att göra en ”simpel” Todo applikation är för att det kändes som det enklaste sättet att lära sig ett nytt ramverk. Man får lära sig arbeta med vyer, events, CRUD och får en grundläggande förståelse för hur Backbone fungerar.

Planering

Planeringsstadiet i kursen kändes som ett bra moment, man fick tänka igenom alla objekt och funktioner innan man ens hade börjat koda någonting. Det är faktiskt väldigt ovanligt för mig som webbutvecklare som inte riktigt varit med i skarpa projekt och därför skippar planeringsstadiet i varje ”privat” projekt men jag ser klart fördelen med att göra detta och jag ska försöka bättra mig på den fronten.

Implementation

Nästa steg var att börja implementera min planerade applikation. Det var här problemen, självklart, började dyka upp. Först upplevde jag en hel del problem med att förstå hur require.js fungerar men att ha läst igenom Organizing your application using Modules (require.js) så klarnade det hela väldigt mycket faktiskt.

Backbone & Underscore

Nu gällde det bara att förstå sig på Backbone i sig, så där fick jag även spendera några timmar med att läsa på och testa olika implementationer för att få en bättre förståelse. Implementationen gick vidare och jag fick väldigt konstiga och kluriga buggar som både jag och David fick sitta och försöka lösa väldigt länge men felsökning är alltid roligt, i rimliga mått.

Events – It’s tricky.. sometimes

Det klurigaste, men även det smidigast när förståelsen var på plats, var helt klart events och hur man ska jobba med dessa. Det finns t.ex flera olika lösningar för att ta bort en modell som man klickat på, men vad är det smidigaste sättet? Jag valde att implementera en vy för varje enskild Todo som gjorde att jag kunde koppla ett klick event till det elementet som i sin tur gjorde att jag bara kunde köra this.model.destroy();

1
2
3
delete : function() {
  this.model.destroy();
}

localStorage

Jag använde mig utav localStorage som lagring för den här applikationen men har de senaste dagarna även hittat en, i brist på annan kunskap, lösning för att koppla på MongoDB som lagring genom att lägga en url-egenskap på modellen/collectionen som sedan går via ett php script för att hämta data från en MongoDB databas. Denna funktionalitet är inte implementerad i min applikationen utan testad för ”utbildningssyfte”. Eventuell vidare utveckling av applikationen är att implementera en lösning för att applikationen ska använda MongoDB för att spara data externt och när användaren är online, men samtidigt använda localStorage på varje enskild klient för att kunna köra applikationen offline med.

Kollaborering

Jag har ännu inte hunnit göra så mycket i kollaboreringsstadiet förutom det jag nämner i föregående inlägg – kollaborering – pollthingy, vilket var väldigt enkelt att implementera. Sen var det inte heller några större svårigheter att använda github för kollaboreringen, det fungerade väldigt smidigt och har fått mig att inse kraften i github, faktiskt så pass att jag hellre kör det nu än någon annan versionhanterings lösning som t.ex Google Code genom SVN.

Slutsats

Ja, då var vi här.. Allt som allt så har hela projektet varit roligt att genomföra, klurigt, utmanande men samtidigt väldigt givande. Det känns skönt att ha fördjupat sig lite mer i ett javascript ramverk för att lära sig göra ”riktiga” applikationer med det istället för att bara använda javascript för t.ex. valdering av formulär och lite snygga animeringar. Känns som att jag fick upp ögonen för javascript som ett programmeringsspråk ännu mer än tidigare, men det kommer nog aldrig riktigt ersätta kärleken för PHP eller ASP.NET.

Dock, så har jag faktiskt börjat skriva om mina senaste applikationer som t.ex Chatter i Backbone, men jag har ännu inte kommit speciellt långt i utvecklingen.

Summa summarum, Backbone, underscore, require kommer definitivt komma till användning i mina framtida applikationer.

bear css – bygger upp din css mail

Bear CSS är en väldigt smidig tjänst jag just stötte på som skapar en grundläggande css mall för din webbplats. Det som du behöver göra är att du skapar din html sida med de taggar och element du tänkt använda dig utav, med dess attribut satta så som id och klasser. Nästa steg är helt enkelt att bara gå till bearcss.com och ladda upp din htmlfil. Bearcss går igenom filen med en php dom parser och skapar en css mall för dig som du kan ladda ned.

Väldigt smidig tjänst måste jag säga, snabbare ju upp uppstarten av ett projekt ganska mycket genom att man inte behöva skriva ”grund css:en” själv. Me like!

mv* familjen – moduler

Ett obligatoriskt ramverk för kursen är Backbone.js, det framgår på kurswebben men det finns ingen information om vilket, eller om man ska, använda sig utav något template ramverk för presentation utav data på vyerna från modellerna.

Jag har nu suttit och läst Understanding MVC And MVP (For Javascript Developers) av Addy Osmani som har gett mig bra grund för hur backbone fungerar, och även jämför ramverkets skillnader mot ramverk som Spine.js. Backbone förändrar synen på traditionell MVC, från mina tidigare erfarenheter från ASP.NET och PHP, då ramverkets ”controllers” (läs Routers) inte riktigt agerar som en typisk controller för en MVC applikation. Därför har de valt att använda Routers istället, vilket i princip är samma sak men ändå skillnad. Ska man kalla arkitekturen till MVR (Model-View-Router) då istället?

Det anses fortfarande tillhöra MV* familjen, men som många andra ramverk i diverse språk så har de sin egna implementation och tolkning av de olika delarna. Kanske tänker utvecklarna rätt, kanske tänker de fel men det spelar inte så stor roll för min del då jag är ganska så säker på att de vet vad de gör.

Jag har även läst igenom kapitel 12 i boken Javascript Web Applications, som är ett kapitel dedicerat till just backbone.js, och där framfår det att underscore.js erbjuder en bra hantering av t.ex data genom arrayer och lite annat smått och gott. Det framgår även att backbone.js är beroende utav underscore.js, vilket man enkelt missar på backbonejs.com. Jag kommer att använda mig utav underscore.js för templaing delen av applikationen.

Goda råd för att uppmuntra kreativiteten innuti

Såg den här ”presentationen” borta på webdesigntuts och kände att dessa 29 punkter faktiskt kan stämma, och framför allt, hjälpa till i den kreativa processen. Alla har väl någon gång vart i den situationen att man inte vet hur man ska fortsätta, jag ska i alla fall försöka följa dessa råd så gott jag kan så får vi se vad det leder till, förhoppningsvis något bra!

29 WAYS TO STAY CREATIVE from TO-FU on Vimeo.