8 ms·

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

149 points by mojombo 17y ago

mikepurvis 17y 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).
- tlrobinson 17y ago
  Unfortunately very large canvases suffer from poor performance in certain browsers. At least as of ~1 year ago.
  - mikepurvis 17y 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?
    - oozcitak 17y ago
      They can get quite wide and deep. See spree's network graph for example: http://github.com/railsdog/spree/network http://github.com/railsdog/spree/network
      - stevelosh 17y ago
        Homebrew's is crazy too (619 forks): http://github.com/mxcl/homebrew/network http://github.com/mxcl/homebrew/network
chasingsparks 17y 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.)
tlrobinson 17y 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 17y 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 17y 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/
- weaksauce 17y 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 17y 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 17y 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.
- deleted 17y ago
  [deleted]
- scorpion032 17y ago
  No, this switch wouldn't affect that. That is a cron that updates the latest commits and graphs.
  - jfmiller28 17y 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_ 17y 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.
- weaksauce 17y 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-scripts.html http://www.mozilla.org/projects/security/components/signed-s... http://www.krikkit.net/howtos/13-howtos/16-copy-text-to-clipboard-with-javascript.html 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 17y 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 17y ago
Surprised they didn't use svg/vml eg. http://raphaeljs.com http://raphaeljs.com
- mr_justin 17y ago
  Canvas has wider support doesn't it? SVG has really stagnated in the last 4 years or so.
  - ZeroGravitas 17y 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 17y 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_justin 17y 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 http://github.com/madrobby/scriptaculous/network
  - mbrubeck 17y ago
    Mouse interaction is quite easy with SVG; you can attach event listeners to individual SVG elements in the DOM.
- andrewvc 17y ago
  I wonder if the fonts would look better with SVG, as is, the branch names look terrible on canvas.
  - grayrest 17y ago
    This depends entirely on your browser. Looks fine on all the mac browsers as well as firefox windows.
    - andrewvc 17y ago
      I tried Chrome on Vista and Ubuntu, and Firefox on Vista, looked bad in all of them.
- vidarh 17y ago
  I agree with you, though the upside of canvas is that it's easier to get it working on IE (via excanvas)
- 17y ago
brianr 17y 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 17y 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 17y 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 17y ago
He mentions using haXe for his source. Has anyone here used haXe? Could you tell us about your experience with it?
FluidDjango 17y 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...?

149 points by mojombo 17y 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).

tlrobinson 17y ago
Unfortunately very large canvases suffer from poor performance in certain browsers. At least as of ~1 year ago.
- mikepurvis 17y 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?
  - oozcitak 17y ago
    They can get quite wide and deep. See spree's network graph for example: http://github.com/railsdog/spree/network http://github.com/railsdog/spree/network
    - stevelosh 17y ago
      Homebrew's is crazy too (619 forks): http://github.com/mxcl/homebrew/network http://github.com/mxcl/homebrew/network

chasingsparks 17y 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.)

tlrobinson 17y 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 17y 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 17y 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/

weaksauce 17y 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 17y 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 17y 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.

deleted 17y ago
[deleted]
scorpion032 17y ago
No, this switch wouldn't affect that. That is a cron that updates the latest commits and graphs.
- jfmiller28 17y 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_ 17y 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.

weaksauce 17y 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-scripts.html http://www.mozilla.org/projects/security/components/signed-s... http://www.krikkit.net/howtos/13-howtos/16-copy-text-to-clipboard-with-javascript.html 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 17y 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 17y ago

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

mr_justin 17y ago
Canvas has wider support doesn't it? SVG has really stagnated in the last 4 years or so.
- ZeroGravitas 17y 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 17y 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_justin 17y 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 http://github.com/madrobby/scriptaculous/network
- mbrubeck 17y ago
  Mouse interaction is quite easy with SVG; you can attach event listeners to individual SVG elements in the DOM.
andrewvc 17y ago
I wonder if the fonts would look better with SVG, as is, the branch names look terrible on canvas.
- grayrest 17y ago
  This depends entirely on your browser. Looks fine on all the mac browsers as well as firefox windows.
  - andrewvc 17y ago
    I tried Chrome on Vista and Ubuntu, and Firefox on Vista, looked bad in all of them.
vidarh 17y ago
I agree with you, though the upside of canvas is that it's easier to get it working on IE (via excanvas)
17y ago

brianr 17y 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 17y 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 17y 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 17y ago

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

FluidDjango 17y 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...?