Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at Leaff.it/ I really love famo.us framework and its amazing potential and if you're like me, and you want the web to win, please share some snippet of code for the community and grow faster with us
Categories
Meta
Famo.us Code | A look inside Rendering
546
post-template-default,single,single-post,postid-546,single-format-standard,ajax_updown_fade,page_not_loaded,,qode-theme-ver-6.2.1

A look inside Rendering

14 Jul A look inside Rendering

If you want to take control of rendered nodes, write a custom View with a render function. The Flipper class is a simple example (and the RenderController is a complex example of this pattern)

How Famo.us renders:

  1. Every RenderNode has a render function which creates a renderSpec.
  2. The renderSpec contains information about a Modifier or Surface.
    • The Modifier specs are used to calculate the final CSS properties.
    • The Surface specs are coupled to DOM elements.
  3. Every tick of the Engine, the renderSpec is rendered using the RenderNode.commit function.
  4. The commit function uses the ElementAllocator (from the Context) to allocate/deallocate DOM elements. (Which actually recycles DOM nodes to conserve memory).

Therefore: Just return the correct renderSpec in your custom View, and famo.us will manage memory and performance for you.

Notes:

  • You don’t need to use the View class – an object with a render function will suffice. The Viewclass simply adds events and options which is a nice way to create encapsulated, reusable components.
  • When a Surface element is allocated in the DOM, the “deploy” event is fired.
  • When a Surface element is deallocated, the “recall” event is fired.