4 ms·

Introducing Famo.us-Angular

19 points by zackbrown 12y ago

mbell 12y ago
Yesterday I came across famo.us and spent a good 20 minutes between between their github page and their home page trying to figure out what it is. I still have no idea what it actually is. My best guess so far is some sort of frontend component framework that renders with WebGL but there was some talk in places of it covering the backend to, so is it like meteor + a front end library or something of the sort?
- coderzach 12y ago
  Rather than use the browsers layout engine, they created their own. It uses a css3d hack to promote everything to compositor layers, and then performs layout itself using css matrix transforms. It also has a physics engine, so you can do physics based interfaces. Here's an explanation of GPU compositor layers: http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome http://www.chromium.org/developers/design-documents/gpu-acce...
- zackbrown 12y ago
  Yes, it's a front-end framework. One of the coolest thing about it is its mobile rendering performance (write one JS app, deploy everywhere with awesome performance across devices and browsers.) Now, via Famo.us-Angular, you can tap into that performance with AngularJS, too.
  - mbell 12y ago
    > One of the coolest thing about it is its mobile rendering performance (write one JS app, deploy everywhere with awesome performance across devices and browsers.) Again...WTF does that even mean? So they only use CSS3 transforms that are GPU accelerated? So it's a CSS3 animation library? The vague documentation seems to imply a grander vision which is unclear.
    - zackbrown 12y ago
      > Again...WTF does that even mean? So they only use CSS3 transforms that are GPU accelerated? So it's a CSS3 animation library? The vague documentation seems to imply a grander vision which is unclear. The core of Famo.us is a rendering engine. Instead of using the DOM to represent its UI hierarchy or using the browser to render that hierarchical DOM to screen, it uses an internal scene graph representation and handles the rendering of the scene graph to screen through an abstracted output layer. The browser DOM is just one of its supported outputs; another is WebGL, and there's no reason there couldn't be other outputs, outside of the browser--I think this extensibility is part of the 'grander vision.' The scene graph is a very robust graphics model, so it would be a great choice for a model if someone were to reinvent HTML from scratch today. Again, 'grander vision,' maybe. In the case of rendering to the browser, the way it works is by flattening and compositing its scene graph, creating a DOM node for each 'Surface' (which is a leaf node of the Famo.us scene graph) and handling the 3-space (or really, 2.5-space) positioning with CSS3 Matrix3D transforms, which are GPU accelerated. Since the DOM isn't needed for hierarchy (again, all of the calculations are handled by the engine) the Famo.us-outputted DOM is a simplified set of sibling nodes underneath a single parent (the Famo.us container,) and it continuously updates the Surfaces' DOM representations' Matrix3D properties (performantly, leveraging requestAnimationFrame) as the scene graph gets updated by the program running on the Famo.us engine. So that's pretty much what Famo.us is. Does that help? A slightly less technical, if more practical explanation might be about how you can "write one JS app [and] deploy everywhere with awesome performance across devices and browsers."
  - ChefJames 12y ago
    > Now, via Famo.us-Angular, you can tap into that performance with AngularJS, too. How, I tried this using Angular and i cannot get it to work. Any sample available on github?
- malandrew 12y ago
  Think of famous (in its current form) like UIKit for the web. There is a layer that is very CoreAnimation-like but there are also several common controls/widgets, with the possibility of growing into an entire ecosystem (like CocoaControls[0]). That being said, that is the state of famous today, but the long-term vision and plans are much more ambitious. At the end of the day, javascript has a single event loop, and any module/package you use that does not respect that single event loop as the commons can threaten the user experience of any app. What we're pushing for is not only a decent framework, but an entire ecosystem of libraries and tooling to make it easy to build high quality libraries that not only doesn't jeopardize the user experience, but actually makes it far easier for developers of all levels to make high quality (performance, affordances, etc) applications that delight the user. [0] https://www.cocoacontrols.com/ https://www.cocoacontrols.com/ disclaimer: I work at famous.
_zen 12y ago
I know Famo.us is pitched at app building, but how about websites? Would Famo.us-Angular be worth it for making a landing page with cool animations, or should I just stick with the simpler animate.css because it's good enough?
- dgraunke 12y ago
  Another Thomas Street dev here. I'm already using famous-angular on some client projects that are just that — animation-heavy desktop sites. It's awesome. The API for working with 3D and animations/transitions is so much nicer than straight HTML+CSS. And I love having a render loop that's about 100x better tuned than I could come up with in the time available.
  - chalettu 12y ago
    Hi dgraunke. I am working on some projects and really anxious to try out famous-angular integration. Do yall have any alphas or betas of your angular integration js available yet? I'd be more than happy to be a tester for it.
    - dgraunke 12y ago
      Hey there. Shoot me an email at david (at) thomasstreet (dot) com.
  - cfulnecky 12y ago
    Looking forward to May 19th, 2014 to put famous-angular through it's paces.
- malandrew 12y ago
  You can far beyond what is possible with animate.css and building a website is certainly a possibility. That being said, the current focus is getting everything rock solid across all mobile devices, so desktop support should be considered beta level for now. Adopting famous for mobile devices (phones and tablets) is a no brainer if you're trying to creating anything even remotely resembling a native iOS or Android app. The two reasons for this is that famous is basically the only thing currently really capable of building something comparable without requiring you to be a javascript performance expert, and because the browser situation is fairly homogenous in the mobile world (i.e. no significant portion of old browsers to cater to). For desktop browsers, I would adopt famous now if you're trying to create a very app-y experience, but if most of what you're building is a traditional website, you should definitely take a progressive enhancement approach to incorporating famous. disclaimer: I work at famous.
