The Flash to HTML5 Opportunity

The Flash HTML5

Opportunity

Thomas Burleson, Digital Solutions Architect

August 2012

Copyright 2012, Mindspace LLC http://www.gridlinked.info

http://www.gridlinked.info

http://www.gridlinked.info

What's wrong ?

Why does we care ?

What are we going to do ?

A

B

C

SXM Internet Radio

1) What's wrong with Flash?

2) Why do we care ?

3) How do we respond ?

What's wrong ?

Why does we care ?


A

B

C

SXM Internet Radio

1) What's wrong with Flash?

2) Why do we care ?


The Shot Heard ‘Round the World'

April 2010

Copyright 2012, Mindspace LLC

Ubiquity Lost


What's wrong ?

Why does we care ?


A

B

C

SXM Internet Radio

1) What is wrong ?

2) Why do we care ?


Emergence [and viability] of HTML5

Opportunity for ubiquity across browsers, OS, & hardware devices.


+


• Drag 'n Drop• Offline• Expressive Tags• History Management• and more!

What is HTML5 ?


Semantic Tags & Microformats

Offline Apps & Storage

Device & Data Access

Connectivity & Web Sockets

Multimedia Playback

3D Graphics & Effects

Performance & Integration

Layout, Effects & Typography


Cross-Browser


Cross-Device


Graceful DegradationProgressive Enhancement


Progressive Enhancement

A base page that is usable and readable even in the worst possible browser is 'progressively enhanced' with features that are less widely supported.


Responsive Design

Responsive Design leverages CSS media queries to define layouts based on media device.



The JavaScript Renaissance


Flash vs HTML5

Popularity based on GitHub Project Activity and StackOverflow Questions


Applications


Apps

Pageless

Immersive

SmartFrameworks

Building HTML5 applications


Javascript Frameworks


Apps

Iconic HTML5 Solutions


https://speakerdeck.com/u/tanoku/p/intergalactic-javascript-robots-from-outer-space



http://docs.sencha.com/ext-js/4-1/%23!/api

http://docs.sencha.com/ext-js/4-1/%23!/api

http://jsfiddle.net/ThomasBurleson/8Gzj9/embedded/result/



Were those applications Flash or HTML5 ?


What we want ?

• Performant • Immersive• Pageless• Ubiquitous• Common Code

(fast load and responsive)

(rich and engaging)

(background, on-demand processing)

Javascript is now viable for graphics, charts, interactive experiences, and page-less solutions

... consumer-facing applications


What's wrong ?

Why does we care ?


A

B

C

Class: SXM Internet Radio

1) What is wrong ?

2) Why do we care ?


Apps

Opportunity to consolidate product development to common-code base with better reach to larger market.


What about our Flash solution, man ?

Desktop Browser

All UI & user interactions in JS/CSS3/HTML5

MobileDevices

• modified as self-contained, deployable• manages security, dmca, etc. • embedded as hidden HTML element• driven by javascript• compensates for poor WebKit API• hides all complexities of playback

• Lists• Bios• Album Info• Branded UI• etc.

Reuse existing Flash Audio components

Write native implementations of Audio componentWrite highly secure playback layers(android and iPhone)

Reuse PhoneGap for hardware and native-component access.



Product Transition Path

• Migrate as much Flash code to Javascript

• Build Javascript library/API as facade bridge Flash libraries components (if appropriate) == hybrid solutions.

• Or Develop native-implementations of components (as needed)


Product Considerations Path

• Data services must be designed with API for thin, HTML5 clients

• Product designs must anticipate both browser AND mobile... using responsive designs.

• Branding for corporate & dashboard OEM

• HTML5 embedding (ala Slideshare)

• Server-push to synch across devices


CriticalAspects

• Targeted product designs are critical...

• Cloud-based middle-tier data services are critical...

• Guerilla developers are critical...


Documents

The Flash to HTML5 Opportunity