developing a web app from ux to finish

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