html5 impact on application programming

Emerging Communication

HTML5 & WebApps

fredag den 10 september 2010

ericsson.com

Ericsson LabsChallenge

“Connected Things: Social, Fun & Sustainable”. Develop an innovative application using one or several APIs from labs.ericsson.com/apisThe winner will receive a Sony Ericsson Android X10 Mini Pro device.

Twitter: @ericssonlabs


Emerging Communication

HTML5 & WebApps


Overview

• What is HTML(5) Communication?

• What is its impact?

• Influence on native apps

• Trends for future apps


What is HTML5?

• HTML5 - The Markup Language

• HTML5 - The Web Technologies Umbrella Term


HTML(5) Communication

• Huge small topic

• New communication technologies

• New user expectations

• New security concerns


HTML(5) Communication

• XmlHttpRequest

• Cross-Origin XHR

• EventSource

• WebSockets


XmlHttpRequest

• The most basic tool available: HTTP request back home

• Used creatively to great effect:

• Comet/Long Polling

• Proxies

• Even streaming

• Can only be used to the “Origin” host


Cross Origin XHR

• Simple extension to XHR

• Allows connection to more than Origin

• Main feature: eliminates proxy need


EventSource• First new interface type

• Formalisation of regular polling technique

• Technique itself not rocket science in JavaScript

• Ericsson Labs’ Event Source Enabler is ~100 lines of JS code


WebSockets

• Bidirectional communication between client & server

• Connection-based

• Uses delimited, sequential messages

• UTF-8 based

• More efficient than XHR


Change?

• On protocol level, nothing revolutionary

• Some Web Service APIs will use WebSockets

• Thus, native apps will have WebSocket Support

• Real communication revolution from how users interact with web apps


The Web Experience

• If nothing changes, what’s the difference?

• Technology alone is not the change agent

• The web experience is

• What is the web experience?


What is HTML?• Language for presenting the

user with information.

• Document-centric model

• Primary intention to distribute data for consumption

• Naturally presents users with the latest information, regardless of access point


Updates

• (Web) Applications will always update themselves

• No restarts, no prompts

• Native apps going in that direction too (e.g. Chrome)


Reach


“The eventual goal [of Chrome] to create a ‘stateless’ browsing

experience where the user can log into any Chrome instance and have instant access to all of their settings, bookmarks, history, and add-ons”

Ryan Paul, Ars Technica


Reach


Adaptability


This morning, I was able to validate a concept I’ve been working on for a couple of weeks now: running one application

— completely unchanged — on five different screens

Christian Cantrell, Adobe


Multiscreen authoring is a challenge for our design customers. [...] There has been much discussion around whether or not HTML5 and CSS3 will make it easier for designers to reach new devices.

We think it will

Paul Gubbay, Adobe

This morning, I was able to validate a concept I’ve been working on for a couple of weeks now: running one application

— completely unchanged — on five different screens

Christian Cantrell, Adobe


Adaptability


Create

Create


Share

Create

Share


Mash


Interconnected


iframe “mash-ups” [are] web pages that pull together their content from more than one site. You might build an application,

for instance, in which part of the screen shows price-and-availability from a third-party vendor.

Cameron Laird, Phaseit


iframe “mash-ups” [are] web pages that pull together their content from more than one site. You might build an application,

for instance, in which part of the screen shows price-and-availability from a third-party vendor.

Cameron Laird, Phaseit

I expect the iframe sandboxing feature will be a big boon to developers if it takes off.

Ian Hickson, Google


Interconnected

• iframe sandbox allows secure inclusion of foregin data

• Can now deal with sensitive user data

• Implementation by Ericsson shipping in Chrome & Safari


Create

AliceCreate Shopping List


CreateCreate Shopping List

ApplesAlice


Share


Apples

Bob


Share


OrangesModify Shopping ListBob


Access

Alice

To Buy Oranges

Oranges

Create Shopping List

Modify Shopping ListBob


Access

Alice

Oranges

Create Shopping List

Modify Shopping List

• Adapted to the current screen

• Familiar user interface

• Synchronised data

• Because it is the same applicationTo Buy

Oranges

Bob


Mash

To Buy Oranges

Expenses

Planned Actual


Data

• Increased requirement for open data formats

• Applications integrate with user’s data stream, or are left behind

• Devices open themselves up to integrate with that stream too


Connectivity

• Current “active” sync merely a stepping stone

• Future apps will need to be aware of their “screen” counterparts

• Need to keep track of, reach, talk to all instances, all (user’s) devices


Synchronisation

• Required to reach the functionality goals of Connectivity with the speed of Native

• Implicit, automatic, background synchronization

• Google Wave showed how synchronization can work, but...


Demos

• http://ergo.labs.ericsson.net/applications/canvas

• http://ergo.labs.ericsson.net/applications/shared-map


http://ergo.labs.ericsson.net/applications/canvas

http://ergo.labs.ericsson.net/applications/canvas

http://ergo.labs.ericsson.net/applications/shared-map

http://ergo.labs.ericsson.net/applications/shared-map

For more information

• [email protected]


mailto:[email protected]

mailto:[email protected]