Battery Life

The Famo.us core platform has been carefully optimized for creating applications that can achieve native-like performance when animating elements. And tools like Cordova make it simple to port your Famo.us web application to native platforms.

Yet, despite these optimizations, mobile devices are still succeptible to battery-drain, so it’s important to keep some rules of thumb in mind when targeting them.

Famo.us: A work in progress

The first thing to remember is that although Famo.us has been optimized to solve many of the performance problems with HTML5, it is still a work in progress, and there are still many performance optimization gains to be had. The core Famo.us engineering team is continually working to make Famo.us more efficient, and thereby save battery life for your users. Contributions are welcome!

(Battery) Life-Preserving Tips

Here are a few rules of thumb to keep in mind when optimizing your Famo.us application for long battery life:

Don’t overburden the .render() or .commit() method. The .render() method and the .commit() method, often used to create responsive layouts, are executed on every single frame. The more logic these methods contain, the more work that will be for the device’s CPU, which translates to faster drain of the battery. The thinner you keep them, the better.
Add checks and caching to avoid unneeded recalculations. You can unload a lot of the burden on the processer by writing functions such that calculations only happen when they really need to. Consider caching values (rather than recalculating them every time), or checking to see whether a full layout reflow is really needed. Your users’ devices will thank you!
Avoid creating a deep scene graph. The deeper your render tree gets, the more work the engine must do when rendering your application. (The engine traverses the full tree every single frame.) Only add new render nodes if you have to — really consider which elements need their own render nodes. Ask yourself whether a group of sub-elements can be written as HTML within a surface.
Don’t use modifiers excessively. Instances of Modifier incur extra work on the part of the engine. It won’t make a difference if you use only a few, but using many can reduce performance. If you find yourself using a lot of modifiers, consider refactoring your application to use lower-level methods. Remember that modifiers are really just wrappers over simple objects. You could insert these into the render tree directly, avoiding the overhead of all the modifier’s wrapping logic.

Next: Building your app to run natively »