RJ Owen's presentation slides from his talk at 360 Flex 2011 in Denver, CO.

1. Reasons for Flash
Flash development in an HTML5 and App Store world

2. RJ Owen
Senior Software Architect Tweeting this session?
EffectiveUI Use the hashtag: #effectiveui
@rjowen
rj.owen@effectiveui.com
© 2011 EffectiveUI, Inc.

3. OMG HTML5 NATIVE APPS YIKES
© 2011 EffectiveUI, Inc.

4. © 2011 EffectiveUI, Inc. sugarpiefarmhouse.com

5. Where is Flex going?
© 2011 EffectiveUI, Inc.

6. Where has Flex been?
© 2011 EffectiveUI, Inc.

7. 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
© 2011 EffectiveUI, Inc.

8. 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
© 2011 EffectiveUI, Inc.

9. 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
© 2011 EffectiveUI, Inc.

10. 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
© 2011 EffectiveUI, Inc.

11. Adobe Flex 4 (2010)
• “Design in Mind”
• Spark
• Catalyst Integration
• FlexUnit integration
• Improved profiler
• Network monitor
• TLF
Product Goal:
!Improve UX
!Improve Enterprise tooling
© 2011 EffectiveUI, Inc.

12. 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
© 2011 EffectiveUI, Inc.

13. 1 1.5 2 3 3.5 4 4.5
Enterprise
Developers
AIR
Design
Mobile
© 2011 EffectiveUI, Inc.

14. Flex’s current trajectory: reverse-
engineering the business plan
Provide the tools required for
enterprise-level workflows
Marketed to Developers
To solve a wide array of problems
With good results
© 2011 EffectiveUI, Inc.

15. Flex’s current trajectory: reverse-
engineering the business plan
Provide the tools required for Enterprise
enterprise-level workflows
Marketed to Developers Developers
To solve a wide array of problems Ubiquity
With good results Design
© 2011 EffectiveUI, Inc.

