2. Sample Application - Intialisation

Litho is quite well optimised for list data and can have better performance when you display many data and complex layout on the screen. Of course, you can do simple screen like Hello word but Litho is more powerful when we use it for large dataset and complex UI.
Big win of Litho is that it measure size and calculate positions and ready to draw in a background and job in UI thread becomes much simpler and lighter than typical Android View.
Here we are going to build a simple app to display news feed list using Litho Section API and learn how to use Litho for list step by step.

Let' create single screen to display favourite Marble Characters.

Litho generates boiler plate code by using annotations. So It's key point to understand what code Litho will generate and how it works underneath to get familiar to this library.

Soloader Initialisation

Litho uses Yoga library internally to measure layout and positions of view elements. So, we need to inform Litho to initialise Yoga library.

import android.app.Application  
import com.facebook.soloader.SoLoader  

class CharactersApp: Application() {  
    override fun onCreate() {  
        super.onCreate()
        SoLoader.init(this, false)  
    }  
}

Don't forget to add Application class to AndroidManifest.xml.
AndroidManifest.xml

<application  
  android:name=".CharactersApp"  
  ...
  android:theme="@style/AppTheme">  
 ...
 </application>  
</manifest>

HeroesComponentSpec

Second, we need to create GroupSectionSpec presents RecyclerView item(s).

@GroupSectionSpec  
object HeroesComponentSpec {  
    @OnCreateChildren  
    fun onCreateChildren(c: SectionContext): Children { 
        val builder: Children.Builder = Children.create()  
        //TODO. create Children
        return builder.build()
    }
}

This is basic code of GroupSectionSpec. According to Facebook's naming convention Litho components are recommended to Name+ComponentSpec for Litho component.
@GroupSectionSpec indicates this component is for item(s) in a list.
@OnCreateChildren let Litho how to draw list item(s). SectionContext is must parameter for this annotation function. This function should return Children instance. We are going to use Children.Builder to create Children instance. We will implement TODO block later on and let's see how to use this GroupSection in Activity.

Before code MainActivity, rebuild the project from Build > Rebuild Project. Litho in actively progress of implementing Kotlin support and Litho code generation doesn't work very smoothly. Litho will generate RecyclerCollectionComponent class from RecyclerCollectionComponentSpec having all the boiler plate code.
It's Litho's name rule to generate AComponent class from AComponentSpec class. We will use the generated RecyclerCollectionComponent instead of RecyclerCollectionComponentSpec.

class MainActivity : AppCompatActivity() {  
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  

        val c = ComponentContext(this@MainActivity)  
        val component = RecyclerCollectionComponent.create(c)  
            .section(CharactersComponent.create(SectionContext(c)).build())  
                .build()  
        setContentView(LithoView.create(c, component))  
    }  
}

Create a ComponentContext.
Create a RecyclerCollectionComponent.
Create a CharactersComponent and add section to RecyclerCollectionComponent.
Create a LithoView passing the component created in the previous step and setContentView

It would be nice idea to use extension function to avoid boilerplate code when you have code to create a section in many different places.

val Activity.sectionContext: SectionContext
    get() = SectionContext(this)

val Fragment.sectionContext: SectionContext
    get() = SectionContext(this.context)


fun Activity.createSection(creation: (SectionContext) -> Section) {
    val sc = sectionContext
    val component = RecyclerCollectionComponent.create(sc)
            .section(creation(sc))
            .build()
    setContentView(LithoView.create(sc, component))
}

fun Fragment.crateSection(creation: (SectionContext) -> Section): LithoView {
    val sc = sectionContext
    val component = RecyclerCollectionComponent.create(sc)
            .section(creation(sc))
            .build()
    return LithoView.create(sc, component)
}

Now, your Activity code becomes cleaner.

class MainActivity : AppCompatActivity() {  

    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)
        createSection { sc -> HeroesComponent.create(sc).build() }
  }  
}

In the next posting, let's implement onCreateChildren function in CharactersComponentSpec.