Building single page, modular html5 applications for PC and Mobile

Building single page, modular
HTML5 applications for PC
and Mobile
Lorant Domokos
Microsoft Student Partners
Fortech

@ itcampro # itcamp12 Premium conference on Microsoft technologies

Mobile &
ITCamp 2012 sponsors Development


Mobile &
Agenda Development

• What are Single Page Applications?
• Architecture
• Technologies
• Knockout fundamentals
• Navigation fundamentals
• Services layer
• Patterns for modular JavaScript code


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


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


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


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


Mobile &
Single Page Applications Development

Rich responsive applications combining the
best of the web and desktop, build with HTML5
and JavaScript


Mobile &
Architecture Development

Server Client

ASP.NET Rendered Page
HTML/CSS/JS HTML/CSS


Mobile &

Server Client


JavaScript Client
Side Interaction


Mobile &

Server Client


Data Service JavaScript Client
JSON/XML Side Interaction

JavaScript Client
Side Interaction


Mobile &

Server Client


JSON/XML Side Interaction Nav

JavaScript Client
Side Interaction


Mobile &

Server Client



JavaScript Client
Side Interaction

Local Storage


Mobile &
Development

DEMO MVC 4 SPA


Mobile &
Bani Pierduti Development


Mobile &
Technologies Development

Server Client


WebAPI
Node.js
JavaScript Client
Side Interaction

Local Storage


Mobile &

Server Client


WebAPI
Node.js
JavaScript Client
Side Interaction

Local Storage HTML5


Mobile &

Server Client


WebAPI
Node.js
JavaScript Client
Side Interaction
Upshot.js?
Amplify.js

Local Storage HTML5


Mobile &

Server Client

Nav.js?
History.js
WebAPI
Node.js
JavaScript Client
Side Interaction
Upshot.js?
Amplify.js

Local Storage HTML5


Mobile &

Server Client Knockout.js
Backbone.js
ASP.NET Rendered Page JsRender
Nav.js?
History.js
WebAPI
Node.js
JavaScript Client
Side Interaction
Upshot.js?
Amplify.js

Local Storage HTML5


Mobile &
Knockout Development

• JavaScript MVVM Framework
• MVVM-Model-View-ViewModel
– Model-business domain objects
– View-visible UI
– ViewModel-data/operations on UI


Mobile &
Knockout Development

• Declarative data bindings, two way
• Automatic UI refresh
• Dependency tracking, if one object changes
all dependent objects change
• Templating


Mobile &
Observables Development

• They are functions
• Bindings observe observables
• Declare: var p = ko.observable();
• Read: var r = p();
• Write: p(„value‟);


Mobile &
Observables Development

• Types:
– Observable: ko.observable(„value‟)
– Observable array: ko.observableArray([])
– Computed:
ko.computed(function() {
return vm.firstName() + „ ‟ + vm.lastName();
}, vm)


Mobile &
Bindings Development

• Built in:
– Text and Appearance
– Forms
– Control Flow
– Templates
• Custom bindings


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


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.


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


Mobile &
Templates Development

• JavaScript templates-traditional JavaScript
template in <script> tag
• Containerless control flow: template-less,
comment based syntax


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


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


Mobile &
Upshot.js Development

• “Proxy” on client side
• Retrieves data from service
• Paging
• Tracks changes
• Offline
• Is it ready?


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


Mobile &
WebAPI Development

Alessandro Pilotti already demonstrated


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


Mobile &
JavaScript structuring patterns Development

• Prototype pattern
• Module pattern
• Revealing module pattern
• Revealing prototype pattern


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);
}
}


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


Mobile &
Module pattern Development

// Private member.

return {
// Public interface.
var val = x + y;
}
};
}


Mobile &
Module pattern Development

• Pros:
namespace
– Expose only public members, hide private
• Cons:
– Functions will be duplicated for each instance
– Not easy to extend


Mobile &
Revealing Module pattern Development

// Private members.
var
eqControl = $(element),
var val = x + y;
};

return {
// Public interface.
doAdd: add
};
}


Mobile &

• Pros:
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


Mobile &
Revealing Prototype pattern Development

}

Calculator.prototype = function() {
var add = function(x, y) {
var val = x + y;
};

return {
doAdd: add
};
}


Mobile &

• Pros:
– Combines Prototype and Revealing Module
patterns
namespace
– Functions loaded into memory once
– Can “override” functions
• Cons:
– “this” can be tricky
– Contstructor separate from prototype definition


Mobile &
Promise pattern Development

• JavaScript requests/operations are
asynchronous:
– Ajax
– Animations
– Etc.
• How do we link operations if we have
dependencies?


Mobile &
Promise pattern Development

• jQuery.Deferred public API
• defferred.done()
• defferred.fail()
• defferred.then()
• defferred.resolve()
• defferred.reject()
• jQuery.when()


Q&A


Building single page, modular html5 applications for PC and Mobile

Building single page, modular html5 applications for PC and Mobile

More Related Content

What's hot

Viewers also liked

Similar to Building single page, modular html5 applications for PC and Mobile

Recently uploaded

Building single page, modular html5 applications for PC and Mobile

Editor's Notes