16. So that Adobe can sell......
Creative Suite
part of $2Billion creative solutions
revenue 2010 (#1 source)
LiveCycle
part of $1Billion in Digital Enterprise
Solutions revenue 2010 (#2 source)
source: adobe.com/aboutadobe/invrelations/financialdocs.html
© 2011 EffectiveUI, Inc.

17. Take-aways:
Expect to see Flex continue growing in Enterprise
Business portals
Customer facing app widgets
UX that can integrate with a server
Expect tighter integration with CS, marketing about Design
Expect investment in Developers, marketing to Developers
Expect continued LiveCycle push
© 2011 EffectiveUI, Inc.

18. Where will this plan take Flex in a
post-HTML5 / post-Native App world?
© 2011 EffectiveUI, Inc.

19. 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 quicker
Single technology to focus on
Faster ROI
Core OOP education
and more.
© 2011 EffectiveUI, Inc.

20. That’s a great start. Here’s what I think.
Flex is and will continue to be valuable
for....
© 2011 EffectiveUI, Inc.

21. 1. Enterprise
© 2011 EffectiveUI, Inc.

22. Enterprise Requirements
Client-Server integration
OO languages
Developer toolsets
Mature languages
Code generation
Best-practices
Bigger logos
© 2011 EffectiveUI, Inc.

23. Java :: Enterprise Back-End
Flex :: Enterprise Front-End
© 2011 EffectiveUI, Inc.

24. 2. Multi-Screen Development
© 2011 EffectiveUI, Inc.

25. Same content, multiple screens
iOS, BlackBerry, Android, WebOS, WP7, and counting....
© 2011 EffectiveUI, Inc.

26. Approaches to multi-screen:
Web-only
Multiple native applications
(avoid multi-screen ubiquity altogether)
HTML5 app cache
(iOS doesn’t support!)
PhoneGap
Titanium
AIR mobile
© 2011 EffectiveUI, Inc.

27. Multi-screen application development
represents the best business case for Flex.
Flex is an easy technology for multi-screen
application development.
© 2011 EffectiveUI, Inc.

28. 3. Community
© 2011 EffectiveUI, Inc.

29. SpringAS Signals Flight
Swiz asmock FlexLib
Mate as3corelib Jest
Parsley as3crypto Ribbit
PureMVC as3awss3lib TweenLite
Robotlegs Away3D Tweener
tinyTLF PaperVision3D Merapi
Spoon.as as3ebaylib WOW 3D
hamcrest-as3 Degrafa as3youtubelib
SwiftSuspenders Reflex as3syndicationlib
FlexUnit Stealth FZip
© 2011 EffectiveUI, Inc.

30. 4. Video

31. Ogg Theora H.264 WebM
IE9 Manual Install
Firefox
Chrome
Safari
Mobile Safari
Opera
© 2011 EffectiveUI, Inc.

32. Ogg Theora H.264 WebM
BROWSER IE9
Firefox
Manual Install
INCOMPATIBILITY
Chrome
Safari
Mobile Safari
Opera FAIL
© 2011 EffectiveUI, Inc.

33. Flash
IE9
Firefox
Chrome
Safari
Mobile
Safari
Opera
© 2011 EffectiveUI, Inc.

34. Flash
IE9
Firefox
Chrome
Safari
Mobile
Safari
Opera
© 2011 EffectiveUI, Inc.

35. 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/2010
gizmodo.com/#!5538264/hulu-says-html5-isnt-ready-yet
© 2011 EffectiveUI, Inc.

36. “HTML5 Video doesn’t have a viable
DRM solution at this point.”
- Netflix, 4/2010
gigaom.com/video/netflix-no-plans-for-html5-video/
© 2011 EffectiveUI, Inc.

37. 5. Games
© 2011 EffectiveUI, Inc.

38. Flash is an animation engine.
Will always perform better than Canvas.
Molehill brings real hardware-
accelerated 3D
© 2011 EffectiveUI, Inc.

39. HTML5 games are okay
Canvas tag makes things flexible
© 2011 EffectiveUI, Inc.

40. Why move from HTML5 to Flash?
Browser support is spotty at best
Performance isn’t up to par
There is no FGL for html5 games
Source: blog.tametick.com/2011/01/why-im-moving-from-html5-to-flash.html
© 2011 EffectiveUI, Inc.

41. “Is html5 the future? I sure hope so!
Unfortunately, it isn’t the present.”
- TameTick.com
blog.tametick.com/2011/01/why-im-moving-from-html5-to-flash.html
© 2011 EffectiveUI, Inc.

43. source: facebook.com/note.php?note_id=491691753919
© 2011 EffectiveUI, Inc.

44. 6. Translating Interaction
© 2011 EffectiveUI, Inc.

45. (Don Norman’s) Experience Design
Vocabulary
Visibility
Affordances
Feedback
Mapping
Constraint
Consistency
© 2011 EffectiveUI, Inc.

46. VISIBILITY
Perceiving interactive elements
AFFORDANCES
Understanding interactive elements
FEEDBACK
Knowing how your actions impact the system
MAPPING
How well the interface reflects your understanding of the system
CONSTRAINTS
Preventing errors in the system
CONSISTENCY
Objects that appear the same function the same
© 2011 EffectiveUI, Inc.

47. VISIBILITY COMPONENT SET
Perceiving interactive elements
AFFORDANCES COMPONENT SET
Understanding interactive elements
FEEDBACK EVENT MODEL
Knowing how your actions impact the system
MAPPING CUSTOM CONTROLS & LAYOUTS
How well the interface reflects your understanding of the system
CONSTRAINTS VALIDATION & ERROR HANDLING
Preventing errors in the system
CONSISTENCY CLASS-BASED VISUAL ARCHITECTURE
Objects that appear the same function the same
© 2011 EffectiveUI, Inc.

48. HTML mark-up is SEMANTIC
MXML 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.
© 2011 EffectiveUI, Inc.

49. Places Flex is and will be weaker
than HTML5
© 2011 EffectiveUI, Inc.

50. Accessibility
© 2011 EffectiveUI, Inc.

51. Search Engine Optimization
© 2011 EffectiveUI, Inc.

52. Web-sites
© 2011 EffectiveUI, Inc.

53. 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.
© 2011 EffectiveUI, Inc.

54. Places Flex is and will be weaker
than Native*
*probably.
© 2011 EffectiveUI, Inc.

55. Performance
© 2011 EffectiveUI, Inc.

56. Size
© 2011 EffectiveUI, Inc.

57. Consistency
© 2011 EffectiveUI, Inc.

58. Text
© 2011 EffectiveUI, Inc. colinharman.com/portfolio/how-would-you-like-your-graphic-design/

59. Software is about balance
Consistency Performance Abstraction
Ubiquity Memory Specificity
© 2011 EffectiveUI, Inc.

60. FEATURES SPEED
AIR
NATIVE
MOBILE
HTML5
UBIQUITY SIZE
© 2011 EffectiveUI, Inc.

61. 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.
© 2011 EffectiveUI, Inc.

62. There’s one final case for Flash I
left out......
© 2011 EffectiveUI, Inc.

63. 7. Pushing Boundaries
© 2011 EffectiveUI, Inc.

64. © 2011 EffectiveUI, Inc.

65. Thanks!
RJ Owen
Senior Software
Architect
EffectiveUI
@rjowen
rj.owen@effectiveui.com
© 2011 EffectiveUI, Inc.

66. This slide intentionally left blank.
© 2011 EffectiveUI, Inc.