flash defenders - a nerdery agency primer
DESCRIPTION
TRANSCRIPT
FLASH DEFENDERSA G E N C Y P R I M E R S E R I E S
THE NERDERY
We help our partners get big ideas out of their heads and onto their clients’ websites
Website: www.nerdery.comTwitter: @the_nerdery
HOW TO PARTICIPATE
Using the questions panels in the GoToMeeting app
On Twitter @The_Nerdery
Send us a email at [email protected]
BENSENIOR DEVELOPER
ANANDINTERACTIVE WEB DEVELOPER
SO WHY DOES FLASHNEED DEFENDING?
It’s time for a brief history lesson
IN THE BEGINNING THERE WAS HTML...And in 1993 it was mind blowing.
BROWSER WARSYou know back when Microsoft scared the crap out of everybody and
all media played in plugins.
ZELDMAN BRINGSTHE STANDARDS DOWN
FROM THE MOUNTAINTOPRevenge of the tuque...
WHATWG V. XHTML 2.0A revolution in the standards making process.
WEB ON YOUR PHONE... Not the kinda sorta web but the real web
(Except for Flash).
STEVE SAYS,“WHO NEEDS FLASH?
WE HAVE HTML5.”Lee gives him the middle-finger in response.
EVOLUTION STATISTICSBetween 1995 and 2001, Microsoft released six versions of Internet Explorer.
After 2001, the next major version was not released until October 2007.
Between 1995 and 2000, four major versions of the HTML spec were released (including XHTML).
After 1997, the next major version the HTML spec did not achieve draft status until January 2008.
SO WHAT’S NEW WITH HTML5?
MARKUP — HTML5It’s a formal draft and implemented (or will be shortly)
by all of the major browser vendors.
HTML5
STYLING—CSS3It’s fragmented. It’s proprietary, and implemented with browser
prefixes. There might be a standard some day.
HTML5
BEHAVIOR—JAVASCRIPTW3C Specified APIs. Hopefully we won’t repeat
the fun of the event implementations. And don’t get us started on the box model...
HTML5
SO WHAT CAN YOU DO WITH IT?
Other than build web pages that is... cause I’ve been doing that like years and years.
HTML5
BUILD BETTER WEB PAGES
Run a web application without the web
Have typography that sucks less.
Provide user feedback and context with animation and transitions
Render new graphics on-the-fly based on application state
HTML5
AND WATCH TELEVISION ON THE COMPUTER!!!
True, you’ve been able to do that for a long time already
Now you can do it natively in the browser. We’re still fighting about codec...
H264 is looking strong and it’s free for a couple more years
Google-backed WebM and Ogg Theora might be patent unencumbered (but MPEG-LA doesn’t think so).
HTML5
SO WAS STEVE RIGHT?IS FLASH OBSOLETE?
SOME PERSPECTIVE ON THE AVAILABILITY…
FLASH SUPPORT INCURRENT BROWSERS
INTERNETEXPLORER 8
FIREFOX 3.6 CHROME 9 SAFARI 5 OPERA iOS 4.2.1 ANDROID 2.3
✓ ✖✓✓ ✓ ✓ ✓
HTML5 SUPPORT* INCURRENT BROWSERS
INTERNETEXPLORER 8
FIREFOX 3.6 CHROME 9 SAFARI 5 OPERA iOS 4.2.1 ANDROID 2.3
✓✓ ✓ ✓ ✓✖ ✓
* EACH BROWSER’S SUPPORT OF HTML5 VARIES.
Internet Explorer (46%) Firefox (30.7%) Chrome (14.2%) Safari (5.9%) Opera (2%) Mobile (4%)
USAGE SHARE OF WEB BROWSERSAS OF JANUARY 2011
SOURCE: HTTP://EN.WIKIPEDIA.ORG/WIKI/BROWSER_STATS
THE BOOGEY MENWhy do people hate flash... And there some people who really hate it. I’m looking at you John Gruber.
FLASH
5 COMMON COMPLAINTS
It causes browser crashes
High resource use
Properietary
Vector for security exploits
Vector for annoying banner ads
FLASH
BROWSER CRASHES
Flash rarely arbitrarily crashes the browser
Programs running in the Flash player crash
Common Cause 1: Unhandled errors or exceptions
Common Cause 2: Memory leaks
FLASH
HIGH RESOURCE USE
Rendering graphics on the cpu is expensive
Rendering video on the cpu is expensive
Prior to 10.1 Flash did a bad job releasing resources when not active (e.g. hidden tabs)
Standards have changed. Flash started on computers less powerful than my phone. But targeted fps in those days 12. Now people are aiming at 30 or better.
FLASH
PROPRIETARY
The spec for swf is published.
ActionScript 3.0 is ECMA script (and an ISO standard)
Flex (and the Flex SDK) is open source
Alternate compilers exist (but they’re small projects)
However, the format probably doesn’t pass the 25 year test
FLASH
VECTOR FOR SECURITY EXPLOITS
Which is to say “another vector for security exploits”, the browser is already vector for security exploits.
Policy-wise Macromedia/Adobe has tended to be conservative in swf security restrictions (e.g. no keyboard in full screen, cross domain white-listing, very limited file system access).
However, turning on Flash does make the browser less secure. Hack this box competitions save it for later days.
FLASH
VECTOR FOR BANNER ADS
Ads are not going away
Despite Apple’s affinity for the use of the word “magic” changing runtimes does not make banner ads better.
Making banner ads immune to Flash blocker extensions does make banner ads less annoying.
FLASH
WHAT HAS FLASH BEEN COMMONLY USED FOR?
And does HTML 5 do it better or worse?
COMMON USES FOR FLASH
Playing video
Vector/Image rendering in the browser
Improving type quality in dynamic designs
Animations
Application development (e.g. complex visualizations and data manipulation tools).
HTML5 VIDEO VS. FLASH VIDEO
HTML5 is a progressive download standard, but it acts like a stream in some browsers
HTML5 often uses the GPU for playback
No stream or connection-level authentication
Requires multiple encoding formats
No full screen video
VECTOR/IMAGE RENDERING
There is a lot of talk about video playback or anecdotes about fans when talking about Flash. But how does raw rendering compare?
LET’S RUN SOME TESTS…
RENDERING EXAMPLES
HTML513 FPS
FLASH46 FPS
ANIMATIONS:CSS3 TRANSITIONS
There isn’t a standard, now. There’s a draft. It works in some browsers (with prefixes).
Many of the cool animations in Apple’s webkit demos are achieved this way.
Can leverage the GPU
Applied as a style through css or javascript
ANIMATION:PROGRAMATIC TWEENS
Manipulating a property at a regular interval
In JavaScript, it is difficult to integrate hand animated elements (e.g. timeline art).
JavaScript performance characteristics will vary dramatically from browser to browser
Audio synchronization
TYPOGRAPHY
The sooner we can get rid of sIFR, the better.
Foundries are getting on board slowly.
Type still sucks.
Until you see hanging punctuation, decent hyphenation and justification, and ligatures, you’re browser’s type sucks.
APPLICATION DEVELOPMENTJavascript missing “require” or “import”
Javascript IDE’s missing good code hinting
Packaging and distributing can get messy. Really need an automated build system that outputs minified js (e.g. Google’s Closure)
Debugging tools browser and vendor specific
MVC largely a missing pattern
Scope is ugly (e.g. handling of timers)
WHEN SHOULD YOU USE FLASH?
BANNER ADSThis is what the ad networks support. It’s easy to audit size,
functionality and frame rate restrictions.
WHEN SHOULD YOU USE FLASH?
PIXEL LEVELIMAGE EFFECTS
Pixel Bender which was introduced in Flash player 10 allows fastpixel-level image bitmap transformation.
WHEN SHOULD YOU USE FLASH?
RECORDING VIDEOOR AUDIO
The Flash player provides access to the computer’s camera and microphone where available.
WHEN SHOULD YOU USE FLASH?
CLIENT-SERVER APPLICATIONSThis isn’t the only way to do this, but it does simplify development and
provides a unified target.
WHEN SHOULD YOU USE FLASH?
GAMESIf you’re interested in blending timeline and programatic animation it
will be easier in Flash.
WHEN SHOULD YOU USE FLASH?
COMPLEX VISUALIZATIONSIf you’re targeting the desktop, Flash is still probably your best bet for
creating this content.
WHEN SHOULD YOU USE FLASH?
KIOSKSFlash is often a good-fit for kiosk development.
WHEN SHOULD YOU USE FLASH?
STREAMING VIDEOIn order to have a true streaming media experience,
you need either Flash or Silverlight.(This includes enforcing DRM. )
WHEN SHOULD YOU USE FLASH?
WHEN SHOULDN’T YOU USE FLASH?
PROGRESSIVE VIDEO PLAYERAt least consider HTML5 backed up by a Flash player
for maximum compatibility.
WHEN SHOULDN’T YOU USE FLASH?
HOMEPAGE CAROUSELIt’s probably better if you do this in javascript and make the content
indexable and accessible.
WHEN SHOULDN’T YOU USE FLASH?
ANYTHING TARGETING iOSApple and Adobe are still feuding...and that’s not likely to change soon.
WHEN SHOULDN’T YOU USE FLASH?
MICROSITESFlash is best when it is used to supplement or add interactivity to a
site. It should be used in partnership with HTML not as a replacement.
WHEN SHOULDN’T YOU USE FLASH?
ADMIN INTERFACESAgain use Flash to enhance an administrative interface, but primary
development should be HTML.
WHEN SHOULDN’T YOU USE FLASH?
MY 2 CENTSIt’s not an either/or question. Both are going to be around.
Choose technologies that fit your requirements.