flash defenders - a nerdery agency primer

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 primers@nerdery.com

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.

QUESTIONS?More answers online at http://nerdery.com