Live data from Hacker News

Did these guys just reinvent the Web?

javaworld.com

81–90 of 93 posts

Re: Did these guys just reinvent the Web?

#81
post #49

My prototyping framework http://framerjs.com uses the exact same approach, divs positioned with only css matrix transforms. Great for high performance animations. I've sometimes thought about building a full fledged ui framework on top of it but it doesn't work (exactly the same) in all browsers. And I suspect offloading everything to the gpu by default will lead to other sorts of performance issues but I'll have to…

If you were building specifically for mobile, how would it do?

Do iOS/Android handle CSS matrix well? Because if you could punt on FF/IE support, it seems like you could do some interesting mobile interaction stuff.

Re: Did these guys just reinvent the Web?

#83

Earlier quoted context omitted.

Probably using -webkit vendor prefixes (can't check for sure, on iPhone)

Article says "We use the CSS3 primitive -webkit-transform: matrix3d", so that'd be a yes

Except that for nearly every -webkit property there's a non-vendor version as well. There's the occasional -moz in there so it doesn't seem that would be the problem.

It now redirects to famou.us/c/ in Firefox for me.

Re: Did these guys just reinvent the Web?

#85
post #57

Earlier quoted context omitted.

Since when did 'the web' involve giving away all the source code and not charging people for things? Did Google open source their search engine and let anybody advertise on their site for free while I wasn't looking? I really don't understand this meme about the web being 'open'. Much of the native desktop software I use is open source. Practically none of the web services I use are open source. There is not much cha…

The web is characterised by all code being visible by default, e.g. "View Source" in every browser. It's agnostic on whether you can charge for that source code, but in practical terms it's pretty tough to publish openly readable source and expect people to pay for it.

'View Source' is not freedom: https://www.gnu.org/philosophy/javascript-trap.html

Many sites still use JavaScript that way, but some use it for major programs that do large jobs. For instance, Google Docs downloads into your machine a JavaScript program which measures half a megabyte, in a compacted form that we could call Obfuscript because it has no comments and hardly any whitespace, and the method names are one letter long. The source code of a program is the preferred form for modifying it; the compacted code is not source code, and the real source code of this program is not available to the user.

Re: Did these guys just reinvent the Web?

#87
post #52
post #49

My prototyping framework http://framerjs.com uses the exact same approach, divs positioned with only css matrix transforms. Great for high performance animations. I've sometimes thought about building a full fledged ui framework on top of it but it doesn't work (exactly the same) in all browsers. And I suspect offloading everything to the gpu by default will lead to other sorts of performance issues but I'll have to…

Check these for examples of performance: http://www.framerjs.com/static/examples/GoogleNow/index.html http://www.framerjs.com/static/examples/NewsFeed/index.html http://www.framerjs.com/static/examples/Intro/index.html

People should try the editor out: http://www.framerjs.com/editor/

Re: Did these guys just reinvent the Web?

#88
post #7

From the rather vague text I can imagine they are doing matrix multiplication in JavaScript and assigning the end result to a CSS transform. Instead of doing multiple transforms in CSS which is slower. The end result is smoother HTML5 animations but I haven't yet figured out where they reinvented the web.

It's been a while since I looked at transition (and 3d transition) support from css -- but this sounds really counter intuitive -- shouldn't the browsers be able to make these changes themselves, in c++/c/hand-tuned machine code at that?

http://www.w3.org/TR/css3-transforms/#transform-property

"A transformation is applied to the coordinate system an element renders in through the ‘transform’ property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix like defined in Mathematical Description of Transform Functions, then multiplying the matrices."

On a side note: this looks like something that should work (transformation/transition) with javascript disabled -- we've (rather) recently gotten drop-down menus that don't require javascript -- seems like a bit of a step backwards to require javascript for (some uses) of basic transformations if that's being used as part of the essential ux for a page...

Re: Did these guys just reinvent the Web?

#89
post #73
post #62

Its quite terrible on this workstation, so I'm gonna have to go with a no. Also isnt offloading everything to the GPU a bad idea on mobile?

Nope, it is a great idea on mobile, at least for iDevices and I imagine most Android devices. Especially with high dpi screens, leaving everything on the CPU is too slow.

I think in one of the web performance talks by Addy Osmani he said it should be used sparely at best. Maybe I'll look it up to check

Re: Did these guys just reinvent the Web?

#90
post #89
post #73

Earlier quoted context omitted.

Nope, it is a great idea on mobile, at least for iDevices and I imagine most Android devices. Especially with high dpi screens, leaving everything on the CPU is too slow.

I think in one of the web performance talks by Addy Osmani he said it should be used sparely at best. Maybe I'll look it up to check

I'm coming at this from a native development perspective, so there are large gaps in my knowledge. In particular, I've not done any benchmarks, so take what I say with a large grain of salt. Any real performance advice will come down to comparing alternative ways of implementing a particular effect, rather than a blanket, "do this."

My understanding is that when a browser renders a page, the output bitmap is kept in a render buffer, which then gets composited with other buffers when being written out to the display. Filling the render buffers is slow (largely on the CPU), and compositing is fast (largely on the GPU). Using the 3D transform effects moves elements on the page into separate buffers.

Performance would be improved by having fewer buffers, and by re-drawing buffers less frequently.

Best case is to have a single buffer rendered once, I think that's what you're referring to by Addy's suggestion. But, if you're going to have elements moving relative to each other, it is faster to render them both once, then re-composit multiple times on the GPU, rather than re-render the whole scene on the CPU each time there is a change. That at least is what I mean by, "moving computation to the GPU."

Post reply on HN