Reasons for Flash: Flash Development in an HTML5 and App Store World

Reasons for FlashFlash development in an HTML5 and App Store world

© 2011 EffectiveUI, Inc.

RJ OwenSenior Software [email protected]@effectiveui.com

Tweeting this session?Use the hashtag: #effectiveui


OMG HTML5 NATIVE APPS YIKES


Where is Flex going?


Where has Flex been?


Macromedia Flex 1-1.5 (2004, 2005)

• Server-side technology• Rich component set for Flash• MXML / AS compiled to SWF on the

server using a J2EE server• $15,000 per CPU (wikipedia)• Flex Data Services required

Product Goal:!Get Flash into Business

???


Macromedia Flex 1-1.5 (2004, 2005)

• Server-side technology• Rich component set for Flash• MXML / AS compiled to SWF on the

server using a J2EE server• $15,000 per CPU (wikipedia)• Flex Data Services required

Product Goal:!Get Flash into Business


Adobe Flex 2 (2006)

• AS3• Eclipsed-based Flex Builder• Client-side compiling• Free compiler• Charting• Flex Data Services 2

Product Goal:!Get Flash to Developers!Increase adoption in businesses


Adobe Flex 3-3.5 (2008, 2009)

• Open Source• Integration with CS product line• AIR• Profiling and refactoring in Builder

Product Goal:!Increase Adoption, Community!Make Flex Builder a “real” product


Adobe Flex 4 (2010)

• “Design in Mind”• Spark• Catalyst Integration• FlexUnit integration• Improved profiler• Network monitor• TLF

Product Goal:!Improve UX!Improve Enterprise tooling


Adobe Flex 4.5 (2011)

• Multi-Screen (Mobile!)• Builder enhancements to support

enterprise, templating, etc.• More Spark• Spoon.as

Product Goal:!Mobile app development!Improve Enterprise development


1 1.5 2 3 3.5 4 4.5

Enterprise

Design

AIR

Developers

Mobile


Flex’s current trajectory: reverse-engineering the business plan

Provide the tools required for enterprise-level workflows

Marketed to DevelopersTo solve a wide array of problemsWith good results


Flex’s current trajectory: reverse-engineering the business plan

Provide the tools required for enterprise-level workflows

Marketed to DevelopersTo solve a wide array of problemsWith good results

Enterprise

Design

DevelopersUbiquity


So that Adobe can sell......Creative Suite

