![Page 1: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/1.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Building single page, modular HTML5 applications for PC
and Mobile
Lorant Domokos
Microsoft Student Partners
Fortech
![Page 2: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/2.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development ITCamp 2012 sponsors
![Page 3: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/3.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• What are Single Page Applications?
• Architecture
• Technologies
• Knockout fundamentals
• Navigation fundamentals
• Services layer
• Patterns for modular JavaScript code
Agenda
![Page 4: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/4.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Spectrum of Web Apps
![Page 5: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/5.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Spectrum of Web Apps
![Page 6: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/6.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Modern Web Applications
![Page 7: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/7.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• No page reload
• Users are kept in context
• Fluid experience as they navigate from one
task to another
• Result: great user experience
Keep user is context
![Page 8: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/8.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
Rich responsive applications combining the
best of the web and desktop, build with HTML5
and JavaScript
Single Page Applications
![Page 9: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/9.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Architecture
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
![Page 10: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/10.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Architecture
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
JavaScript Client Side Interaction
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
![Page 11: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/11.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Architecture
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
JavaScript Client Side Interaction
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
Data Service JSON/XML
Data access
service
![Page 12: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/12.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Architecture
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
JavaScript Client Side Interaction
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
Data Service JSON/XML
Data access
service
Nav
![Page 13: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/13.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Architecture
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
JavaScript Client Side Interaction
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
Data Service JSON/XML
JavaScript Client Side Interaction
Nav
![Page 14: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/14.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Architecture
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
JavaScript Client Side Interaction
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
Data Service JSON/XML
Data access
service
Nav
Local Storage
![Page 15: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/15.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
DEMO MVC 4 SPA
![Page 16: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/16.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Bani Pierduti
![Page 17: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/17.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Technologies
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
JavaScript Client Side Interaction
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
Data Service JSON/XML
Data access
service
Nav
Local Storage
WebAPI Node.js
![Page 18: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/18.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Technologies
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
JavaScript Client Side Interaction
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
Data Service JSON/XML
Data access
service
Nav
Local Storage
WebAPI Node.js
HTML5
![Page 19: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/19.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Technologies
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
JavaScript Client Side Interaction
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
Data Service JSON/XML
Data access
service
Nav
Local Storage
WebAPI Node.js
HTML5
Upshot.js? Amplify.js
![Page 20: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/20.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Technologies
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
JavaScript Client Side Interaction
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
Data Service JSON/XML
Data access
service
Nav
Local Storage
WebAPI Node.js
HTML5
Upshot.js? Amplify.js
Nav.js? History.js
![Page 21: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/21.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Technologies
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
JavaScript Client Side Interaction
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
Data Service JSON/XML
Data access
service
Nav
Local Storage
WebAPI Node.js
HTML5
Upshot.js? Amplify.js
Nav.js? History.js
Knockout.js Backbone.js JsRender
![Page 22: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/22.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• JavaScript MVVM Framework
• MVVM-Model-View-ViewModel
– Model-business domain objects
– View-visible UI
– ViewModel-data/operations on UI
Knockout
![Page 23: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/23.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• Declarative data bindings, two way
• Automatic UI refresh
• Dependency tracking, if one object changes
all dependent objects change
• Templating
Knockout
![Page 24: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/24.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• They are functions
• Bindings observe observables
• Declare: var p = ko.observable();
• Read: var r = p();
• Write: p(‘value’);
Observables
![Page 25: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/25.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• Types:
– Observable: ko.observable(‘value’)
– Observable array: ko.observableArray([])
– Computed:
ko.computed(function() {
return vm.firstName() + ‘ ’ + vm.lastName();
}, vm)
Observables
![Page 26: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/26.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• Built in:
– Text and Appearance
– Forms
– Control Flow
– Templates
• Custom bindings
Bindings
![Page 27: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/27.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Text and Appearance
![Page 28: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/28.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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.
Forms
![Page 29: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/29.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Control Flow
![Page 30: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/30.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• JavaScript templates-traditional JavaScript
template in <script> tag
• Containerless control flow: template-less,
comment based syntax
Templates
![Page 31: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/31.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Navigation and Browser History
![Page 32: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/32.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Navigation and Browser History
![Page 33: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/33.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• “Proxy” on client side
• Retrieves data from service
• Paging
• Tracks changes
• Offline
• Is it ready?
Upshot.js
![Page 34: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/34.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Amplify.js
![Page 35: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/35.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
Alessandro Pilotti already demonstrated
WebAPI
![Page 36: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/36.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Modularity
![Page 37: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/37.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• Prototype pattern
• Module pattern
• Revealing module pattern
• Revealing prototype pattern
JavaScript structuring patterns
![Page 38: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/38.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
var Calculator = function(element) {
this.eqControl = $(element);
}
Calculator.prototype = {
add: function(x, y) {
var val = x + y;
this.eqControl.text(val);
}
}
Prototype pattern
![Page 39: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/39.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Prototype pattern
![Page 40: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/40.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
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);
}
};
}
Module pattern
![Page 41: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/41.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Module pattern
![Page 42: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/42.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
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
};
}
Revealing Module pattern
![Page 43: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/43.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Revealing Module pattern
![Page 44: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/44.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
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
};
}
Revealing Prototype pattern
![Page 45: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/45.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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
Revealing Module pattern
![Page 46: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/46.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• JavaScript requests/operations are
asynchronous:
– Ajax
– Animations
– Etc.
• How do we link operations if we have
dependencies?
Promise pattern
![Page 47: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/47.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• jQuery.Deferred public API
• defferred.done()
• defferred.fail()
• defferred.then()
• defferred.resolve()
• defferred.reject()
• jQuery.when()
Promise pattern
![Page 48: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/48.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
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)
Responsive web design
![Page 49: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/49.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Responsive web design
![Page 50: ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications](https://reader036.vdocuments.pub/reader036/viewer/2022081400/554f96c2b4c905ad218b4698/html5/thumbnails/50.jpg)
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Q & A