Moderna webbapplikationer med Native RIA stacken

Då var det bloggdags igen! Förra gången var det java och maskinlärande, nu blir det modern webbutveckling med Bootstrap, jQuery, Ajax, ASP.NET MVC och OrigoDB som backend. I denna första post börjar vi med användargränsnittet och bygger en prototyp. I nästa post skall vi bygga server-sidan och knyta ihop allt med jQuery ajax. Så starta notepad, eller annan favoriteditor, och häng med!

Webbrevolutionen

Det händer mycket inom webb just nu. Med html5, javascript, css3, websockets och hundratals olika ramverk kan man bygga rika, interaktiva webbapplikationer. Jag brukar kalla denna stacken för Native RIA. Samtidigt ser vi andra RIA platformar på tillbakagång. Flash är borta från iOS och Silverlight, vad är det? Med CSS3 Media Queries är det möjligt att skapa responsiva webbappar som anpassar sig till mobiler, plattor och olika skärmstorlekar.

Typiskt för Native RIA är single-page webbappar där sidan laddas en gång och sedan drivs av javascript händelser och asynkrona serveranrop. Att ladda och rendera hela sidan vid varje förändring, även små, är inte speciellt användarvänligt och dessutom tyngre för servern. Det finns många javascript ramverk som stödjer ajax och manipulation av DOM-trädet. Exemplet kommer använda jQuery, min favorit.

Börja alltid med en prototyp

Det sägs att en bild säger mer än tusen ord. Med en interaktiv prototyp får kunden känna på vad de får och kan ge feedback tidigt i utvecklingen. Med prototypen som utgångsläge blir det också enklare att bygga rätt backend från början. 

I detta stadiet brukar jag använda en enklare text editor, fast Visual Studio har numera riktigt bra stöd för html, css och javascript. Webbläsaren Chrome har bra inbyggda utvecklarverktyg med interaktiv konsol. Ett annat verktyg för att enkelt testa saker med olika javascript ramverk är jsfiddle, här är en cool demo av jQuery ElementStacks.

Lizzy

Som exempel tänkte jag att vi bygger en extremt enkel single-page app där användaren kan hantera ett antal listor. Målen är att göra det extremt enkelt och avskalat, med få men bra features, enkelt att använda samt med ett snyggt gui. Så här ser prototypen ut. Man klickar för att redigera text och pekar för att få fram knappar med olika alternativ.

Skärmdump prototyp Lizzy

Bootstrap

Bootstrap är ett ramverk med css-klasser och javascript-baserade komponenter med stöd för snabb och enkel utveckling av webbgränssnitt. Det stöder även responsiva webbapplikationer. Det är idealiskt för att göra snabba prototyper.

För att använda bootstrap länkar man in deras CSS. Man kan ladda ner och servera från den egna webbservern eller länka direkt från ett CDN, Content Delivery Network:

Det finns olika teman för bootstrap från bootswatch, också tillgängliga via CDN. Jag har använt temat "readable" i prototypen.

Här är ett block html (kopierat från bootstraps webb!) som renderar en responsive meny. Den kollapsar och visar en menyikon när fönsterbredden blir för liten. Klistra blocket i body-taggen ovan och prova!

I övrigt kommer vi använda en 12-kolumners layout, 3 kolumner för menyn till vänster och 9 kolumner för innehållet till höger, listan. Vi använder en modal dialog för att bekräfta borttagning samt enkla UL element med transparenta INPUT-fält för själva listorna, det visas nedan eftersom vi kommer manipulera det med jQuery. Hela designen kan du se i den färdiga prototypen.

Javascript

För att sidor skall laddas snabbare är det nu vanligast att man lägger javascript i slutet av html-dokumentet, sist i body-taggen. Vi börjar med att importera jQuery, jQueryUI för drag/drop i listan och bootstraps javascript lib som behövs för den modal dialogen.

jQuery är en funktion med ett antal överlagrade argument. I grunden används jQuery för att selektera element i DOM-trädet och sedan manipulera de valda elementen på olika sätt. Här är ett exempel som döljer alla div-element på sidan med en långsam animering.

   jQuery('div').hide('slow');

Dollartecket, $, är ett alias för jQuery, eller en variabel som refererar till samma objekt om man skall vara helt korrekt. Således kunde man skrivit

   $('div').hide('slow');

istället. Testa direkt med jsfiddle!

För att slå på drag/drop på listan, selekterar vi på id och anropar jqueryUI funktionen sortable med lite in-parametrar som styr beteendet. Detta gör vi i en funktion som skickas som argument till jQuery-funktionen. Funktionen anropas först när DOM-trädet laddats, detta garanterar att vi inte refererar till DOM-noder som ännu inte finns. Hela konstruktionen är en kortform för $(document).ready(function(){...})

Användarinteraktion

Nu börjar det bli intressant. Det som återstår av prototypen är att rigga upp alla händelsehanterare med jQuery. Bland annat skall det:

• Visas knappar med ikoner (flytta, papperskorg) när vi pekar på ett element i listan
• Visas en bekräftelse dialog när vi klickar på ta-bort knappen
• Tas bort rätt rad i listan vid bekräftelse
• Göras uppdateringar mot servern med ajax

Alla dess händelser binds till funktioner med hjälp av jQuery, även dessa i document.ready callbacken. Observera alla todo-kommentarer där vi senare skall göra ajax-anrop för att göra uppdateringar på serversidan. Vi skriver även till konsolen för att se att vi har rätt data för uppdatering.

Sammanfattning

Vi har skapat en single-page webapp (Native RIA) med html, bootstrap css, jQuery och jQueryUI. I nästa post skall vi bygga server-sidan med ASP.NET MVC, en OrigoDB backend och knyta ihop allt med jQuery ajax.