Download - Developing a Web App from UX to Finish
![Page 1: Developing a Web App from UX to Finish](https://reader036.vdocuments.us/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/1.jpg)
![Page 2: Developing a Web App from UX to Finish](https://reader036.vdocuments.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/14.jpg)
Primer
![Page 15: Developing a Web App from UX to Finish](https://reader036.vdocuments.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/22.jpg)
![Page 23: Developing a Web App from UX to Finish](https://reader036.vdocuments.us/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.us/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.us/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.us/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/26.jpg)
![Page 27: Developing a Web App from UX to Finish](https://reader036.vdocuments.us/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/27.jpg)
![Page 28: Developing a Web App from UX to Finish](https://reader036.vdocuments.us/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.us/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/29.jpg)
REŠITEV
![Page 30: Developing a Web App from UX to Finish](https://reader036.vdocuments.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/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.us/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/56.jpg)
Demo 8RequireJS & PubSub
![Page 57: Developing a Web App from UX to Finish](https://reader036.vdocuments.us/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.us/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.us/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.us/reader036/viewer/2022062514/558896bfd8b42afc508b4733/html5/thumbnails/60.jpg)
HVALA