Scroll, scroll, scroll your note gently down the screen. Merrily, merrily, merrily, merrily, FB's code's a dream

Open-source Sections added to Facebook's Litho UI

App design, scroll list

Android developers looking for a way to write more maintainable apps with highly optimized scrolling lists may want to take a look at Sections, a Java-based data structuring API from Facebook.

The social network happens to worry quite a bit about scrollable lists, because making them perform well, without janky movement, can be tricky, particularly given the underpowered phones among the billion or so peeps using its Android app.

Earlier this year, the company open-sourced Litho, a declarative Java framework for rendering Android user interfaces. Litho, which takes advantage of Facebook's Yoga layout engine, lets developers declare how they want layouts to look using immutable inputs and then handles the code generation.

Declarative code involves specifying what you want rather than how you want it done through a defined control flow. Facebook appears to have a fondness for declarative UI frameworks. Two years ago, it released something similar for iOS called ComponentKit.

When using scrollable lists in an Android RecyclerView, explains Facebook software engineer Mihaela Ogrezeanu in a blog post today, keeping the adapters – which generate views from data – synchronized with the underlying data can require a lot of manual index handling and lead to code that's difficult to maintain.

Enter Sections, a framework for managing data in conjunction with Litho components.

"Sections uses the same declarative data model as Litho and transparently handles things like calculating minimal sets of changes for data updates and doing granular UI refreshes," said Ogrezeanu.

Changing as little data as possible when a user is scrolling through a list on an app allows for better performance. Sections manages this through data diffing – ignoring parts of the data structure that have not been updated.

"The framework will skip recreating the portion of the tree that doesn't change, such as the subtree for the header, saving a lot of time on layout and render operations," said Ogrezeanu.

When Facebook rewrote the Comments list in Facebook for Android to replace the RecyclerView and Views implementation with Sections and Litho, it saw a 42 per cent improvement in scroll performance.

We should all be so lucky. ®


Biting the hand that feeds IT © 1998–2017