the flash to html5 opportunity
DESCRIPTION
With the future of Flash/Flex uncertain and platform/device ubiquity lost, many companies now have a great opportunity to migrate their Flash applications to HTML5 architectures... without sacrificing their immersive experiences.TRANSCRIPT
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