This document summarizes a presentation on building single page applications for both PC and mobile. It discusses the architecture of single page applications including using HTML, CSS, JavaScript on the client side and ASP.NET on the server side. It also covers various technologies that can be used like Knockout.js, navigation libraries, and patterns for creating modular JavaScript code. The presentation demonstrates these concepts through an example single page application built with MVC 4.
Nell’iperspazio con Rocket: il Framework Web di Rust!
Building single page, modular html5 applications for PC and Mobile
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 the
best 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 Development
var 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 Development
var 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 Development
var 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 Development
var 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
Notes de l'éditeur
- 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.