
Bye Bye Flash: GitHub's Network Graph is now Canvas - mojombo
http://github.com/blog/621-bye-bye-flash-network-graph-is-now-canvas
======
chasingsparks
GitHub continues to make me happy.

This morning, I logged in to view my +6 timezone partner's commits from last
night. I had a very visible smile when I noticed the graphs. (I rarely bother
installing flash on my *nix boxes. The support really is terrible.)

------
tlrobinson
Awesome. This is the first time I've seen a real world app ported feature-for-
feature from Flash to Canvas. It's a good data point.

It feels more responsive than the Flash version in Chrome on OS X.

~~~
gb
That's one definite advantage Canvas has over Flash, everything you do in
Flash is restricted to the framerate the SWF is running at, so all interaction
has a little extra lag before the UI updates.

This is also why some movies seem to hog an undue amount of resources, to
ensure it feels as responsive as possible people use excessively high
framerates when they're not needed.

There is a mechanism for forcing render updates between the usual frame timer
but in my experience most people don't seem to understand it, so it's rarely
used.

------
mikepurvis
"But with Canvas I have to manually redraw the Graph any time the state
changes. In addition, to keep things snappy, I have to calculate which commits
and connections are currently viewable and ONLY draw those. This results in a
substantial amount of code that is completely unnecessary in Flash."

Seems to me you could still do this in Canvas—just make a big wide one, and
throw it in an overflow:scroll div.

You wouldn't even have to draw it all upfront. Just flag the elements you've
drawn so far, and lazily draw the rest as they come into view (there's a
scroll event you could capture to make this happen even more seamlessly).

~~~
tlrobinson
Unfortunately very large canvases suffer from poor performance in certain
browsers. At least as of ~1 year ago.

~~~
mikepurvis
Hmm. Nonetheless, I feel like you could do this somehow. I'm not a github
user, so I don't know just how wide these things get, but perhaps you could do
series of canvases placed side-by-side, at least on the browsers which require
the workaround?

~~~
oozcitak
They can get quite wide and deep. See spree's network graph for example:

<http://github.com/railsdog/spree/network>

~~~
stevelosh
Homebrew's is crazy too (619 forks): <http://github.com/mxcl/homebrew/network>

------
jomohke
I'm surprised he didn't use SVG - it provides an object graph, and will handle
clipping/rendering for you.

A low level API like canvas probably isn't necessary for this kind of work.

~~~
mr_justin
Does it handle click/drag events? If you check out the network graph of repo
with a lot of commiters/activity, you can click and drag the graph around. It
works fantastic with canvas/javascript.

Example: <http://github.com/madrobby/scriptaculous/network>

~~~
mbrubeck
Mouse interaction is quite easy with SVG; you can attach event listeners to
individual SVG elements in the DOM.

------
jballanc
On my poor little 1st Gen MacBook (Yonah), performance of the Canvas based
graph in Safari is significantly faster than the old Flash based solution.

\o/

~~~
weaksauce
What blows my mind about flash performance on a mac is that I was watching a
video from google videos and it was using up 50% of cpu resources on _both_
cores. press pause and it drops down to 0.1%. This is on a fast 2.8GHz current
model macbook pro with the latest OS and Flash player.

~~~
Tuna-Fish
Something using 50% flat on both cores usually tells you that the cpu
scheduler is just broken. You get that kind of result by having a single-
threaded cpu-limited task that the scheduler tosses from one core to another
very frequently. Many naive scheduling algorithms do this.

------
FluidDjango
Very interesting to see his list of a few points-of-pain in moving to Canvas
(over 4 days of coding, he estimated). I hope that folks developing Canvas
will continue to take note of developer feedback.

When Canvas can _really_ achieve web dominance will be when the hordes of
average site designers can use it easily, even with Dreamweaver [oh, wait.
Nevermind.] But maybe when eJohn isn't doing anything on jQuery...?

------
daveungerer
Wow, seems to load faster and definitely performs better on my MacBook running
latest Safari.

There's a bug with scrolling though: if you release the mouse outside of the
network graph, it stays in scrolling mode until you click on the canvas again.
I hope that's not some kind of inherent limitation.

------
artpop
Surprised they didn't use svg/vml eg. <http://raphaeljs.com>

~~~
mr_justin
Canvas has wider support doesn't it? SVG has really stagnated in the last 4
years or so.

~~~
ZeroGravitas
IE9 has just announced SVG support. Also the SVG library he links to falls
back to VML in IE 6, 7 & 8 so the SVG comeback has been on for at least a year
and is only cemented by upcoming IE support.

------
brianr
"Getting log output from an embedded Flash component is a huge chore, but with
Canvas you can simply use console.log to output status messages to the
inspector."

Hmmm, you might be doing it wrong. Just trace(whatever); and keep a terminal
open running tail -f flashlog.txt and you're good to go.

~~~
arethuza
I like to call from ActionScript out to JavaScript and call the normal logging
component there - means that Flex/Flash log entries are shown in the same log
as entries from JavaScript component.

------
j_baker
I noticed that I seem to be getting fewer of the "This graph is out of date.
Please wait while we update it" messages. Is that related to the Canvas
switch? If so, major props.

~~~
scorpion032
No, this switch wouldn't affect that. That is a cron that updates the latest
commits and graphs.

~~~
jfmiller28
I'm fairly certain that a graph is generated the first time it is requested.
When a commit comes in a new graph is generated on the first request, and the
old one is shown. For rapidly evolving, low visibility projects this is
frequent, as projects get more popular, and the updates slow it becomes less
so.

------
meese_
I wonder if they'll be converting Clippy next.

That seems to be the only thing left on the site that is still Flash.

~~~
weaksauce
Javascript makes it a pain to get clipboard functionality working across all
browsers. Flash is the lcd for this kind of thing. A cursory look tells me
that it might be possible for firefox with signed javascript:
[http://www.mozilla.org/projects/security/components/signed-s...](http://www.mozilla.org/projects/security/components/signed-
scripts.html)

[http://www.krikkit.net/howtos/13-howtos/16-copy-text-to-
clip...](http://www.krikkit.net/howtos/13-howtos/16-copy-text-to-clipboard-
with-javascript.html)

I don't think it will work on chrome though. IE probably.

~~~
kneath
Exactly. There just isn't browser support for clipboard access right now.

However, it's not like clippy has any impact on CPU performance or usability
(it's only added functionality, not blocking content for people w/o flash) so
there's really no downside to it being in flash.

------
tdupree
He mentions using haXe for his source. Has anyone here used haXe? Could you
tell us about your experience with it?

