Famo.us

Low level technics.

by Oleg Slobodskoi

@oleg008

Engine.nextTick

 

 

Engine.nextTick allows to queue tasks to be executed by the next animation frame.

 

Entire framework uses it for rendering and animations.

 

requestAnimationFrame

  • Tries to call your function at 60FPS
  • Draws at the next available opportunity
  • Degrades frame rate based on load
  • May stop f.e. when window is unfocused

Layout

Layout calculation is expensive.

 

Avoid nesting

  • Step back from html semantics and relative positioning
  • Semantic structure doesn't make sense if elements are positioned absolutely
  • Overhead from positioning elements relatively is big
  • Use javascript layout system to position surfaces

Surface

  • Building block of the application
  • Container for dynamic areas
  • Has position: absolute
  • Is gpu accelerated
  • Javascript layout system for positioning
  • You animate surfaces

Avoid repaints

  • Use scale transformation for size animations.

  • Use translate transformation for position animations.

  • There is rotate, scale, skew, translate and those 3d versions

  • matrix/matrix3d can describe all of them, just faster  http://jsperf.com/css-matrix-vs-transform-primitives/13

  • Transform class provides a human abstraction for matrix3d

DOM

DOM is slow, but what can we do about it?

Virtual DOM

Don't touch it

  • Never read
  • Writes scheduled through animation frame
  • Stylesheets for static declarations only

Questions?

Famo.us - low level technics.

By Oleg Isonen

Famo.us - low level technics.

  • 3,111