ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications

914 views

Published on

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
914
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications

  1. 1. Building single page, modular HTML5 applications for PC and Mobile Lorant Domokos Microsoft Student Partners Fortech@ itcampro # itcamp12 Premium conference on Microsoft technologies
  2. 2. ITCamp 2012 sponsors Mobile & Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
  3. 3. Agenda Mobile & Development• What are Single Page Applications?• Architecture• Technologies• Knockout fundamentals• Navigation fundamentals• Services layer• Patterns for modular JavaScript code@ itcampro # itcamp12 Premium conference on Microsoft technologies
  4. 4. Spectrum of Web Apps Mobile & Development• Static: consist of static HTML pages, CSS, and images, full page refresh, page does not change• Server Rendered: server dynamically assembles page, JavaScript for validation, hover, full page refresh@ itcampro # itcamp12 Premium conference on Microsoft technologies
  5. 5. Spectrum of Web Apps Mobile & Development• Hybrid Design: similar to server-rendered, but relies heavily on client side Java-Script to deliver an engaging experience. – Islands of richness: islands of interactivity within the site that do not require full-page reloads to change the UI• Single-page Interface: In this model, a full-page load happens only once. Ex: Hotmail, Office Live.• Bani Pierduti is hybrid@ itcampro # itcamp12 Premium conference on Microsoft technologies
  6. 6. Modern Web Applications Mobile & Development• They are standards-focused, no plugins• They are interactive• They limit full-page reloads• They are asynchronous• They manage data• Runs on any device• Can work offline@ itcampro # itcamp12 Premium conference on Microsoft technologies
  7. 7. Keep user is context Mobile & Development• No page reload• Users are kept in context• Fluid experience as they navigate from one task to another• Result: great user experience@ itcampro # itcamp12 Premium conference on Microsoft technologies
  8. 8. Single Page Applications Mobile & Development Rich responsive applications combining thebest of the web and desktop, build with HTML5 and JavaScript@ itcampro # itcamp12 Premium conference on Microsoft technologies
  9. 9. Architecture Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS@ itcampro # itcamp12 Premium conference on Microsoft technologies
  10. 10. Architecture Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS JavaScript Client Side Interaction@ itcampro # itcamp12 Premium conference on Microsoft technologies
  11. 11. Architecture Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Data access service@ itcampro # itcamp12 Premium conference on Microsoft technologies
  12. 12. Architecture Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav Data access service@ itcampro # itcamp12 Premium conference on Microsoft technologies
  13. 13. Architecture Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav JavaScript Client Side Interaction@ itcampro # itcamp12 Premium conference on Microsoft technologies
  14. 14. Architecture Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav Data access service Local Storage@ itcampro # itcamp12 Premium conference on Microsoft technologies
  15. 15. Mobile & Development DEMO MVC 4 SPA@ itcampro # itcamp12 Premium conference on Microsoft technologies
  16. 16. Bani Pierduti Mobile & Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
  17. 17. Technologies Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js Data access service Local Storage@ itcampro # itcamp12 Premium conference on Microsoft technologies
  18. 18. Technologies Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js Data access service Local Storage HTML5@ itcampro # itcamp12 Premium conference on Microsoft technologies
  19. 19. Technologies Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js Data access service Upshot.js? Amplify.js Local Storage HTML5@ itcampro # itcamp12 Premium conference on Microsoft technologies
  20. 20. Technologies Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Nav.js? History.js Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js Data access service Upshot.js? Amplify.js Local Storage HTML5@ itcampro # itcamp12 Premium conference on Microsoft technologies
  21. 21. Technologies Mobile & Development Server Client Knockout.js Backbone.js ASP.NET Rendered Page JsRender HTML/CSS/JS HTML/CSS Nav.js? History.js Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js Data access service Upshot.js? Amplify.js Local Storage HTML5@ itcampro # itcamp12 Premium conference on Microsoft technologies
  22. 22. Knockout Mobile & Development• JavaScript MVVM Framework• MVVM-Model-View-ViewModel – Model-business domain objects – View-visible UI – ViewModel-data/operations on UI@ itcampro # itcamp12 Premium conference on Microsoft technologies
  23. 23. Knockout Mobile & Development• Declarative data bindings, two way• Automatic UI refresh• Dependency tracking, if one object changes all dependent objects change• Templating@ itcampro # itcamp12 Premium conference on Microsoft technologies
  24. 24. Observables Mobile & Development• They are functions• Bindings observe observables• Declare: var p = ko.observable();• Read: var r = p();• Write: p(‘value’);@ itcampro # itcamp12 Premium conference on Microsoft technologies
  25. 25. Observables Mobile & Development• Types: – Observable: ko.observable(‘value’) – Observable array: ko.observableArray([]) – Computed: ko.computed(function() { return vm.firstName() + ‘ ’ + vm.lastName(); }, vm)@ itcampro # itcamp12 Premium conference on Microsoft technologies
  26. 26. Bindings Mobile & Development• Built in: – Text and Appearance – Forms – Control Flow – Templates• Custom bindings@ itcampro # itcamp12 Premium conference on Microsoft technologies
  27. 27. Text and Appearance Mobile & Development• Visible-toggle visibility• Text-text value of DOM element• Html-raw HTML of DOM element• Css-css classes• Style-raw style attributes• Attr-any attribute of DOM element@ itcampro # itcamp12 Premium conference on Microsoft technologies
  28. 28. Forms Mobile & Development• Click-click event handling• Event-handling any event of DOM element• Submit-invoked when form is submitted• Enable-set as enabled• Disable-set as disabled• Value-value of DOM element• Checked-checkbox, radio button• Etc.@ itcampro # itcamp12 Premium conference on Microsoft technologies
  29. 29. Control Flow Mobile & Development• If-executed if condition is true• Ifnot-executes if condition is false• Foreach-executes for each item in collection – $index – $data• With-Executes for the specified child object@ itcampro # itcamp12 Premium conference on Microsoft technologies
  30. 30. Templates Mobile & Development• JavaScript templates-traditional JavaScript template in <script> tag• Containerless control flow: template-less, comment based syntax@ itcampro # itcamp12 Premium conference on Microsoft technologies
  31. 31. Navigation and Browser History Mobile & Development• Traditional: browser manages history, back and forward buttons• URLs can contain a fragment identifier (hash) – This is the part after the # sign• Fragment identifier may also contain name value pairs@ itcampro # itcamp12 Premium conference on Microsoft technologies
  32. 32. Navigation and Browser History Mobile & Development• If only the fragment identifier changes the browser doesn’t do a page refresh• They are also not added to history automatically• Fragment identifies can be used to manage screen layout• Application can handle HTML 5 hashchange event@ itcampro # itcamp12 Premium conference on Microsoft technologies
  33. 33. Upshot.js Mobile & Development• “Proxy” on client side• Retrieves data from service• Paging• Tracks changes• Offline• Is it ready?@ itcampro # itcamp12 Premium conference on Microsoft technologies
  34. 34. Amplify.js Mobile & Development• Set of components designed to solve common web application problems with a simplistic API• Request management: provides a clean and elegant request abstraction• Client Side Browser & Mobile Device Storage: HTML5 LocalStorage on modern browsers• Client Side Component Communication: pub/sub component to component communication@ itcampro # itcamp12 Premium conference on Microsoft technologies
  35. 35. WebAPI Mobile & Development Alessandro Pilotti already demonstrated@ itcampro # itcamp12 Premium conference on Microsoft technologies
  36. 36. Modularity Mobile & Development• Patterns are recommended for separation of concerns, encapsulation, abstraction, etc• Namespaces: var bp = bp || {};• Structuring patterns• Promise and Deferred patterns for handling asynchrony• Advanced(Not discussed here): – Publish/Subscribe for module communication – Asynchronous module definitions – jQuery Widgets, Plugins@ itcampro # itcamp12 Premium conference on Microsoft technologies
  37. 37. JavaScript structuring patterns Mobile & Development• Prototype pattern• Module pattern• Revealing module pattern• Revealing prototype pattern@ itcampro # itcamp12 Premium conference on Microsoft technologies
  38. 38. Prototype pattern Mobile & Developmentvar Calculator = function(element) { this.eqControl = $(element);}Calculator.prototype = { add: function(x, y) { var val = x + y; this.eqControl.text(val); }}@ itcampro # itcamp12 Premium conference on Microsoft technologies
  39. 39. Prototype pattern Mobile & Development• Pros: – JS built in features – Modularize code into reusable objects – Variables/functions taken out of global namespace – Functions loaded into memory once – Can “override” functions• Cons: – “this” can be tricky – Contstructor separate from prototype definition@ itcampro # itcamp12 Premium conference on Microsoft technologies
  40. 40. Module pattern Mobile & Developmentvar Calculator = function(element) { // Private member. this.eqControl = $(element); return { // Public interface. add: function(x, y) { var val = x + y; this.eqControl.text(val); } };}@ itcampro # itcamp12 Premium conference on Microsoft technologies
  41. 41. Module pattern Mobile & Development• Pros: – Modularize code into reusable objects – Variables/functions taken out of global namespace – Expose only public members, hide private• Cons: – Functions will be duplicated for each instance – Not easy to extend@ itcampro # itcamp12 Premium conference on Microsoft technologies
  42. 42. Revealing Module pattern Mobile & Developmentvar Calculator = function(element) { // Private members. var eqControl = $(element), add: function(x, y) { var val = x + y; this.eqControl.text(val); }; return { // Public interface. doAdd: add };}@ itcampro # itcamp12 Premium conference on Microsoft technologies
  43. 43. Revealing Module pattern Mobile & Development• Pros: – Modularize code into reusable objects – Variables/functions taken out of global namespace – Expose only public members, hide private – Cleaner way to expose public members• Cons: – Functions will be duplicated for each instance – Not easy to extend@ itcampro # itcamp12 Premium conference on Microsoft technologies
  44. 44. Revealing Prototype pattern Mobile & Developmentvar Calculator = function(element) { this.eqControl = $(element);}Calculator.prototype = function() { var add = function(x, y) { var val = x + y; this.eqControl.text(val); }; return { doAdd: add };}@ itcampro # itcamp12 Premium conference on Microsoft technologies
  45. 45. Revealing Module pattern Mobile & Development• Pros: – Combines Prototype and Revealing Module patterns – Modularize code into reusable objects – Variables/functions taken out of global namespace – Functions loaded into memory once – Can “override” functions• Cons: – “this” can be tricky – Contstructor separate from prototype definition@ itcampro # itcamp12 Premium conference on Microsoft technologies
  46. 46. Promise pattern Mobile & Development• JavaScript requests/operations are asynchronous: – Ajax – Animations – Etc.• How do we link operations if we have dependencies?@ itcampro # itcamp12 Premium conference on Microsoft technologies
  47. 47. Promise pattern Mobile & Development• jQuery.Deferred public API• defferred.done()• defferred.fail()• defferred.then()• defferred.resolve()• defferred.reject()• jQuery.when()@ itcampro # itcamp12 Premium conference on Microsoft technologies
  48. 48. Responsive web design Mobile & Development• Want to build single application for phone, tablet, PC, TV because – No duplicate effort – Reuse previous knowledge – Same content across platforms• Solution: Responsive web design (topic for another talk)@ itcampro # itcamp12 Premium conference on Microsoft technologies
  49. 49. Responsive web design Mobile & Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
  50. 50. Q&A@ itcampro # itcamp12 Premium conference on Microsoft technologies

×