Upload
itcamp
View
740
Download
1
Embed Size (px)
Citation preview
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Building single page, modular HTML5 applications for PC
and Mobile
Lorant Domokos
Microsoft Student Partners
Fortech
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development ITCamp 2012 sponsors
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
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
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
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
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
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Architecture
ASP.NET HTML/CSS/JS
Server Client
Rendered Page HTML/CSS
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
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
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
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
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
DEMO MVC 4 SPA
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Bani Pierduti
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
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
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
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
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
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
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
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
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• Built in:
– Text and Appearance
– Forms
– Control Flow
– Templates
• Custom bindings
Bindings
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
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
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
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
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
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
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
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
Alessandro Pilotti already demonstrated
WebAPI
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development
• Prototype pattern
• Module pattern
• Revealing module pattern
• Revealing prototype pattern
JavaScript structuring patterns
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
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
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
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
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
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
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
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
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
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
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
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Mobile &
Development Responsive web design
itcampro @ itcamp12 # Premium conference on Microsoft technologies
Q & A