Developing a Web App from UX to Finish

From UX to Finish
Anže Vodovnik
Software Architect @ Studio Pešec d.o.o.

Kdo sem?
Programski arhitekt
10+ let izkušenj
http://www.linkedin.com/in/avodovnik
Twitter: @avodovnik
http://lab.studiopesec.com

AGENDA
Proces razvoja web aplikacije – metro:Wife
Načrtovanje
Uporabniška izkušnja – kaj, kdaj, kako?
Implementacija – kaj, kdaj, kako?
Diskusija

PROCES RAZVOJA (WEB) APLIKACIJE
Razvoj (spletne) aplikacije je težaven
Različne in spreminjajoče se zahteve
Skalabilnost
Performanse
Robustnost
Povezljivost
Različni razvojni procesi
Waterfall
Agile

PROCES

Razvojna
Ideja Analitik Arhitekt Tester
ekipa

PROCES

Razvojna
Ideja Analitik UX Arhitekt Tester
ekipa

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. del
Spletne strani & aplikacije

Marketing &
Branding
Oblikovanje

Uporabnost

Uporabniška izkušnja

KAKO RAZUMETI UPORABNIKOVA ČUSTVA?

Analiza
Kaj 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

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 kontakti
IDEJA: aplikacija za upravljanje s kontakti!

UX arhitekt Razvojna
Ideja Arhitekt Tester
/ analitik ekipa

/ analitik ekipa

Implementacija

/ analitik ekipa

UX in UPORABNIŠKI VMESNIK
Uporabniki so vedno zahtevnejši
Pričakovanja vedno višja

Klienti so neizkoriščeni
Brskalniki so vedno hitrejši

KLIENTI
JavaScript podprt na glavnih platformah
Mobilno
Desktop (Windows, Mac)
Prvi (edini) stik uporabnika z aplikacijo
Čustveno dojemanje
Klient postaja svoja aplikacija

KLIENTI
JavaScript podprt na glavnih platformah
Mobilno
Desktop (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 vodo
Različne implementacije UI-ja
Prvo srečanje z jQueryem
Novo kladivo
DOM = žebelj

CILJI
Ali „kako si arhitekt želi, da bi aplikacija delovala“
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

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 objekti
Modeli (Model)
Zbirke (Collection)
Pogledi (View)
Usmerjevalnik / aplikacija (Router)
Dogodki (Events)
Sinhronizacija
Kvazi JavaScript MVC

BACKBONE.JS
Malo zunanjih odvisnosti
Underscore.js
Json2.js (za sinhronizacijo)
jQuery (za View)
Enostavna uporaba
Vrhunska dokumentacija

Modeli
Poljubni atributi
Podatkovna 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 array
Sinhronizacija, eventi...
var AddressBook = Backbone.Collection.extend({
model: Contact,
initialize: function() {}
});

var myAddressBook = new AddressBook();
myAddressBook.add(myContact);

Pogledi
EDINA vez med UI in modelom
Manipulacija HTML-ja

Usmerjevalnik / aplikacija
Aplikacija = več povezanih pogledov
Poti (routes), akcije
var Workspace = Backbone.Router.extend({
routes: {
„details/:id“ : „details“,
„search/:query/p:page“ : „search“
},
details: function(id) { ... }
search: function(query, page) { ... }
});

M V C
Model
odel iew
View
ontroller
Router
Collection

Backbone.Sync
Out-of-the-box sinhronizacija
CRUD over REST
Create > POST /collection
Read > GET /collection[/id]
Update > PUT /collection/id
Delete > DELETE /collection/id

Backbone.Sync & ASP.NET MVC
MVC je prinesel RESTful URL-je
Od MVC 2.0 FUTURES dalje, podpora za
JSON serializacijo objektov v requestu

Demo 7
Backbone.Sync & ASP.NET MVC

Backbone.Sync
je funkcija
lahko jo prepišemo
lahko jo spremenimo

LocalStorage adapter - Jérôme Gravel-Niquet
https://github.com/jeromegn/localtodos

CILJI – PONOVNI PREGLED
Ali „kako si arhitekt želi, da bi aplikacija delovala“
1. Stanje & modeli morajo živeti na enem mestu
MODELI – Model, Collection
2. Spremembe modela se morajo odražati na
vseh mestih vmesnika, kjer se pojavlja
VIEW MODEL - Views
3. Enostavna struktura kode za vzdrževanje
MVC je dokaj poznan, uveljavljen
4. Čim manj „framework“ & „glue“ kode

FRAMEWORK & GLUE KODA
Ali „nočna mora vseh razvijalcev“
Pisanje lastnega ogrodja se ne splača
Ogromno obstoječih, dobrih
Nuget je vaš najboljši prijatelj
Diagnostika
Odvisnosti
Eventi
Komunikacija med widget-i

RequireJS
Module & odvisnosti
Asinhrono nalaganje
Nadzor odvisnosti
Moduli
Podpira jQuery (require-jquery.js)

http://requirejs.org/

PubSub
Razklop funkcionalnosti
„lastni“ dogodki, brez relacije z DOMom
Kopija iz DOJO ogrodja (Pete Higgins)
$.publish, $.subscribe

https://gist.github.com/826794

Underscore.js
Utility belt
~60 „utility“ funkcij
„Je kravata k jQuery obleki“

Object-oriented ali funkcijski stil
_.map([1, 2, 3], function(n){ return n * 2; });
_([1, 2, 3]).map(function(n){ return n * 2; });

http://documentcloud.github.com/underscore/

Underscore.js
Utility 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.js
Map/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)

Sestava „JavaScript“ aplikacije
Seznam kontaktov Prikaz kontakta Iskalnik ...

Application Framework (Backbone...)

Diagnostics, Events, core moduli (JSON...)

jQuery / Ogrodje

POVZETEK
Razvoj je podrejen čustvom uporabnika in
izkušnji pri uporabi (UX)
Procesi so spremenjeni
Vedno večja pomembnost JavaScript
aplikacij
Arhitektura
Code 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]
Arhitektura
Code reuse

Developing a Web App from UX to Finish

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Developing a Web App from UX to Finish

Similar to Developing a Web App from UX to Finish (20)

Developing a Web App from UX to Finish