Developing a Web App from UX to Finish

2,492 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,492
On SlideShare
0
From Embeds
0
Number of Embeds
1,307
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Developing a Web App from UX to Finish

  1. 1. From UX to FinishAnže VodovnikSoftware Architect @ Studio Pešec d.o.o.
  2. 2. Kdo sem? Programski arhitekt 10+ let izkušenj http://www.linkedin.com/in/avodovnik Twitter: @avodovnik http://lab.studiopesec.com
  3. 3. AGENDA Proces razvoja web aplikacije – metro:Wife Načrtovanje Uporabniška izkušnja – kaj, kdaj, kako? Implementacija – kaj, kdaj, kako? Diskusija
  4. 4. 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
  5. 5. PROCES Razvojna Ideja Analitik Arhitekt Tester ekipa
  6. 6. PROCES Razvojna Ideja Analitik UX Arhitekt Tester ekipa
  7. 7. PROCES Razvojna Ideja Analitik UX Arhitekt Tester ekipa
  8. 8. KAJ PA „UX“ SPLOH JE? „A persons 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
  9. 9. KAJ PA „UX“ SPLOH JE? „A persons 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
  10. 10. UPORABNIŠKA IZKUŠNJA, 2 1/2. del Več posvečanja izkušnji kot uporabnosti Efektivnost Efikasnost Subjektivno zadovoljstvo } Tipični faktorji uporabnosti
  11. 11. UPORABNIŠKA IZKUŠNJA, 2 2/2. delSpletne strani & aplikacije Marketing & Branding Oblikovanje Uporabnost Uporabniška izkušnja
  12. 12. 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
  13. 13. Primer
  14. 14. Sara & telefonski imenik• UX ekspert & Informacijski Arhitekt• (pozabljiva) lastnica iPhone-a PROBLEM: izgubljeni kontakti
  15. 15. 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
  16. 16. UX arhitekt RazvojnaIdeja Arhitekt Tester / analitik ekipa
  17. 17. UX arhitekt RazvojnaIdeja Arhitekt Tester / analitik ekipa
  18. 18. UX arhitekt RazvojnaIdeja Arhitekt Tester / analitik ekipa
  19. 19. Implementacija UX arhitekt Razvojna Ideja Arhitekt Tester / analitik ekipa
  20. 20. UX in UPORABNIŠKI VMESNIK Uporabniki so vedno zahtevnejši Pričakovanja vedno višja Klienti so neizkoriščeni Brskalniki so vedno hitrejši
  21. 21. KLIENTI JavaScript podprt na glavnih platformah Mobilno Desktop (Windows, Mac) Prvi (edini) stik uporabnika z aplikacijo Čustveno dojemanje Klient postaja svoja aplikacija
  22. 22. 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
  23. 23. PROBLEM Razvijalci odkrivajo toplo vodo Različne implementacije UI-ja Prvo srečanje z jQueryem Novo kladivo DOM = žebelj
  24. 24. CILJIAli „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
  25. 25. REŠITEV
  26. 26. 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
  27. 27. BACKBONE.JS Osnovni objekti Modeli (Model) Zbirke (Collection) Pogledi (View) Usmerjevalnik / aplikacija (Router) Dogodki (Events) Sinhronizacija Kvazi JavaScript MVC
  28. 28. BACKBONE.JS Malo zunanjih odvisnosti Underscore.js Json2.js (za sinhronizacijo) jQuery (za View) Enostavna uporaba Vrhunska dokumentacija
  29. 29. Modeli Poljubni atributi Podatkovna strukturavar Contact = Backbone.Model.extend({});var myContact = new Contact();myContact.set({ firstName: Anze, lastName: Vodovnik‚});
  30. 30. Modeli, 2. del var myContact = new Contact({ firstName: Anze, lastName: Vodovnik‚ }); myContact.get(‚firstName‘);
  31. 31. 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.“ } } } });
  32. 32. Zbirke Več kot le array Sinhronizacija, eventi... var AddressBook = Backbone.Collection.extend({ model: Contact, initialize: function() {} }); var myAddressBook = new AddressBook(); myAddressBook.add(myContact);
  33. 33. Pogledi EDINA vez med UI in modelom Manipulacija HTML-ja
  34. 34. Usmerjevalnik / aplikacija Aplikacija = več povezanih pogledov Poti (routes), akcijevar Workspace = Backbone.Router.extend({ routes: { „details/:id“ : „details“, „search/:query/p:page“ : „search“ }, details: function(id) { ... } search: function(query, page) { ... }});
  35. 35. M V CModel odel iew View ontroller RouterCollection
  36. 36. Demo 1-6Uvod v Backbone.js
  37. 37. 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
  38. 38. Backbone.Sync & ASP.NET MVC MVC je prinesel RESTful URL-je Od MVC 2.0 FUTURES dalje, podpora za JSON serializacijo objektov v requestu
  39. 39. Demo 7Backbone.Sync & ASP.NET MVC
  40. 40. Backbone.Sync je funkcija lahko jo prepišemo lahko jo spremenimo LocalStorage adapter - Jérôme Gravel-Niquet https://github.com/jeromegn/localtodos
  41. 41. CILJI – PONOVNI PREGLEDAli „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
  42. 42. FRAMEWORK & GLUE KODAAli „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
  43. 43. RequireJSModule & odvisnosti Asinhrono nalaganje Nadzor odvisnosti Moduli Podpira jQuery (require-jquery.js) http://requirejs.org/
  44. 44. PubSubRazklop funkcionalnosti „lastni“ dogodki, brez relacije z DOMom Kopija iz DOJO ogrodja (Pete Higgins) $.publish, $.subscribe https://gist.github.com/826794
  45. 45. Underscore.jsUtility 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/
  46. 46. 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]
  47. 47. Underscore.js Map/Reduce – štetje besedvar lyrics = [ {line : 1, words : "Im a lumberjack and Im okay"}, {line : 2, words : "I sleep all night and I work all day"}, {line : 3, words : "Hes a lumberjack and hes 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 ... }
  48. 48. Underscore.js & Predloge (templates) Out-of-the-box funkcionalnost _.template(); Loči HTML od JavaScript/logike
  49. 49. Underscore.js & Predloge (templates)
  50. 50. Underscore.js & Predloge (templates)
  51. 51. Sestava „JavaScript“ aplikacijeSeznam kontaktov Prikaz kontakta Iskalnik ... Application Framework (Backbone...) Diagnostics, Events, core moduli (JSON...) jQuery / Ogrodje
  52. 52. Demo 8RequireJS & PubSub
  53. 53. http://www.metrowife.net
  54. 54. POVZETEK Razvoj je podrejen čustvom uporabnika in izkušnji pri uporabi (UX) Procesi so spremenjeni Vedno večja pomembnost JavaScript aplikacij Arhitektura Code reuse
  55. 55. 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
  56. 56. HVALA

×