developing a web app from ux to finish
DESCRIPTION
More and more functionality is being shifted to the client side, more specifically it is very often moved to the Client’s browser. Developers and customers are also ever more conscious of user experience and interaction design. This talk will therefore focus on the whole development lifecycle – we will plan the interaction and user experience for a simple web application, develop it using advanced client-side techniques and very briefly touch on how to convince our MVC web application to play nice with mobile browsers as well. We will explore how to implement relevant UI patterns, look at best practices and focus on optimizing our application experience.TRANSCRIPT
![Page 1: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/1.jpg)
![Page 2: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/2.jpg)
From UX to FinishAnže VodovnikSoftware Architect @ Studio Pešec d.o.o.
![Page 3: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/3.jpg)
Kdo sem?
Programski arhitekt10+ let izkušenjhttp://www.linkedin.com/in/avodovnik
Twitter: @avodovnikhttp://lab.studiopesec.com
![Page 4: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/4.jpg)
AGENDA
Proces razvoja web aplikacije – metro:WifeNačrtovanjeUporabniška izkušnja – kaj, kdaj, kako?Implementacija – kaj, kdaj, kako?Diskusija
![Page 5: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/5.jpg)
PROCES RAZVOJA (WEB) APLIKACIJE
Razvoj (spletne) aplikacije je težavenRazlične in spreminjajoče se zahteve
SkalabilnostPerformanseRobustnostPovezljivost
Različni razvojni procesiWaterfallAgile
![Page 6: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/6.jpg)
PROCES
Ideja Analitik Arhitekt Razvojna ekipa Tester
![Page 7: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/7.jpg)
PROCES
Ideja Analitik UX Arhitekt Razvojna ekipa Tester
![Page 8: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/8.jpg)
PROCES
Ideja Analitik UX Arhitekt Razvojna ekipa Tester
![Page 9: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/9.jpg)
KAJ PA „UX“ SPLOH JE?
„A person's perceptions and responses that result from the use or anticipated use of a product, system or service“
- ISO 9241-210; Ergonomics of human system interaction
![Page 10: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/10.jpg)
KAJ PA „UX“ SPLOH JE?
„A person's perceptions and responses that result from the use or anticipated use of a product, system or service“
- ISO 9241-210; Ergonomics of human system interaction
![Page 11: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/11.jpg)
UPORABNIŠKA IZKUŠNJA, 2 1/2. del
Več posvečanja izkušnji kot uporabnosti
Efektivnost Efikasnost Subjektivno zadovoljstvo
}Tipični faktorji uporabnosti
![Page 12: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/12.jpg)
UPORABNIŠKA IZKUŠNJA, 2 2/2. delSpletne strani & aplikacije
Uporabniška izkušnja
Uporabnost
Oblikovanje
Marketing & Branding
![Page 13: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/13.jpg)
KAKO RAZUMETI UPORABNIKOVA ČUSTVA?
AnalizaKaj ljudem pomeni „address book“?Kaj so problemi, ki jih imajo?Konkurenca na področju
Analiza prisotnosti
Določimo story-e (+ persone)Izris Wireframe-ov Design
![Page 14: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/14.jpg)
Primer
![Page 15: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/15.jpg)
Sara & telefonski imenik• UX ekspert & Informacijski
Arhitekt• (pozabljiva) lastnica iPhone-a
PROBLEM: izgubljeni kontakti
![Page 16: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/16.jpg)
Sara & telefonski imenik• UX ekspert & Informacijski
Arhitekt• (pozabljiva) lastnica iPhone-a
PROBLEM: izgubljeni kontaktiIDEJA: aplikacija za upravljanje s kontakti!
Ideja UX arhitekt / analitik Arhitekt Razvojna
ekipa Tester
![Page 17: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/17.jpg)
Ideja UX arhitekt / analitik Arhitekt Razvojna
ekipa Tester
![Page 18: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/18.jpg)
Ideja UX arhitekt / analitik Arhitekt Razvojna
ekipa Tester
![Page 19: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/19.jpg)
Ideja UX arhitekt / analitik Arhitekt Razvojna
ekipa Tester
![Page 20: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/20.jpg)
Implementacija
Ideja UX arhitekt / analitik Arhitekt Razvojna
ekipa Tester
![Page 21: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/21.jpg)
UX in UPORABNIŠKI VMESNIK
Uporabniki so vedno zahtevnejšiPričakovanja vedno višja
Klienti so neizkoriščeniBrskalniki so vedno hitrejši
![Page 22: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/22.jpg)
![Page 23: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/23.jpg)
KLIENTI
JavaScript podprt na glavnih platformah
MobilnoDesktop (Windows, Mac)
Prvi (edini) stik uporabnika z aplikacijo
Čustveno dojemanje
Klient postaja svoja aplikacija
![Page 24: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/24.jpg)
KLIENTI
JavaScript podprt na glavnih platformah
MobilnoDesktop (Windows, Mac)
Prvi (edini) stik uporabnika z aplikacijo
Čustveno dojemanje
Klient postaja svoja aplikacija, ki teče na eni strani in je na voljo tudi offline
![Page 25: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/25.jpg)
PROBLEM
Razvijalci odkrivajo toplo vodoRazlične implementacije UI-ja
Prvo srečanje z jQueryemNovo kladivo DOM = žebelj
![Page 26: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/26.jpg)
![Page 27: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/27.jpg)
![Page 28: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/28.jpg)
CILJI
1. Stanje & modeli morajo živeti na enem mestu
2. Spremembe modela se morajo odražati na vseh mestih vmesnika, kjer se pojavlja
3. Enostavna struktura kode za vzdrževanje
4. Čim manj „framework“ & „glue“ kode
Ali „kako si arhitekt želi, da bi aplikacija delovala“
![Page 29: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/29.jpg)
REŠITEV
![Page 30: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/30.jpg)
BACKBONE.JS
„Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface. “ - http://documentcloud.github.com/backbone
![Page 31: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/31.jpg)
BACKBONE.JS
Osnovni objektiModeli (Model)Zbirke (Collection)Pogledi (View)Usmerjevalnik / aplikacija (Router)Dogodki (Events)Sinhronizacija
Kvazi JavaScript MVC
![Page 32: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/32.jpg)
BACKBONE.JS
Malo zunanjih odvisnostiUnderscore.jsJson2.js (za sinhronizacijo)jQuery (za View)
Enostavna uporabaVrhunska dokumentacija
![Page 33: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/33.jpg)
Modeli
Poljubni atributiPodatkovna struktura
var Contact = Backbone.Model.extend({});
var myContact = new Contact();myContact.set({ firstName: 'Anze', lastName: 'Vodovnik‚});
![Page 34: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/34.jpg)
Modeli, 2. del
var myContact = new Contact({ firstName: 'Anze', lastName: 'Vodovnik‚});
myContact.get(‚firstName‘);
![Page 35: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/35.jpg)
Modeli, 3. del var Contact = Backbone.Model.extend({
initialize: function(contact) {if(!contact || !contact.firstName) {
throw „MissingRequiredData“;}
},validate: function(attrs) {
if(attrs.email) {if(!_.isString(attrs.email) ||attrs.title.length > 100) {
return „Email not valid.“}
}}
});
![Page 36: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/36.jpg)
Zbirke
Več kot le arraySinhronizacija, eventi...
var AddressBook = Backbone.Collection.extend({
model: Contact,initialize: function() {}
});
var myAddressBook = new AddressBook();myAddressBook.add(myContact);
![Page 37: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/37.jpg)
Pogledi
EDINA vez med UI in modelomManipulacija HTML-ja
![Page 38: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/38.jpg)
Usmerjevalnik / aplikacija
Aplikacija = več povezanih pogledovPoti (routes), akcije
var Workspace = Backbone.Router.extend({routes: { „details/:id“ : „details“, „search/:query/p:page“ : „search“},details: function(id) { ... }search: function(query, page) { ... }
});
![Page 39: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/39.jpg)
Model View Controller
ModelCollection
View Router
![Page 40: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/40.jpg)
Demo 1-6Uvod v Backbone.js
![Page 41: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/41.jpg)
Backbone.Sync
Out-of-the-box sinhronizacijaCRUD over REST
Create > POST /collectionRead > GET /collection[/id]Update > PUT /collection/idDelete > DELETE /collection/id
![Page 42: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/42.jpg)
Backbone.Sync & ASP.NET MVC
MVC je prinesel RESTful URL-jeOd MVC 2.0 FUTURES dalje, podpora za JSON serializacijo objektov v requestu
![Page 43: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/43.jpg)
Demo 7Backbone.Sync & ASP.NET MVC
![Page 44: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/44.jpg)
Backbone.Sync
je funkcijalahko jo prepišemolahko jo spremenimo
LocalStorage adapter - Jérôme Gravel-Niquet https://github.com/jeromegn/localtodos
![Page 45: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/45.jpg)
CILJI – PONOVNI PREGLED
1. Stanje & modeli morajo živeti na enem mestu
MODELI – Model, Collection2. Spremembe modela se morajo odražati
na vseh mestih vmesnika, kjer se pojavlja
VIEW MODEL - Views3. Enostavna struktura kode za
vzdrževanjeMVC je dokaj poznan, uveljavljen
4. Čim manj „framework“ & „glue“ kode
Ali „kako si arhitekt želi, da bi aplikacija delovala“
![Page 46: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/46.jpg)
FRAMEWORK & GLUE KODAAli „nočna mora vseh razvijalcev“
Pisanje lastnega ogrodja se ne splačaOgromno obstoječih, dobrih
Nuget je vaš najboljši prijatelj
DiagnostikaOdvisnostiEventiKomunikacija med widget-i
![Page 47: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/47.jpg)
RequireJSModule & odvisnosti
Asinhrono nalaganjeNadzor odvisnostiModuliPodpira jQuery (require-jquery.js)
http://requirejs.org/
![Page 48: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/48.jpg)
PubSubRazklop funkcionalnosti
„lastni“ dogodki, brez relacije z DOMomKopija iz DOJO ogrodja (Pete Higgins)$.publish, $.subscribe
https://gist.github.com/826794
![Page 49: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/49.jpg)
Underscore.jsUtility belt
~60 „utility“ funkcij„Je kravata k jQuery obleki“
Object-oriented ali funkcijski stil
http://documentcloud.github.com/underscore/
_.map([1, 2, 3], function(n){ return n * 2; });_([1, 2, 3]).map(function(n){ return n * 2; });
![Page 50: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/50.jpg)
Underscore.jsUtility belt
each, map, reduce, any, min, sortBy, groupBy
_.each([1, 2, 3], function(n){ console.log(n); });
_.reduce([5, 10, 15], function(memo, n) { return memo + n; }, 0); 30
_.map([1, 2, 3], function(n) { return n * 5; }); [5, 10, 15]
![Page 51: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/51.jpg)
Underscore.jsMap/Reduce – štetje besed
var lyrics = [{line : 1, words : "I'm a lumberjack and I'm okay"}, {line : 2, words : "I sleep all night and I work all day"}, {line : 3, words : "He's a lumberjack and he's okay"}, {line : 4, words : "He sleeps all night and he works all
day"} ];
_(lyrics).chain() .map(function(line) { return line.words.split(' '); }).flatten() .reduce(function(counts, word) {
counts[word] = (counts[word] || 0) + 1; return counts; }, {})
.value(); => {lumberjack : 2, all : 4, night : 2 ... }
![Page 52: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/52.jpg)
Underscore.js & Predloge (templates)
Out-of-the-box funkcionalnost_.template();Loči HTML od JavaScript/logike
![Page 53: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/53.jpg)
Underscore.js & Predloge (templates)
![Page 54: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/54.jpg)
Underscore.js & Predloge (templates)
![Page 55: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/55.jpg)
Sestava „JavaScript“ aplikacije
jQuery / Ogrodje
Diagnostics, Events, core moduli (JSON...)
Application Framework (Backbone...)
Seznam kontaktov Prikaz kontakta Iskalnik ...
![Page 56: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/56.jpg)
Demo 8RequireJS & PubSub
![Page 57: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/57.jpg)
http://www.metrowife.net
![Page 58: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/58.jpg)
POVZETEK
Razvoj je podrejen čustvom uporabnika in izkušnji pri uporabi (UX)
Procesi so spremenjeni Vedno večja pomembnost JavaScript aplikacij
ArhitekturaCode reuse
![Page 59: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/59.jpg)
POVZETEK
Razvoj je podrejen čustvom uporabnika in izkušnji pri uporabi (UX) [good thing]
Procesi so spremenjeni [good thing]
Vedno večja pomembnost JavaScript aplikacij [semi-good thing]
ArhitekturaCode reuse
![Page 60: Developing a Web App from UX to Finish](https://reader036.vdocuments.net/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/60.jpg)
HVALA