Bye Bye Flash: GitHub's Network Graph is now Canvas | Hacker News Reader

Bye Bye Flash: GitHub's Network Graph is now Canvas

github.com

149 pointsmojombo33 comments

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.)

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.

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.

"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).

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

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?

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

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

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

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.

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

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

I wonder if the fonts would look better with SVG, as is, the branch names look terrible on canvas.

This depends entirely on your browser. Looks fine on all the mac browsers as well as firefox windows.

I tried Chrome on Vista and Ubuntu, and Firefox on Vista, looked bad in all of them.

I agree with you, though the upside of canvas is that it's easier to get it working on IE (via excanvas)

According to http://github.com/blog/621-bye-bye-flash-network-graph-is-no..., there are too many DOM objects involved in the graph for SVG to be performant.

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/

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.

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.

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...?

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.

Surprised they didn't use svg/vml eg. http://raphaeljs.com

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

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.

"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.

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.

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.

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

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.

I wonder if they'll be converting Clippy next.

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

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.krikkit.net/howtos/13-howtos/16-copy-text-to-clip...

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

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.

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

Reply on news.ycombinator.com