Facebook open sources new tool to help Android devs build better UIs

Facebook has open sourced Sections, an API which provides a way of structuring data and translating it into Litho Components.

Video: Why should you learn a functional programming language?

As interfaces in Android applications get more elaborate, developers increasingly need software frameworks to keep these apps running smoothly on phones.

To that end, earlier this year, Facebook open sourced Litho, a declarative framework for efficient UI rendering on Android.

But while Litho improved app scrolling performance by up to 35%, developers were still faced with the challenge of having to write stateful, imperative code, which was difficult to maintain, to handle data flows into these UIs.

To address these maintainability issues, Facebook has today open sourced Sections, an API which provides a way of structuring data and translating it into Litho Components.

Adam Wolff is an engineering director at Facebook in charge of the front-end infrastructure group, explains the benefits of Sections.

"Litho is a great way to write your [Android] Views, a way to compose visual elements that you see in an Android app," he said.

"But what it doesn't really have is a way to handle the data that flows into these UIs. What you want is a declarative API.

"When it comes to showing your data, you want the same thing, you want to be able to declare how the data corresponds to the elements in your lists, and the new Sections API does exactly that. It gives you this declarative way of grouping these things up.

"That gives you two things: the code that you write is actually much simpler and less error prone. The other is that it can be highly efficient. Very few developers go through the pain of implementing their own RecyclerView adapter, which can be efficient about how to update things. In general, people just refresh all the data in their containers, whereas the Sections API can be really targeted and efficient about it.

"We're really excited about it. In some ways we think that Litho was incomplete without this Sections API."

After Facebook converted some highly used scrollable surfaces from a traditional RecyclerView and Views implementation to Sections and Litho, it saw significant performance improvements.

Converting the Comments surface in Facebook for Android to Sections resulted in a 42% scroll performance improvement.

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. As part of Litho, the Sections API shares the same main concepts such as annotation-based code generation, event handling, props, and state updates.

For easy integration with Litho, Sections provides a built-in Component, called RecyclerCollectionComponent, that can render a hierarchy of Sections. The Sections hierarchy becomes a data source for the RecyclerCollectionComponent, and the Components that render your data will become items in the RecyclerView adapter under the hood. All the complexity of handling operations on your adapter, such as inserts or removes, is hidden away and handled by the infrastructure.

To find out more about how to start using Sections visit here.

Image: photovibes, Getty Images/iStockphoto

Also see