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

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)

“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

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

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

Apples

OrangesModify Shopping ListBob

Access

To Buy Oranges

Oranges

Create Shopping List

Modify Shopping ListBob

Access

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

To Buy Oranges

Expenses

Planned Actual

To Buy Oranges

Expenses

Planned Actual

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

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

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

For more information

• vladimir.katardjiev@ericsson.com

HTML5 impact on application programming

Technology

1621ICT Web Design and Development HTML5 and CSS3 Illustrated · 1621ICT Web Design and Development . HTML5 and CSS3 Illustrated . Unit L: Programming Web Pages with Javascript

Vietnam mobile day 2012 html5 game using impact js - aiti-aptech

HTML5 Programming from Scratch

Training Guide: Programming in HTML5 with JavaScript and CSS3

HTML5 IMPACT from Multi Device development for NicoNico

Exam code: 70-480 Exam name: Programming in HTML5 with ......Exam name: Programming in HTML5 with JavaScript and CSS3 Version 18.2. 70-480 QUESTION 1 You are developing an application

MCSD Web Applications - Programming in HTML5 - Courseware · Programming in HTML5 with JavaScript and CSS3 Updated 11. th. April 2014 . 1.2 . Programming in HTML5 with JavaScript

70-480 Programming in html5 with javascript

HTML5 Canvas Notes for Professionals - books.goalkicker.com · HTML5 Canvas HTML5 Notes for Professionals Canvas Notes for Professionals GoalKicker.com Free Programming Books Disclaimer

HTML5 Programming Jonathan Reid

HTML5 - adityamondal.weebly.com · HTML5 About the Tutorial HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a markup

Microsoft’s Browser Roadmap€¦ · HTML5 Geolocation HTML5 History API HTML5 Parser HTML5 Sandbox HTML5 Selection HTML5 semantic elements HTML5 track HTML5 video and audio JavaScript

Secure Distributed Programming on EcmaScript 5 + HTML5 ... · Secure Distributed Programming on EcmaScript 5 + HTML5 platforms Mark S. Miller and the Cajadores with thanks to Tyler

HTML5 Introduction to Web Programming. Plan of the course HTML5 Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images

Programming in HTML5 With Java Script and CSS3

HTML5 Canvas and PHP Programming Club IIT Kanpur

Les API HTML5 - lis-lab.fr · API HTML5 API : Application Programming Interfaces des composants permettant aux developpeurs d’utiliser des´ fonctionnalites complexe d’une mani´

HTML5 Programming Cookbook

Chapter 2 - Introduction to HTML5: Part 1 · 1 IT350 Web and Internet Programming Chapter 2 - Introduction to HTML5: Part 1 2.1 Introduction / 2.2 Editing HTML5 • HTML 5 (HyperText

OvertheAir 2010 html5 impact on application programming