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
From UX to FinishAnže VodovnikSoftware Architect @ Studio Pešec d.o.o.
Kdo sem?
Programski arhitekt10+ let izkušenjhttp://www.linkedin.com/in/avodovnik
Twitter: @avodovnikhttp://lab.studiopesec.com
AGENDA
Proces razvoja web aplikacije – metro:WifeNačrtovanjeUporabniška izkušnja – kaj, kdaj, kako?Implementacija – kaj, kdaj, kako?Diskusija
PROCES RAZVOJA (WEB) APLIKACIJE
Razvoj (spletne) aplikacije je težavenRazlične in spreminjajoče se zahteve
SkalabilnostPerformanseRobustnostPovezljivost
Različni razvojni procesiWaterfallAgile
PROCES
Ideja Analitik Arhitekt Razvojna ekipa Tester
PROCES
Ideja Analitik UX Arhitekt Razvojna ekipa Tester
PROCES
Ideja Analitik UX Arhitekt Razvojna ekipa Tester
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
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
UPORABNIŠKA IZKUŠNJA, 2 1/2. del
Več posvečanja izkušnji kot uporabnosti
Efektivnost Efikasnost Subjektivno zadovoljstvo
}Tipični faktorji uporabnosti
UPORABNIŠKA IZKUŠNJA, 2 2/2. delSpletne strani & aplikacije
Uporabniška izkušnja
Uporabnost
Oblikovanje
Marketing & Branding
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
Primer
Sara & telefonski imenik• UX ekspert & Informacijski
Arhitekt• (pozabljiva) lastnica iPhone-a
PROBLEM: izgubljeni kontakti
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
Ideja UX arhitekt / analitik Arhitekt Razvojna
ekipa Tester
Ideja UX arhitekt / analitik Arhitekt Razvojna
ekipa Tester
Ideja UX arhitekt / analitik Arhitekt Razvojna
ekipa Tester
Implementacija
Ideja UX arhitekt / analitik Arhitekt Razvojna
ekipa Tester
UX in UPORABNIŠKI VMESNIK
Uporabniki so vedno zahtevnejšiPričakovanja vedno višja
Klienti so neizkoriščeniBrskalniki so vedno hitrejši
KLIENTI
JavaScript podprt na glavnih platformah
MobilnoDesktop (Windows, Mac)
Prvi (edini) stik uporabnika z aplikacijo
Čustveno dojemanje
Klient postaja svoja aplikacija
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
PROBLEM
Razvijalci odkrivajo toplo vodoRazlične implementacije UI-ja
Prvo srečanje z jQueryemNovo kladivo DOM = žebelj
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“
REŠITEV
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
BACKBONE.JS
Osnovni objektiModeli (Model)Zbirke (Collection)Pogledi (View)Usmerjevalnik / aplikacija (Router)Dogodki (Events)Sinhronizacija
Kvazi JavaScript MVC
BACKBONE.JS
Malo zunanjih odvisnostiUnderscore.jsJson2.js (za sinhronizacijo)jQuery (za View)
Enostavna uporabaVrhunska dokumentacija
Modeli
Poljubni atributiPodatkovna struktura
var Contact = Backbone.Model.extend({});
var myContact = new Contact();myContact.set({ firstName: 'Anze', lastName: 'Vodovnik‚});
Modeli, 2. del
var myContact = new Contact({ firstName: 'Anze', lastName: 'Vodovnik‚});
myContact.get(‚firstName‘);
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.“}
}}
});
Zbirke
Več kot le arraySinhronizacija, eventi...
var AddressBook = Backbone.Collection.extend({
model: Contact,initialize: function() {}
});
var myAddressBook = new AddressBook();myAddressBook.add(myContact);
Pogledi
EDINA vez med UI in modelomManipulacija HTML-ja
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) { ... }
});
Model View Controller
ModelCollection
View Router
Demo 1-6Uvod v Backbone.js
Backbone.Sync
Out-of-the-box sinhronizacijaCRUD over REST
Create > POST /collectionRead > GET /collection[/id]Update > PUT /collection/idDelete > DELETE /collection/id
Backbone.Sync & ASP.NET MVC
MVC je prinesel RESTful URL-jeOd MVC 2.0 FUTURES dalje, podpora za JSON serializacijo objektov v requestu
Demo 7Backbone.Sync & ASP.NET MVC
Backbone.Sync
je funkcijalahko jo prepišemolahko jo spremenimo
LocalStorage adapter - Jérôme Gravel-Niquet https://github.com/jeromegn/localtodos
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“
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
RequireJSModule & odvisnosti
Asinhrono nalaganjeNadzor odvisnostiModuliPodpira jQuery (require-jquery.js)
http://requirejs.org/
PubSubRazklop funkcionalnosti
„lastni“ dogodki, brez relacije z DOMomKopija iz DOJO ogrodja (Pete Higgins)$.publish, $.subscribe
https://gist.github.com/826794
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; });
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]
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 ... }
Underscore.js & Predloge (templates)
Out-of-the-box funkcionalnost_.template();Loči HTML od JavaScript/logike
Underscore.js & Predloge (templates)
Underscore.js & Predloge (templates)
Sestava „JavaScript“ aplikacije
jQuery / Ogrodje
Diagnostics, Events, core moduli (JSON...)
Application Framework (Backbone...)
Seznam kontaktov Prikaz kontakta Iskalnik ...
Demo 8RequireJS & PubSub
http://www.metrowife.net
POVZETEK
Razvoj je podrejen čustvom uporabnika in izkušnji pri uporabi (UX)
Procesi so spremenjeni Vedno večja pomembnost JavaScript aplikacij
ArhitekturaCode reuse
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
HVALA