HTML5 AND THE FUTURE JAVASCRIPT PLATFORM

Marcelo Lopez RuizSenior Software Design EngineerMicrosoft Corporation

looking ahead, looking behind

• web application architecture• evolution and trends• show work to help bridge to future

web apps - classicHTML Page

Server

http(s) transportInitial Page Request

HTML+CSS + JS

Browser (Client)

web apps - modern

Server

http(s) transport

HTML Page Ajax Support

(XMLHttpRequest)

JavaScript Call

HTML+CSS+Data

Response

Request

HTML+CSS + JS

Initial Page Request

evolving platform = opportunity

from good AJAX apps to great AJAX apps

• more interactive• more responsive• improved and specialized user experiences

• Local Storage• Language

Improvements• Network Improvements• Advanced Graphics• Media

• Facebook• eBay• Netflix• Twitter• Flickr• StackOverflow• SharePoint• … running out of slide space

HTML5 improvements data everywhere

data everywhere

• Huge data growth - Vast variety of data exist today, more coming.

• Some companies are in the business of producing data so others make business by consuming it

• REST open web protocols for querying and updating data

OData• Rely on standard web technologies like HTTP,

Atom Publishing Protocol (AtomPub) and JSON• Operation semantics - mapping of HTTP

methods (GET, POST, PUT, DELETE)• Query - resources, identified using Uniform

Resource Identifiers

quick code – local storage

demo

quick code –data everywhere

demo

• Local Storage• Language

Improvements• Network Improvements• Advanced Graphics• Media

• Facebook• eBay• Netflix• Twitter• Flickr• StackOverflow• SharePoint• … running out of slide space

HTML5 improvements data everywhere

datajs

cache data smart prefetch

cross domain

no browser diffs

same coderesilient to network

leverage capabilities

multiple sources

datajs – library for data-centric web applications

demo

recap: datajs communication library• Abstracts out formats• Abstracts out communication details• All protocol capabilities: read, write, metadata• Full asynchronous support• Layered and open, great for unit tests

recap: datajs caching library• Let you focus on the problem and not the implementation• Fast page load• Fast scrolling and pagination• Web page survives connectivity hiccups• Works over Web Storage or in-memory today, lights up on

IndexedDB tomorrow• You write it once – we test it against all browsers all form

factors

datajs – same code, multiple browsers and devices

demo

It’s the final countdown(para-pa-pa para-pa-pa-pa)

ie6 – back compat matters

library trends• fewer large frameworks, more small & focused• play well together• more structure to applications (MVC, MVVM)• still some common blocks missing e.g. change

notification• common features: pay for play, avoid polluting

namespace, work cross-browser, degrade gracefully

datajs future• long list, will only get longer, join us!• better support for authentication• first-class support for tracking local changes,

validation, saving them, etc.• canvas and SVG integration – see other sessions!• deeper integration with libraries (plug-ins)• high-level API when IndexedDB is available

building the future together• http://datajs.codeplex.com/• download and try it out, build it yourself• early adopters have been sending feedback and

asking questions – join in!

Q&A