ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications

itcampro @ itcamp12 # Premium conference on Microsoft technologies

Building single page, modular HTML5 applications for PC

and Mobile

Lorant Domokos

Microsoft Student Partners

Fortech


Mobile &

Development ITCamp 2012 sponsors


Mobile &

Development

• What are Single Page Applications?

• Architecture

• Technologies

• Knockout fundamentals

• Navigation fundamentals

• Services layer

• Patterns for modular JavaScript code

Agenda


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


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


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


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


Mobile &

Development

Rich responsive applications combining the

best of the web and desktop, build with HTML5

and JavaScript

Single Page Applications


Mobile &

Development Architecture

ASP.NET HTML/CSS/JS

Server Client

Rendered Page HTML/CSS


Mobile &


ASP.NET HTML/CSS/JS

Server Client


JavaScript Client Side Interaction

ASP.NET HTML/CSS/JS

Server Client



Mobile &


ASP.NET HTML/CSS/JS

Server Client



ASP.NET HTML/CSS/JS

Server Client


Data Service JSON/XML

Data access

service


Mobile &


ASP.NET HTML/CSS/JS

Server Client



ASP.NET HTML/CSS/JS

Server Client



Data access

service

Nav


Mobile &


ASP.NET HTML/CSS/JS

Server Client



ASP.NET HTML/CSS/JS

Server Client




Nav


Mobile &


ASP.NET HTML/CSS/JS

Server Client



ASP.NET HTML/CSS/JS

Server Client



Data access

service

Nav

Local Storage


Mobile &

Development

DEMO MVC 4 SPA


Mobile &

Development Bani Pierduti


Mobile &

Development Technologies

ASP.NET HTML/CSS/JS

Server Client



ASP.NET HTML/CSS/JS

Server Client



Data access

service

Nav

Local Storage

WebAPI Node.js


Mobile &


ASP.NET HTML/CSS/JS

Server Client



ASP.NET HTML/CSS/JS

Server Client



Data access

service

Nav

Local Storage

WebAPI Node.js

HTML5


Mobile &


ASP.NET HTML/CSS/JS

Server Client



ASP.NET HTML/CSS/JS

Server Client



Data access

service

Nav

Local Storage

WebAPI Node.js

HTML5

Upshot.js? Amplify.js


Mobile &


ASP.NET HTML/CSS/JS

Server Client



ASP.NET HTML/CSS/JS

Server Client



Data access

service

Nav

Local Storage

WebAPI Node.js

HTML5


Nav.js? History.js


Mobile &


ASP.NET HTML/CSS/JS

Server Client



ASP.NET HTML/CSS/JS

Server Client



Data access

service

Nav

Local Storage

WebAPI Node.js

HTML5


Nav.js? History.js

Knockout.js Backbone.js JsRender


Mobile &

Development

• JavaScript MVVM Framework

• MVVM-Model-View-ViewModel

– Model-business domain objects

– View-visible UI

– ViewModel-data/operations on UI

Knockout


Mobile &

Development

• Declarative data bindings, two way

• Automatic UI refresh

• Dependency tracking, if one object changes

all dependent objects change

• Templating

Knockout


Mobile &

Development

• They are functions

• Bindings observe observables

• Declare: var p = ko.observable();

• Read: var r = p();

• Write: p(‘value’);

Observables


Mobile &

Development

• Types:

– Observable: ko.observable(‘value’)

– Observable array: ko.observableArray([])

– Computed:

ko.computed(function() {

return vm.firstName() + ‘ ’ + vm.lastName();

}, vm)

Observables


Mobile &

Development

• Built in:

– Text and Appearance

– Forms

– Control Flow

– Templates

• Custom bindings

Bindings


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


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


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


Mobile &

Development

• JavaScript templates-traditional JavaScript

template in <script> tag

• Containerless control flow: template-less,

comment based syntax

Templates


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


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


Mobile &

Development

• “Proxy” on client side

• Retrieves data from service

• Paging

• Tracks changes

• Offline

• Is it ready?

Upshot.js


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


Mobile &

Development

Alessandro Pilotti already demonstrated

WebAPI


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


Mobile &

Development

• Prototype pattern

• Module pattern

• Revealing module pattern

• Revealing prototype pattern

JavaScript structuring patterns


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


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


Mobile &

Development


// Private member.


return {

// Public interface.


var val = x + y;


}

};

}

Module pattern


Mobile &

Development

• Pros:



namespace

– Expose only public members, hide private

• Cons:

– Functions will be duplicated for each instance

– Not easy to extend

Module pattern


Mobile &

Development


// Private members.

var

eqControl = $(element),


var val = x + y;


};

return {

// Public interface.

doAdd: add

};

}

Revealing Module pattern


Mobile &

Development

• 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 &

Development



}

Calculator.prototype = function() {

var add = function(x, y) {

var val = x + y;


};

return {

doAdd: add

};

}

Revealing Prototype pattern


Mobile &

Development

• Pros:

– Combines Prototype and Revealing Module patterns


– 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 &

Development

• JavaScript requests/operations are

asynchronous:

– Ajax

– Animations

– Etc.

• How do we link operations if we have

dependencies?

Promise pattern


Mobile &

Development

• jQuery.Deferred public API

• defferred.done()

• defferred.fail()

• defferred.then()

• defferred.resolve()

• defferred.reject()

• jQuery.when()

Promise pattern


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


Mobile &

Development Responsive web design


Q & A

Technology

ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications