Your SlideShare is downloading. ×
  • Like
Building single page, modular html5 applications for PC and Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Building single page, modular html5 applications for PC and Mobile

  • 4,335 views
Published

Web standards are at a point where they push us to consider replacing native client applications …

Web standards are at a point where they push us to consider replacing native client applications
on PCs and Mobile devices. This way we can leverage our previous knowledge, saving us from
building the same applications over and over again on different platforms.

HTML5, CSS3 enables us to create very rich and engaging web applications through animations
and media. But most web applications still require page refreshes when moving from page to page,
causing them to fall short of their native counterparts.

In this session you will learn how to build rich web applications that part from
the traditional page refresh model. You will gain an insight into how to accomplish this
with highly modular JavaScript, CSS and HTML code, both on PC and Mobile devices.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,335
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
32
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • - They are standards-focused. To have the broadest reach across multiple platforms and devices, applications attempt to implement the current and evolving standards and adopt future standards once ratified.- They are interactive. Modern web applications keep the user engaged by providing constant feedback on their actions. This feedback can come in the form of messages, animations to hide or show elements, mouse-over effects, drag and drop feedback, the automatic refreshing of screen data, animation of various elements, or the implementation of fade-in or fade-out effects. Interactive applications leverage the fast JavaScript engines in modern browsers to perform their client-side tasks.- They limit full-page reloads. Modern web applications seek to limit the number of full page reloads. Reloads are much slower than a localized Ajax call to update a portion of the UI. Full-page reloads also limit the ability to animate state or page changes. By not performing a full-page reload, users can be kept in context, providing a fluid experience as they navigate from one task to another.- They are asynchronous. Modern web applications use Ajax to dynamically load data, page fragments, or other assets instead of performing a full-page reload to acquire data or HTML content. Because the loading of data is asynchronous, the UI is able to stay responsive and keep the user informed while the data request is being fulfilled. This asynchronous on-demand loading also reduces application response time because requests can be tuned to return only the data and other content that needs to change.- They manage data. When applicable, modern web applications provide client-side data caching and pre-fetching to boost client-side performance. This enables the UI to immediately respond to user input gestures because it does not have to make a call to the server for data. Data caching also serves to minimize the impact on server resources, increasing application scalability because fewer calls to the server are required.

Transcript

  • 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. Mobile &ITCamp 2012 sponsors Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 3. Mobile &Agenda 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. Mobile &Spectrum of Web Apps 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. Mobile &Spectrum of Web Apps 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. Mobile &Modern Web Applications 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. Mobile &Keep user is context 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. Mobile &Single Page Applications Development Rich responsive applications combining thebest of the web and desktop, build with HTML5 and JavaScript@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 9. Mobile &Architecture Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 10. Mobile &Architecture Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS JavaScript Client Side Interaction@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 11. Mobile &Architecture Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction JavaScript Client Side Interaction@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 12. Mobile &Architecture 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
  • 13. Mobile &Architecture 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. Mobile &Architecture 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 Local Storage@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 15. Mobile & Development DEMO MVC 4 SPA@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 16. Mobile &Bani Pierduti Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 17. Mobile &Technologies Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js JavaScript Client Side Interaction Local Storage@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 18. Mobile &Technologies Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js JavaScript Client Side Interaction Local Storage HTML5@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 19. Mobile &Technologies Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js JavaScript Client Side Interaction Upshot.js? Amplify.js Local Storage HTML5@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 20. Mobile &Technologies 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 JavaScript Client Side Interaction Upshot.js? Amplify.js Local Storage HTML5@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 21. Mobile &Technologies 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 JavaScript Client Side Interaction Upshot.js? Amplify.js Local Storage HTML5@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 22. Mobile &Knockout 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. Mobile &Knockout 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. Mobile &Observables 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. Mobile &Observables 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. Mobile &Bindings Development• Built in: – Text and Appearance – Forms – Control Flow – Templates• Custom bindings@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 27. Mobile &Text and Appearance 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. Mobile &Forms 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. Mobile &Control Flow 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. Mobile &Templates 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. Mobile &Navigation and Browser History 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. Mobile &Navigation and Browser History 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. Mobile &Upshot.js Development• “Proxy” on client side• Retrieves data from service• Paging• Tracks changes• Offline• Is it ready?@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 34. Mobile &Amplify.js 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. Mobile &WebAPI Development Alessandro Pilotti already demonstrated@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 36. Mobile &Modularity 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. Mobile &JavaScript structuring patterns Development• Prototype pattern• Module pattern• Revealing module pattern• Revealing prototype pattern@ itcampro # itcamp12 Premium conference on Microsoft technologies
  • 38. Mobile &Prototype pattern 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. Mobile &Prototype pattern 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. Mobile &Module pattern 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. Mobile &Module pattern 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. Mobile &Revealing Module pattern 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. Mobile &Revealing Module pattern 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. Mobile &Revealing Prototype pattern 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. Mobile &Revealing Module pattern 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. Mobile &Promise pattern 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. Mobile &Promise pattern 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. Q&A@ itcampro # itcamp12 Premium conference on Microsoft technologies