part of $2Billion creative solutions revenue 2010 (#1 source)

LiveCyclepart of $1Billion in Digital Enterprise

Solutions revenue 2010 (#2 source)

source: adobe.com/aboutadobe/invrelations/financialdocs.html


Take-aways:Expect to see Flex continue growing in Enterprise

Business portalsCustomer facing app widgetsUX that can integrate with a server

Expect tighter integration with CS, marketing about DesignExpect investment in Developers, marketing to DevelopersExpect continued LiveCycle push


Where will this plan take Flex in a post-HTML5 / post-Native App world?


I put this question to the Quora community: “What are the best reasons to learn Flash in an HTML5

web and native app world?”Answers:Consistent Experience (browser issues)Get to market quickerSingle technology to focus onFaster ROICore OOP educationand more.


That’s a great start. Here’s what I think.

Flex is and will continue to be valuable for....


Enterprise RequirementsClient-Server integrationOO languagesDeveloper toolsetsMature languagesCode generationBest-practicesBigger logos


Java :: Enterprise Back-EndFlex :: Enterprise Front-End


2. Multi-Screen Development


Same content, multiple screensiOS, BlackBerry, Android, WebOS, WP7, and counting....


Approaches to multi-screen:Web-onlyMultiple native applications

(avoid multi-screen ubiquity altogether)HTML5 app cache

(iOS doesn’t support!)PhoneGapTitaniumAIR mobile


Multi-screen application development represents the best business case for Flex. Flex is an easy technology for multi-screen application development.


3. Community


SpringASSwizMateParsleyPureMVCRobotlegstinyTLFSpoon.ashamcrest-as3SwiftSuspendersFlexUnit

Signalsasmockas3corelibas3cryptoas3awss3libAway3DPaperVision3Das3ebaylibDegrafaReflexStealth

FlightFlexLibJestRibbitTweenLiteTweenerMerapiWOW 3Das3youtubelibas3syndicationlibFZip

4. Video


Ogg Theora H.264 WebM

IE9 Manual Install

Firefox

Chrome

Safari

Mobile Safari

Opera


Ogg Theora H.264 WebM

IE9 Manual Install

Firefox

Chrome

Safari

Mobile Safari

Opera

BROWSER INCOMPATIBILITY

FAIL


Flash

IE9

Firefox

Chrome

Safari

Mobile Safari

Opera


HTML5 video lacks the ability to “secure the content, handle reporting for our advertisers, to...ensure premium visual quality, communicate back with the server to determine how long to buffer and what bit-rate to stream, and dozens of other things that aren’t necessarily visible to the end user.”

- Hulu, 4/2010gizmodo.com/#!5538264/hulu-says-html5-isnt-ready-yet


“HTML5 Video doesn’t have a viable DRM solution at this point.”

- Netflix, 4/2010gigaom.com/video/netflix-no-plans-for-html5-video/


5. Games


Flash is an animation engine.Will always perform better than Canvas.Molehill brings real hardware-

accelerated 3D


HTML5 games are okayCanvas tag makes things flexible


Why move from HTML5 to Flash?Browser support is spotty at bestPerformance isn’t up to parThere is no FGL for html5 gamesSource: blog.tametick.com/2011/01/why-im-moving-from-html5-to-flash.html


“Is html5 the future? I sure hope so!Unfortunately, it isn’t the present.”

- TameTick.comblog.tametick.com/2011/01/why-im-moving-from-html5-to-flash.html


source: facebook.com/note.php?note_id=491691753919


6. Translating Interaction


(Don Norman’s) Experience Design VocabularyVisibilityAffordancesFeedbackMappingConstraintConsistency


VISIBILITYPerceiving interactive elements

AFFORDANCESUnderstanding interactive elements

FEEDBACKKnowing how your actions impact the system

MAPPINGHow well the interface reflects your understanding of the system

CONSTRAINTSPreventing errors in the system

CONSISTENCYObjects that appear the same function the same


VISIBILITYPerceiving interactive elements

AFFORDANCESUnderstanding interactive elements

FEEDBACKKnowing how your actions impact the system

MAPPINGHow well the interface reflects your understanding of the system

CONSTRAINTSPreventing errors in the system

CONSISTENCYObjects that appear the same function the same

COMPONENT SET

EVENT MODEL

CUSTOM CONTROLS & LAYOUTS

VALIDATION & ERROR HANDLING

CLASS-BASED VISUAL ARCHITECTURE

COMPONENT SET


HTML mark-up is SEMANTICMXML mark-up is VISUAL

Semantic mark-up is good for applying multiple views to a single data-structure and require external visual descriptors (CSS.)

Visual mark-up is good for defining an explicit visual representation of an external data object, semantic or otherwise.


Places Flex is and will be weaker than HTML5


Accessibility


Search Engine Optimization


Web-sites


The browser was made for semantic mark-up. Flash locks site content in a layer of abstraction.

Abstraction allows for generalization, ubiquity, and re-use.

Specificity allows for customization, perfection, and speed - an experience highly-tailored for each specific medium.


Places Flex is and will be weaker than Native*

*probably.


Performance


Size


Consistency


Text

colinharman.com/portfolio/how-would-you-like-your-graphic-design/


Software is about balanceConsistencyUbiquity

PerformanceMemory

AbstractionSpecificity


FEATURES SPEED

SIZEUBIQUITY

NATIVEAIR MOBILE

HTML5


Take aways:Flex has a strong future.It looks different than its past.

HTML has a strong future.It looks different than its past and Flash’s past.

Native apps have a strong future.Mobile + App stores are highly disruptive.


There’s one final case for Flash I left out......


7. Pushing Boundaries


Thanks!

RJ OwenSenior Software ArchitectEffectiveUI

@[email protected]

mailto:[email protected]

mailto:[email protected]


This slide intentionally left blank.

Reasons for Flash: Flash Development in an HTML5 and App Store World

Technology

Transcript of Reasons for Flash: Flash Development in an HTML5 and App Store World