Facebook Litho

Introduced during the Facebook Developer Conference F8 . http://fblitho.com/

Before the Android framework, there was an iOS framework called AsyncDisplayKit, now it’s known as a Texture. It has almost same key features as Litho and became popular in a short time.

Can Litho gain popularity?

Let’s see what’s in the box

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.

sounds cool.

Let’s include Litho in our projects and have a quick look of pros and cons.

At this moment Litho is 0.2.0 version, and you *should not* use it, in production app.

Install:

app.gradle

you can exclude the last library, but Litho has a great support with the Stetho library, also from Facebook. If you are not familiar with it, go check it.

Litho uses a bunch of dependencies such as a SoLoader(Native Code Loader from Facebook), annotation processors and etc.

Hello World!

and in the activity goes :

That’s it!

Litho uses Yoga, as mentioned above, so most method names derived from it.

Lets dive deeper

Everything is a Component.

Core Elements:

Layout Specs

Props

States

MountSpecs

imagine LayoutSpec as a classic ViewGroup on Android’s Layout system. “It simply groups existing components together in an immutable layout tree.”

Prop , The name established by React and shortly they are the inputs that a Component takes are known as props.

We will not cover every component of Litho, but you can read it all at its beautiful documentation here.

Define our LayoutSpec and Prop

Keep in mind, we write `ListItem.create` instead of `ListItemSpec`. Annotation processors generate classes and all the methods we need to use. NAMESpec is a naming convention and invoke with NAME.create(componentContext)

reusable and easy.

Litho uses Yoga which is an implementation of Flexbox to measure and layout components on screen. If you have used Flexbox on the web before this should be very familiar.

In Litho you can use a Row to achieve a similar layout to a horizontal LinearLayout .

Row.create(c)

.child(...)

.child(...)

.build();

Or a Column to achieve a similar layout to a vertical LinearLayout .

Column.create(c)

.child(...)

.child(...)

.build();

OK, now add the onClick listener to the whole layout.

just add those lines

Thats It! we have a simple layout with a different components, fully reusable and customizable. Great! Builder pattern at its best! :)

Plus it comes with the great debugging tools support, and we will discuss about this, in the Part 2.

Before

After

P.S. view flattening is awesome.

Question

what if, I want to build whole layout and not the components alone? well you should create MainActivitySpec layout and append all components as a child.

Summary

Litho looks like a complicated one, because, mostly we, Android developers are not familiar with the chained methods to generate complex layouts. In classic Android we choose XML way or Java(compound/custom views or just create view widgets as an objects).

At this moment it’s not ready to use in production. You can not find best practices, good documentation and etc to start with it. The main idea of this post was to make a bridge to Litho. In the next episode will be deeper review and building more complex layouts.

Litho is not the best solution to completely remove the usage of classic XML layout, but a very good substitute to a dynamically generated views or complex layouts, because of its declarative api and reusable nature. So, As I see, the best way to use Litho in project is to mix XML and Litho together. Parts which includes complex layouts or is performance oriented and it takes too much time to do a custom view, go for Litho.

Edit:

Some questions were about, if Litho could fully replace classic XML inflate.

Just do not look at Litho as a full replacement for XML.

Everything is a component, so it gives an advantage to create custom components and use in every layout as a child with a 1 method.

From this perspective Litho has a very good opportunity to gain popularity as an AsyncDisplayKit did before.

Thanks!

Part 2 will be ready soon.