Facebook Open Sources Litho Android UI Framework
Written by Mike James   
Thursday, 20 April 2017

Facebook's F8 conference often seems more like a place to announce its future directions than anything directly relevant to developers, but Litho should be of interest to any Android programmer. 

litho1

 

Facebook has a number of important Android apps and it has the resources to invest in the basic infrastructure. Last year it announced that it was creating a new Android UI framework. Now this has been released as Litho, which is open source.

The main reason for implementing it is to improve the efficiency of scrolling interfaces: 

We've started using this framework across many surfaces in our Android apps, including Facebook, Messenger, Facebook Lite, and Workplace, and have seen an improvement in scroll performance of up to 35 percent.

It is described as "declarative", but it isn't in the usual sense of the term. Instead UI components are constructed using method calls in a fluent style. For example:

 final Component component = Text.create(context)
        .text("Hello World")
        .textSizeDip(50)
        .build();

The resulting objects are final, and hence immutable, so they can be safely passed between threads.

"Litho is designed to be faster and more efficient when working with scrolling surfaces. It aims to improve performance by moving the heavy work to a background thread and spreading the rendering work across multiple frames.

By using the React declarative model and the Yoga layout system, Litho is able to decouple the layout operations from Android views. This allows us to move the CPU-intensive measure and layout operations to the background thread, saving milliseconds." 

The second claim in the press release is more difficult to understand:

Finally, Litho breaks down complex views into smaller pieces such as text, images, and videos, and renders them incrementally, spreading the work that needs to be done across multiple frames. It also recycles those smaller pieces and can recombine them in a virtually infinite number of ways, reducing the total number of views that need to be created and stored in memory.

This suggests that Litho makes use of the standard View objects and allows the Android system to do the rendering. What it seems to do is organize these lower level View components into a UI layout 

The GitHub repo readme makes simpler claims: 

  • Declarative: Litho uses a declarative API to define UI components. You simply describe the layout for your UI based on a set of immutable inputs and the framework takes care of the rest.
  • Asynchronous layout: Litho can measure and layout your UI ahead of time without blocking the UI thread.
  • View flattening: Litho uses Yoga for layout and automatically reduces the number of ViewGroups that your UI contains.
  • Fine-grained recycling: Any component such as a text or image can be recycled and reused anywhere in the UI.

Using Litho is fairly easy and you can use it in conjunction with Android Studio, but of course you can't make use of the Designer to drag-and-drop your layout and you can forget all you know about XML layouts because using Litho is all code. You also won't be able to take advantage of Google's latest layout container, ConstraintLayout ,but this might be no bad thing. Some times simpler is best.

Here is a sample helloworld from the GitHub readme:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    final ComponentContext context = 
         new ComponentContext(this);
    final Component component = 
                   Text.create(context)
        .text("Hello World")
        .textSizeDip(50)
        .build();
    setContentView(LithoView.create(context, 
                              component));
}

It is difficult to know if Litho will catch on. Even a 35% improvement in efficiency might not be worth it if you have to give up the standard Android approach and trust that Facebook will keep on supporting the project. 

litoicon

More Information

Open-sourcing Litho, a declarative UI framework for Android

https://github.com/facebook/litho

Related Articles

React 15.5 Gets Ready For Rewrite 

Android Adventures - Building The UI Constraint Layout In Android Studio 2.3 

Facebook Hacker Cup 2017 Kicks Off 

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

 

Banner


Julia 1.1 Adds Array Alternative
17/10/2024

Julia 1.1 has been released with improvements including a new Memory type that provides a lower-level container as an alternative to Array.



A Turing Machine In LEGO
06/10/2024

A Turing Machine is one of those abstract ideas that is much easier to undertand if you can see it working. Now there's a proposal on the LEGO Ideas site for a Working Turing Machine. Lend it your sup [ ... ]


More News

espbook

 

Comments




or email your comment to: comments@i-programmer.info

Last Updated ( Tuesday, 08 May 2018 )