• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ITCamp 2012 - Lorant Domokos - Building single page, modular HTML5 applications
 

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

on

  • 912 views

 

Statistics

Views

Total Views
912
Views on SlideShare
912
Embed Views
0

Actions

Likes
0
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Agenda Mobile & Development• What are Single Page Applications?• Architecture• Technologies• Knockout fundamentals• Navigation fundamentals• Services layer• Patterns for modular JavaScript code@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Single Page Applications Mobile & Development Rich responsive applications combining thebest of the web and desktop, build with HTML5 and JavaScript@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Architecture Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Architecture Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS JavaScript Client Side Interaction@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Architecture Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Data access service@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Architecture Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav Data access service@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Architecture Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav JavaScript Client Side Interaction@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Architecture Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav Data access service Local Storage@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Mobile & Development DEMO MVC 4 SPA@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Bani Pierduti Mobile & Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Technologies Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js Data access service Local Storage@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Technologies Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js Data access service Local Storage HTML5@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Technologies Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js Data access service Upshot.js? Amplify.js Local Storage HTML5@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Technologies Mobile & Development Server Client ASP.NET Rendered Page HTML/CSS/JS HTML/CSS Nav.js? History.js Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js Data access service Upshot.js? Amplify.js Local Storage HTML5@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Technologies Mobile & Development Server Client Knockout.js Backbone.js ASP.NET Rendered Page JsRender HTML/CSS/JS HTML/CSS Nav.js? History.js Data Service JavaScript Client JSON/XML Side Interaction Nav WebAPI Node.js Data access service Upshot.js? Amplify.js Local Storage HTML5@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Knockout Mobile & Development• JavaScript MVVM Framework• MVVM-Model-View-ViewModel – Model-business domain objects – View-visible UI – ViewModel-data/operations on UI@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Knockout Mobile & Development• Declarative data bindings, two way• Automatic UI refresh• Dependency tracking, if one object changes all dependent objects change• Templating@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Observables Mobile & Development• They are functions• Bindings observe observables• Declare: var p = ko.observable();• Read: var r = p();• Write: p(‘value’);@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Observables Mobile & Development• Types: – Observable: ko.observable(‘value’) – Observable array: ko.observableArray([]) – Computed: ko.computed(function() { return vm.firstName() + ‘ ’ + vm.lastName(); }, vm)@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Bindings Mobile & Development• Built in: – Text and Appearance – Forms – Control Flow – Templates• Custom bindings@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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.@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Templates Mobile & Development• JavaScript templates-traditional JavaScript template in <script> tag• Containerless control flow: template-less, comment based syntax@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Upshot.js Mobile & Development• “Proxy” on client side• Retrieves data from service• Paging• Tracks changes• Offline• Is it ready?@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • WebAPI Mobile & Development Alessandro Pilotti already demonstrated@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • JavaScript structuring patterns Mobile & Development• Prototype pattern• Module pattern• Revealing module pattern• Revealing prototype pattern@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Prototype pattern Mobile & Developmentvar Calculator = function(element) { this.eqControl = $(element);}Calculator.prototype = { add: function(x, y) { var val = x + y; this.eqControl.text(val); }}@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Module pattern Mobile & Developmentvar Calculator = function(element) { // Private member. this.eqControl = $(element); return { // Public interface. add: function(x, y) { var val = x + y; this.eqControl.text(val); } };}@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Module pattern 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Revealing Module pattern Mobile & Developmentvar 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 };}@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Revealing Module pattern 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Revealing Prototype pattern Mobile & Developmentvar 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 };}@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Revealing Module pattern 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@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Promise pattern Mobile & Development• JavaScript requests/operations are asynchronous: – Ajax – Animations – Etc.• How do we link operations if we have dependencies?@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Promise pattern Mobile & Development• jQuery.Deferred public API• defferred.done()• defferred.fail()• defferred.then()• defferred.resolve()• defferred.reject()• jQuery.when()@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • 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)@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Responsive web design Mobile & Development@ itcampro # itcamp12 Premium conference on Microsoft technologies
    • Q&A@ itcampro # itcamp12 Premium conference on Microsoft technologies