Friday, March 26th, 2010

GitHub moves network graph feature from Flash to Canvas

Category: Canvas, Flash

<blockquote>

Given the current status of Canvas and the impending release of Apple’s iPad (which will have no Flash support at all), I finally decided to bite the bullet and do a complete rewrite of the Network Graph in JavaScript and Canvas.

This is Tom Preston-Werner of GitHub, from his recent posted about migrating the network graph functionality from Flash to Canvas.

githubnetworkgraph

This isn’t the first site to move over functionality, but Tom has a really interesting perspective on why he did this, what he likes about canvas, and what he wishes it had:

Where Canvas/JavaScript is better than Flash

  • Fewer lines of code and smaller deliverable size: Smaller code base and the compiled SWF file clocks in at 111k compared to the minified Canvas version at just 25k!
  • Flash works badly on Linux (and friends)
  • Inspectable/debuggable via browser
  • No compilation step
  • Better cursor handling
  • No need to focus to receive keyboard events

Where Canvas/JavaScript is worse than Flash

  • Have to handle clipping and redraw manually (SVG does better here too)
  • No embedded font support
  • No built-in multiline text wrap (painful for Bespin! ;)
  • No HTML fragment rendering. Yes! drawElement, drawElement, drawElement. Please user agents!

Related Content:

Posted by Dion Almaer at 1:10 am
7 Comments

++++-
4.6 rating from 37 votes

7 Comments »

Comments feed TrackBack URI

it’s always good to see flash go away!

Comment by stoimen — March 26, 2010

To solve the “Where Canvas/JavaScript is worse than Flash”, consider utilizing canvas only for the graphical elements instead of the network graph. So you have multiple canvas tags for each graphical element basically making your code look like SVG ;)
.
Then again, that would involve a whole lot more CSS to put it all together.
.
And another ‘then again’ this graph could’ve been written in pure HTML4/JS/CSS to begin with, but would’ve been more annoying due to lots of code.

Comment by BenGerrissen — March 26, 2010

At the moment my job also includes some heavy-duty canvas experimenting, however I also do have a great deal of AS3 experience. I love the speed of canvas in newer generation browsers – however, to be honest some of the claims laid in “Where Canvas/JavaScript is better than Flash” are simply wrong.

- the size issue is completely unfair and utterly wrong – either he was comparing the size of a flash file with all graphical/font elements embedded into it against a JS file only (no external graphics or css included), or the SWF/AS file was really poorly written. SWF format is as of few years back a gzip-compressed binary format – its like comparing a file against a ZIP-compressed file. Also graphic sizes – for “simple” visual elements that this graph uses should we really believe that the JS PNG version of an element would be smaller than a vector-based zip-compressed file?

- compatibility issue is also a bit vague… Flash player reaches an exponentially larger audience on all platforms/browsers than canvas… also I’ve never had any real problems with Flash in Linux…

- flash IS debuggable via browser – you just need a debugging version of the flash player

- auto-focus on flash elements is a simple fix

The other side of the argument has some weaknesses as well – saying that JS is worse because it doesn’t allow font embedding. If the project is already geared towards newer generation browsers (canvas), why not include some CSS3 magic with fontface then?

Comment by allmandring — March 26, 2010

The mention the iPad as one of the reasons to switch, but how will the mouseover effect work?

Comment by Jeria — March 26, 2010

As an end user it performs exactly the same on my PC, but I can no longer use it on my mobile. Most Symbian phones (largest smartphone OS by market share in the world, just not big in US) support Flash but not Canvas (yet).

Comment by dave1010 — March 26, 2010

http://raphaeljs.com/github/demo.html
This is fast and dirty implementation of network graph. It could be improved to match the original 100%, but you can see that performance is not an issue. Using Raphaël gives you a bonus in proper mouse events, good result on print and ability to make it work on iphone just with CSS (changing overflow:hidden to overflow:auto). Not mention working on IE.

Comment by DmitryBaranovskiy — March 28, 2010

“GitHub moves network graph feature from Flash to Canvas”

Except they didnt. From the article:

“For now, browsers with proper Canvas support will see the Canvas version and everyone else will see the Flash version.”

i.e. they still have the flash version given the prevalence of browsers with no canvas support.

mike chambers

mesh@adobe.com

Comment by mikechambers — March 28, 2010

Leave a comment

You must be logged in to post a comment.