Facebook Litho – Improve UI performance

Neeraj Sharma

13 December 2023

Litho is a library for UI performance improvement provided by the big tech giant Facebook.

Why do we use Litho?

-> 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.

With code generation, Litho can perform optimizations for your UI under the hood, while keeping your code simple and easy to maintain.

-> Asynchronous layout:- Litho can measure and layout your UI ahead of time without blocking the UI thread.

By decoupling its layout system from the traditional Android View system, Litho can drop the UI thread constraint imposed by Android so your app UI performance automatically improves.

-> Flatter view hierarchies:- Litho uses Yoga for layout and automatically reduces the number of ViewGroups that your UI contains.

This, in addition to Litho’s text optimizations, allows for much smaller view hierarchies and improves both memory and scroll performance as it will fast render on screen.

-> Fine-grained recycling:- With Litho, each UI item such as text, image, or video is recycled individually.

As soon as an item goes off-screen, it can be reused anywhere in the UI and pieced together with other items to create new UI elements.

Such recycling reduces the need for having multiple view types and improves memory usage and scroll performance.

Adding Litho to Your Project

repositories {
  jcenter()
}

repositories {

jcenter()

}

Then add the dependencies like this:

dependencies {
  // ...
  // Litho
  implementation 'com.facebook.litho:litho-core:0.38.0'
  implementation 'com.facebook.litho:litho-widget:0.38.0'

  annotationProcessor 'com.facebook.litho:litho-processor:0.38.0'

  // SoLoader
  implementation 'com.facebook.soloader:soloader:0.9.0'

  // For integration with Fresco
  implementation 'com.facebook.litho:litho-fresco:0.38.0'

  // For testing
  testImplementation 'com.facebook.litho:litho-testing:0.38.0'
<span class="c1">// Sections</span>
  <span class="n">implementation</span> <span class="s1">'com.facebook.litho:litho-sections-core:0.38.0'</span>
  <span class="n">implementation</span> <span class="s1">'com.facebook.litho:litho-sections-widget:0.38.0'</span>
  <span class="n">compileOnly</span> <span class="s1">'com.facebook.litho:litho-sections-annotations:0.38.0'</span>

  <span class="n">annotationProcessor</span> <span class="s1">'com.facebook.litho:litho-sections-processor:0.38.0'</span>}

dependencies {

// ...

// Litho

implementation 'com.facebook.litho:litho-core:0.38.0'

implementation 'com.facebook.litho:litho-widget:0.38.0'

annotationProcessor 'com.facebook.litho:litho-processor:0.38.0'

// SoLoader

implementation 'com.facebook.soloader:soloader:0.9.0'

// For integration with Fresco

implementation 'com.facebook.litho:litho-fresco:0.38.0'

// For testing

testImplementation 'com.facebook.litho:litho-testing:0.38.0'

// Sections

implementation 'com.facebook.litho:litho-sections-core:0.38.0'

implementation 'com.facebook.litho:litho-sections-widget:0.38.0'

compileOnly 'com.facebook.litho:litho-sections-annotations:0.38.0'

annotationProcessor 'com.facebook.litho:litho-sections-processor:0.38.0'}

1. Hello World

In this initial step, you’ll display a view with “Hello World!”.

First, initialize SoLoader in your Application class:

public class SampleApplication extends Application {

  @Override
  public void onCreate() {
    super.onCreate();

    SoLoader.init(this, false);
  }
}

public class SampleApplication extends Application {

@Override

public void onCreate() {

super.onCreate();

SoLoader.init(this, false);

}

Behind the scenes, Litho uses Yoga for layout. Yoga has native dependencies and SoLoader is brought in to take care of loading those. Initializing SoLoader here ensures that you’re not referencing unloaded libraries later on.

Next, add a predefined Text Litho component to an activity:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    final ComponentContext c = new ComponentContext(this);

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

    setContentView(LithoView.create(c, component));
}

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

final ComponentContext c = new ComponentContext(this);

final Component component = Text.create(c)

.text("Hello World")

.textSizeDip(50)

.build();

setContentView(LithoView.create(c, component));

}

LithoView is an Android ViewGroup that can render components; it is the bridge between Litho components and Android Views. The example sets the content for the activity to a LithoView that displays a Text component.

How do the components come into play? Let’s zero in on this piece of code:

Text.create(c)
    .text("Hello World")
    .textSizeDip(50)
    .build();

Text.create(c)

.text("Hello World")

.textSizeDip(50)

.build();

Reference – https://fblitho.com/

Mobikul blog – https://mobikul.com/blog/

Thank You