The document discusses emerging HTML5 communication technologies and their impact. It covers new technologies like WebSockets and EventSource that enable real-time bidirectional and server-sent events between web apps and servers. It argues this will influence native apps and lead to more interconnected, adaptive and synchronized web experiences across different screens.
Scaling API-first â The story of a global engineering organization
Â
OvertheAir 2010 html5 impact on application programming
1. Emerging
Communication
HTML5 & WebApps
fredag den 10 september 2010
2. ericsson.
com
Ericsson Labs
Challenge
âConnected Things: Social, Fun & Sustainableâ.
Develop an innovative application using one or several APIs from
labs.ericsson.com/apis
The winner will receive a Sony Ericsson Android X10 Mini Pro device.
Twitter: @ericssonlabs
fredag den 10 september 2010
3. Emerging
Communication
HTML5 & WebApps
fredag den 10 september 2010
4. Overview
⢠What is HTML(5) Communication?
⢠What is its impact?
⢠InďŹuence on native apps
⢠Trends for future apps
fredag den 10 september 2010
5. What is HTML5?
⢠HTML5 - The Markup Language
⢠HTML5 - The Web Technologies Umbrella
Term
fredag den 10 september 2010
6. HTML(5)
Communication
⢠Huge small topic
⢠New communication technologies
⢠New user expectations
⢠New security concerns
fredag den 10 september 2010
7. HTML(5)
Communication
⢠XmlHttpRequest
⢠Cross-Origin XHR
⢠EventSource
⢠WebSockets
fredag den 10 september 2010
8. 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
fredag den 10 september 2010
9. Cross Origin XHR
⢠Simple extension to XHR
⢠Allows connection to more than Origin
⢠Main feature: eliminates proxy need
fredag den 10 september 2010
10. 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
fredag den 10 september 2010
11. 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
fredag den 10 september 2010
12. WebSockets
⢠Bidirectional communication between client
& server
⢠Connection-based
⢠Uses delimited, sequential messages
⢠UTF-8 based
⢠More efďŹcient than XHR
fredag den 10 september 2010
13. 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
fredag den 10 september 2010
14. 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?
fredag den 10 september 2010
15. 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
fredag den 10 september 2010
16. Updates
⢠(Web) Applications will
always update
themselves
⢠No restarts, no prompts
⢠Native apps going in that
direction too (e.g.
Chrome)
fredag den 10 september 2010
18. â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
fredag den 10 september 2010
31. 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
fredag den 10 september 2010
32. 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
fredag den 10 september 2010
43. 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
fredag den 10 september 2010
44. 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
fredag den 10 september 2010
45. Interconnected
⢠iframe sandbox allows secure inclusion of
foregin data
⢠Can now deal with sensitive user data
⢠Implementation by Ericsson shipping in
Chrome & Safari
fredag den 10 september 2010
47. Create
Create Shopping List
Alice
fredag den 10 september 2010
48. Create
Create Shopping List
Alice Apples
fredag den 10 september 2010
49. Share
Create Shopping List
Alice Apples
Bob
fredag den 10 september 2010
50. Share
Create Shopping List
Alice
Modify Shopping List Oranges
Bob
fredag den 10 september 2010
51. Access
Create Shopping List
Alice
Modify Shopping List Oranges
Bob
To Buy
Oranges
fredag den 10 september 2010
52. Access
Create Shopping List
Alice ⢠Adapted to the
current screen
⢠Familiar user
Modify Shopping List interface
Bob Oranges
⢠Synchronised data
⢠Because it is the
same application
To Buy
Oranges
fredag den 10 september 2010
53. Mash
Expenses
Planned Actual
To Buy
Oranges
fredag den 10 september 2010
54. Mash
Expenses
Planned Actual
To Buy
Oranges
fredag den 10 september 2010
55. 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
fredag den 10 september 2010
56. 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
fredag den 10 september 2010
57. 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...
fredag den 10 september 2010
58. Demos
⢠http://ergo.labs.ericsson.net/applications/canvas
⢠http://ergo.labs.ericsson.net/applications/shared-map
fredag den 10 september 2010
59. For more
information
⢠vladimir.katardjiev@ericsson.com
fredag den 10 september 2010