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

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

@ itcampro # itcamp12 Premium conference on Microsoft technologies

ITCamp 2012 sponsors Mobile &
Development


Agenda Mobile &
Development

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


Spectrum of Web Apps 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


Modern Web Applications 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


Keep user is context Mobile &
Development

• No page reload
• Users are kept in context
• Fluid experience as they navigate from one
task to another
• Result: great user experience


Single Page Applications Mobile &
Development

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


Architecture Mobile &
Development

Server Client

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


Development

Server Client


JavaScript Client
Side Interaction


Development

Server Client


Data Service JavaScript Client
JSON/XML Side Interaction

Data access
service


Development

Server Client


JSON/XML Side Interaction Nav

Data access
service


Development

Server Client



JavaScript Client
Side Interaction


Development

Server Client



Data access
service

Local Storage


Mobile &
Development

DEMO MVC 4 SPA


Bani Pierduti Mobile &
Development


Technologies Mobile &
Development

Server Client


WebAPI
Node.js
Data access
service

Local Storage


Development

Server Client


WebAPI
Node.js
Data access
service

Local Storage HTML5


Development

Server Client


WebAPI
Node.js
Data access
service
Upshot.js?
Amplify.js

Local Storage HTML5


Development

Server Client

Nav.js?
History.js
WebAPI
Node.js
Data access
service
Upshot.js?
Amplify.js

Local Storage HTML5


Development

Server Client Knockout.js
Backbone.js
ASP.NET Rendered Page JsRender
Nav.js?
History.js
WebAPI
Node.js
Data access
service
Upshot.js?
Amplify.js

Local Storage HTML5


Knockout 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


Observables 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)


Bindings Mobile &
Development

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


Text and Appearance 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


Forms 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.


Control Flow 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


Templates Mobile &
Development

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


Navigation and Browser History 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


Upshot.js Mobile &
Development

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


Amplify.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


WebAPI Mobile &
Development

Alessandro Pilotti already demonstrated


Modularity 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


JavaScript structuring patterns Mobile &
Development

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


Prototype pattern 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


Module 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


Revealing Module pattern Mobile &
Development

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

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


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


Revealing Prototype pattern Mobile &
Development

}

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

return {
doAdd: add
};
}


Development

• 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


Promise pattern 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()


Responsive web design 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


Q&A


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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (14)

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

Similaire à ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications (20)

Plus de ITCamp

Plus de ITCamp (20)

Dernier

Dernier (20)

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