the flash to html5 opportunity

The Flash HTML5

Opportunity

Thomas Burleson, Digital Solutions Architect

August 2012

Copyright 2012, Mindspace LLC 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 ?

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 ?

The Shot Heard ‘Round the World'

April 2010

Copyright 2012, Mindspace LLC

Ubiquity Lost

Copyright 2012, Mindspace LLC

What's wrong ?

Why does we care ?

What are we going to do ?

A

B

C

SXM Internet Radio

1) What is wrong ?

2) Why do we care ?

3) How do we respond ?

Emergence [and viability] of HTML5

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

Copyright 2012, Mindspace LLC

+

Copyright 2012, Mindspace LLC

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

What is HTML5 ?

Copyright 2012, Mindspace LLC

Semantic Tags & Microformats

Offline Apps & Storage

Device & Data Access

Connectivity & Web Sockets

Multimedia Playback

3D Graphics & Effects

Performance & Integration

Layout, Effects & Typography

Copyright 2012, Mindspace LLC

Cross-Browser

Copyright 2012, Mindspace LLC

Cross-Device

Copyright 2012, Mindspace LLC

Graceful DegradationProgressive Enhancement

Copyright 2012, Mindspace LLC

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.            

Copyright 2012, Mindspace LLC

Responsive Design

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

Copyright 2012, Mindspace LLC

Copyright 2012, Mindspace LLC

The JavaScript Renaissance

Copyright 2012, Mindspace LLC

Flash vs HTML5

Popularity based on GitHub Project Activity and StackOverflow Questions

Copyright 2012, Mindspace LLC

Applications

Copyright 2012, Mindspace LLC

Apps

Pageless

Immersive

SmartFrameworks

Building HTML5 applications

Copyright 2012, Mindspace LLC

Javascript Frameworks

Copyright 2012, Mindspace LLC

Apps

Iconic HTML5 Solutions

Copyright 2012, Mindspace LLC

Were those applications Flash or HTML5 ?

Copyright 2012, Mindspace LLC

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

Copyright 2012, Mindspace LLC

What's wrong ?

Why does we care ?

What are we going to do ?

A

B

C

Class: SXM Internet Radio

1) What is wrong ?

2) Why do we care ?

3) How do we respond ?

Apps

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

Copyright 2012, Mindspace LLC

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.

Copyright 2012, Mindspace LLC

Copyright 2012, Mindspace LLC

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)

Copyright 2012, Mindspace LLC

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

Copyright 2012, Mindspace LLC

CriticalAspects

• Targeted product designs are critical...

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

• Guerilla developers are critical...

Copyright 2012, Mindspace LLC