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

http://github.com/blog/621-bye-bye-flash-network-graph-is-now-canvas

by mojombo • 16 years ago

149 33 16 years ago

mikepurvis2• 16 years ago

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

tlrobinson2• 16 years ago

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

mikepurvis2• 16 years 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?

chasingsparks• 16 years ago

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

tlrobinson2• 16 years ago

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• 16 years ago

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.

jballanc• 16 years ago

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/

weaksauce2• 16 years ago

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• 16 years ago

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.

j_baker• 16 years ago

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• 16 years ago

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

jfmiller28• 16 years ago

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_• 16 years ago

I wonder if they'll be converting Clippy next.

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

weaksauce2• 16 years ago

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.

kneath• 16 years ago

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.

artpop• 16 years ago

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

mr_justin2• 16 years ago

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

ZeroGravitas• 16 years ago

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.

jomohke• 16 years ago

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_justin2• 16 years ago

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• 16 years ago

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

andrewvc2• 16 years ago

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

grayrest• 16 years ago

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

vidarh• 16 years ago

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

jparise• 16 years ago

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.

brianr• 16 years ago

"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• 16 years ago

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.

daveungerer• 16 years ago

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.

tdupree• 16 years ago

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

FluidDjango• 16 years ago

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

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

Related Stories