Att bygga fotowebapp med backbone, topcoat och hårdvaruaccelererade slides
Jag har den senaste tiden utvecklat en ensides (one page) webbapp inför ett event där användarna skall kunna dela bilder under eventet tillsammans. Jag tänkte därför dela med mig av några lärdomar jag har fått på vägen med att jobba med liknande lösningar där man skall kunna animera hela sidan (pageslide), ladda upp bilder från en telefon och dessutom kunna strukturera hela appen på ett (för en utvecklares) bra sätt.
Du skall inte se det här inlägget som något slags recept eller färdigt upplägg för att göra webbappar. Det handlar ju mer om att hitta de komponenter som man själv gillar och gör jobbet enklare för just det man utvecklar. Så se det mer som några idéer för komponenter som kan användas och göra webbutvecklarlivet lite smidigare.
Backbone.js som grundstruktur i appen
När man jobbar med ensidesappar så tycker jag om att strukturera hela appen i javascript och undvika så mycket ren html som möjligt. Visserligen blir det lite enklare att ha vissa delar som templates (använder här underscore.js till templates) men det allra mesta genereras på ett alldeles utmärkt sätt av bra mv* ramverk.
Det finns många javascript mvc (mv*?) ramverk, det jag själv har lärt mig tillräckligt bra är Backbone.js och det gillar jag och kommer fortsätta att jobba med. Jag gillar att det finns en tydlig struktur för hur man kan jobba i Backbone men det går ganska enkelt att lämna denna struktur och göra egna lösningar om så krävs. Det är också väldigt enkelt att bygga ett backend på servern till Backbone.
Jag började att kika på ett helt ramverk för att göra html5 appar som heter Ionicframework. Jag tyckte att det var snyggt och var trevligt nog kopplat till Cordova om man skulle vilja göra om det hela till en app som går att lägga upp på Google play/appstore. Här använder man dock angular.js som mv* ramverk och då jag inte riktigt hade tid att lära mig det så fick det vänta. Det kan dock vara ett bra tips att titta på för dig som utvecklar html5 appar.
Topcoat som css grund
I det här projektet ville jag även testa och få lite ny inspiration gällande css. Man kan förstås alltid skriva denna själv men jag gillar att använda mig av andras lösningar ibland för att få ny inspiration till bra idéer. Den här gången föll valet på topcoat som är css framtagen för just webbappar och för att dessa skall prestera bra (enligt dem själva). Bakom topcoat ligger adobe och det görs som ett open source projekt.
Jag tyckte att Topcoat hade många riktigt bra och rätt snygga lösningar men var ändå att tvungen att skriva en hel del egen css (355 rader) för att få till alla delar. Jag blev heller inte klok på hur de hade tänkt med ikonerna i topcoat och valde att strunta i dem och istället använda icomatic icons som är font icons.
Jag tror inte att jag kommer att återanvända topcoat igen som css grund, det var alldeles för mycket som var otydligt i dokumentationen och inte agerade på det sätt som jag själv tycker är bra.
Att använda hårdvaruaccelererade slides
En sak som jag själv tycker är viktigt för att få ”appkänsla” i en applikation är att slides och animeringar är snabba, smidiga och snygga. Här gjorde jag därför så att jag använde css3 och de ”transforms” som finns där. Eftersom det finns bra stöd för dessa hårdvaruaccelererade i just mobiler så blev det väldigt bra och snyggt. Testa gärna detta här nedan så får du en känsla för det:
[webapp_slider_demo]
Javascripts Filereader api och sätt att ”komma åt” kameran i en mobil
Själv grunden i webbappen var att man skulle kunna dela bilder i ett flöde (instagram typ). För att det skall kunna fungera krävs åtkomst till mobilens kamera, något som tidigare har varit svårt att få från en webbsida. Idag verkar dock det vara allmänt möjligt att genomföra genom att lägga till attributen accept=”image/*” capture=”camera” i en file input.
JAVASCRIPT/JQUERY
$(':file').change(function () {
var self = this,
pic = this.files[0],
reader = new FileReader();
reader.onload = function(e){
$(self).after('<img src="' + e.target.result + '" width="100%" />');
};
reader.readAsDataURL(pic);
});
HTML:
<input id="file" type="file" accept="image/*" capture="camera" />
Det är då relativt enkelt att med hjälp av javascript lyssna på om en fil, dvs en bild, läggs till i formuläret och sedan läsa in denna fil med hjälp av Filereader API:et. För att visa hur detta fungerar så kan du testa demon här nedan där en bild läses in och en mini preview visas av denna bild:
[webapp_camera_demo]
Obs! Inga bilder laddas upp på servern eller sparas.
Laravel som backend
Eftersom Backbone i mångt och mycket är byggt för att man skall ha REST backend (det går ändå att klara sig utan) så valde jag att lägga ett backend byggt på php ramverket Laravel som har riktigt bra stöd för detta. Jag skulle hellre vilja använda wordpress och alla de fördelar som man får genom det men jag har inte koll på om det går att bygga liknande REST api:er i wordpress ännu. Jag vet att det jobbas på ett WP-Api men det är ännu inte riktigt klart och ligger för tillfället som ett plugin som skall utvecklas och in i wordpress core.
Jag tycker ändå att det fungerar mycket bra att jobba med Laravel i det här fallet.
Var är demon?
Nu tänker du säkert att du gärna skulle vilja se hur detta fungerar live. Det hade ju jag själv också velat se om jag läst hela det här inlägget. Men tyvärr kan jag inte lägga upp en demo på just denna webbapp. Jag skall göra fler liknande applikationer i framtiden så det kommer definitivt att finnas möjlighet att lägga upp andra och liknande demos. Jag hoppas ändå att inlägget har gett lite tips och idéer för dig som håller på med liknande saker.