lommaj 12y ago
I wish I could look at this on github.

19 points by zackbrown 12y ago

mbell 12y ago

Yesterday I came across famo.us and spent a good 20 minutes between between their github page and their home page trying to figure out what it is. I still have no idea what it actually is. My best guess so far is some sort of frontend component framework that renders with WebGL but there was some talk in places of it covering the backend to, so is it like meteor + a front end library or something of the sort?

coderzach 12y ago
Rather than use the browsers layout engine, they created their own. It uses a css3d hack to promote everything to compositor layers, and then performs layout itself using css matrix transforms. It also has a physics engine, so you can do physics based interfaces. Here's an explanation of GPU compositor layers: http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome http://www.chromium.org/developers/design-documents/gpu-acce...
zackbrown 12y ago
Yes, it's a front-end framework. One of the coolest thing about it is its mobile rendering performance (write one JS app, deploy everywhere with awesome performance across devices and browsers.) Now, via Famo.us-Angular, you can tap into that performance with AngularJS, too.
- mbell 12y ago
  > One of the coolest thing about it is its mobile rendering performance (write one JS app, deploy everywhere with awesome performance across devices and browsers.) Again...WTF does that even mean? So they only use CSS3 transforms that are GPU accelerated? So it's a CSS3 animation library? The vague documentation seems to imply a grander vision which is unclear.
  - zackbrown 12y ago
    > Again...WTF does that even mean? So they only use CSS3 transforms that are GPU accelerated? So it's a CSS3 animation library? The vague documentation seems to imply a grander vision which is unclear. The core of Famo.us is a rendering engine. Instead of using the DOM to represent its UI hierarchy or using the browser to render that hierarchical DOM to screen, it uses an internal scene graph representation and handles the rendering of the scene graph to screen through an abstracted output layer. The browser DOM is just one of its supported outputs; another is WebGL, and there's no reason there couldn't be other outputs, outside of the browser--I think this extensibility is part of the 'grander vision.' The scene graph is a very robust graphics model, so it would be a great choice for a model if someone were to reinvent HTML from scratch today. Again, 'grander vision,' maybe. In the case of rendering to the browser, the way it works is by flattening and compositing its scene graph, creating a DOM node for each 'Surface' (which is a leaf node of the Famo.us scene graph) and handling the 3-space (or really, 2.5-space) positioning with CSS3 Matrix3D transforms, which are GPU accelerated. Since the DOM isn't needed for hierarchy (again, all of the calculations are handled by the engine) the Famo.us-outputted DOM is a simplified set of sibling nodes underneath a single parent (the Famo.us container,) and it continuously updates the Surfaces' DOM representations' Matrix3D properties (performantly, leveraging requestAnimationFrame) as the scene graph gets updated by the program running on the Famo.us engine. So that's pretty much what Famo.us is. Does that help? A slightly less technical, if more practical explanation might be about how you can "write one JS app [and] deploy everywhere with awesome performance across devices and browsers."
- ChefJames 12y ago
  > Now, via Famo.us-Angular, you can tap into that performance with AngularJS, too. How, I tried this using Angular and i cannot get it to work. Any sample available on github?
malandrew 12y ago
Think of famous (in its current form) like UIKit for the web. There is a layer that is very CoreAnimation-like but there are also several common controls/widgets, with the possibility of growing into an entire ecosystem (like CocoaControls[0]). That being said, that is the state of famous today, but the long-term vision and plans are much more ambitious. At the end of the day, javascript has a single event loop, and any module/package you use that does not respect that single event loop as the commons can threaten the user experience of any app. What we're pushing for is not only a decent framework, but an entire ecosystem of libraries and tooling to make it easy to build high quality libraries that not only doesn't jeopardize the user experience, but actually makes it far easier for developers of all levels to make high quality (performance, affordances, etc) applications that delight the user. [0] https://www.cocoacontrols.com/ https://www.cocoacontrols.com/ disclaimer: I work at famous.

_zen 12y ago

I know Famo.us is pitched at app building, but how about websites? Would Famo.us-Angular be worth it for making a landing page with cool animations, or should I just stick with the simpler animate.css because it's good enough?

dgraunke 12y ago
Another Thomas Street dev here. I'm already using famous-angular on some client projects that are just that — animation-heavy desktop sites. It's awesome. The API for working with 3D and animations/transitions is so much nicer than straight HTML+CSS. And I love having a render loop that's about 100x better tuned than I could come up with in the time available.
- chalettu 12y ago
  Hi dgraunke. I am working on some projects and really anxious to try out famous-angular integration. Do yall have any alphas or betas of your angular integration js available yet? I'd be more than happy to be a tester for it.
  - dgraunke 12y ago
    Hey there. Shoot me an email at david (at) thomasstreet (dot) com.
- cfulnecky 12y ago
  Looking forward to May 19th, 2014 to put famous-angular through it's paces.
malandrew 12y ago
You can far beyond what is possible with animate.css and building a website is certainly a possibility. That being said, the current focus is getting everything rock solid across all mobile devices, so desktop support should be considered beta level for now. Adopting famous for mobile devices (phones and tablets) is a no brainer if you're trying to creating anything even remotely resembling a native iOS or Android app. The two reasons for this is that famous is basically the only thing currently really capable of building something comparable without requiring you to be a javascript performance expert, and because the browser situation is fairly homogenous in the mobile world (i.e. no significant portion of old browsers to cater to). For desktop browsers, I would adopt famous now if you're trying to create a very app-y experience, but if most of what you're building is a traditional website, you should definitely take a progressive enhancement approach to incorporating famous. disclaimer: I work at famous.

lommaj 12y ago

I wish I could look at this on github.