Loose notes from SXSW 2010 panel discussion Is Canvas the End of Flash?. This debate is really heating up as more browsers gain Canvas support and sentiment seems to be rapidly turning against Flash. But how feasible is it to consider the canvas element a real Flash replacement? Five panelists hashed it out, with excellent points on all sides. Very useful session.
Canvas is more performant. Many mobile devices already have Canvas implemented in their browsers, not true of Flash.
Inside IQ: Analytics dashboard for petabyte storage clusters. So much data that the owners have little idea what’s actually happening in the systems.
JQuery library “Flot” integrates with Canvas for doing real-time data visualizations. Flot renders the canvas but we still have access to the DOM and the canvas so we can mash up the output of these tools. This stuff is so impressive. There are other JQuery plugins that draw on top of Flot as well.
Why Canvas? Why Flash?
Salant: A client had previously used a commercial Flash-based charting system and had a bad experience, wanted something cleaner. So went with Flot. IE compatibility requirements were low since it was a back-end tool (not public).
Haase: A Flex expert doing similar things in Flash. Snarky comment about having to redevelop a graphics library every year (ie Flash tools for this kind of stuff already exists). Sees all of this as reinventing wheels that already exist. Flash is going to give you filter effects like drop shadows and blurs. You’re going to have build up all this stuff again in Canvas. Flash gives you this stuff out of the box. Finally, what’s the tooling support? ActionScript is a nice language. Flash caught on not because of its API but because they were given a tool that made it easy to create the visuals they needed. It’s all already there in Flash. API? Great. Where’s the tool?
Germick: The toolset is really important. If I need to make a cute fuzzy bunny jumping around, Flash is a simple tool that’s already there. This is going to be much harder in Canvas. Also the giant Flash community already out there. There’s no contest in terms of the toolset that’s already extant.
Browser compatibility
====================
One advantage of Flash is that it’s browser agnostic. The big issue is IE since it doesn’t support Canvas.
Salant: It’s a more complicated than that. Webkit is the engine behind lots of browsers, plus Android and the iPhone. IE adapter for Canvas: http://j.mp/excanvas … performance of that adapter is crap right now. For IE we’re using ChromeFrame – IE users run the Chrome engine in a frame. Big download but once installed it’s blazingly fast.
Bespin is the canvas-based editor (I wrote about this at a previous show). Bespin won’t work in IE of course. We thought we could get OK perf out of a Flash or Silverlight bridge but decided not to. IE9 is intending to support Canvas, but they have a lot invested in Silverlight. They’re not aligned with the success of the open web.
You have the developer web (can choose any browser any time), the consumer web (your mom’s not going to install that adapter) and you have the business web (corp customers who aren’t allowed to use alternative browsers). So three audiences to think about.
Mobile: iPhone and iPad don’t have Flash support, but they do have Canvas. If Apple is a dominant player in this tablet space, MS and Adobe are going to have a really hard time of it. I won’t be surprised to see litigation come out of it.
It’s not like Flash is dead on mobile – it works on other phones, and the 10.1 release increases performance on those platforms. But iPhone and iPad are dominant. Works on Palm Pre and Android.
Apple talks about Flash not performing well on Macs in general, blames Adobe. Says it would be too resource intensive on the iPhone. But 3rd party studies on this have varying conclusions. Haase: Flash 10.1 is in beta – they’ve worked hard on performance and footprint.
Galbraith actually anticipates Flash being *more* performant than Canvas for some time to come. Google for “canvas game snowball” to see what the canvas performance on your phone is like right now. But Galbraith finds Canvas performance more than adequate for most purposes right now.
User Experience
==============
Veen: Flash detractors say that Flash is an alien in the browser. Can’t use Cmd-F to find text in it. Can’t copy images out of it. Steals keyboard focus. Sections aren’t bookmarkable, etc.
This is partly dependent on the type of app you’re doing. Do you need multiple instances on the page? Is animation heavy? How much text is there? Do you need game-like experience or design/navigation experience?
The same criticism about Flash being an alien in the browser could be made about Canvas.
Adobe TV used to be a Flex app, but they rewrote it as a regular web page and people loved it.
The most successful Flash experience on the web is the YouTube video player.
Bespin (editor) is built in Canvas, but isn’t accessible to the blind. So we’re back to the same problems.
If you crack open the DOM on a lot of people you see a lot of divs that are implementation details that have nothing to do with page logic. But with Bespin we were excited because all the business happens in the canvas element and we can explode that out into the rest of the page, giving access to screen readers. So we’ve broken access to screen readers today but the path is clear to actually make things better than they were before. Stay tuned.
Web development practices
========================
Salant: We were surprised by the accessibility of the canvas element. The step to get into Canvas development is actually a teeny little step – a progressive learning experience that feels natural (unlike with Flash). A lot of the tools we invest in for web development turn into great skills for canvas development. We also have the View Source benefit – you can’t do this with Flash but you can with Canvas tools. You can see what other developers are doing.
No matter how great it is to develop in Javascript and Canvas, not everyone is a developer. CS will stick around for all the devs who are less programmer-y.
Will there be a Flash option to output to HTML5? Haase won’t say (says he doesn’t know). Adobe is a tools company and they like selling tools: “It’s where we make our money.”
Galbraith: The open web means a lot of different things to a lot of different people. I’m uncomfortable trusting my work to a proprietary platform. You choose a platform that’s aligned with your goals, but then later the goals dis-converge and you run into unpleasantness. Now (with Canvas) we can do Flash-like development without going under single-vendor control. This critical dynamic tool is finally here and able to unleash the web as an app platform.
Microsoft just announced HTML5 support for IE9 a few minutes ago. Galbraith: They tried to decouple Canvas from HTML5 a while ago – we don’t know why. So the IE future is unclear for Canvas as of now.
Does SVG have any chance? IE9 allegedly has excellent SVG support. This could be a game changer. It’s a bit maligned because it’s been announced for so long. So there will be an additional SVG or Canvas decision to make.