No xml with litho & React Concept

litho adalah declarative UI framework yang dikembangkan oleh facebook. alasan dikembangkannya adalah untuk mengoptimasi writing android view dengan simple fungsional API. ingin menawarkan konsep component yg ada dalam react native kedalam native code dengan immutable input props sebagai variable untuk mengubah atau set data di view.

litho menggunakan yoga sebagai layout building nya. dengan yogadapat mengurangi view group hirarki yang terlalu dalam, yang membuat layout menjadi lebih berat untuk di render.

Beberapa keunggulan yang ditawarkan antara lain, Asynchronous rendering layout yang lebih efficient tanpan mengganggu UI Threat, menggunakan konsep component yang membuat lebih efisient dan re useable karena dapat digunakan di view mana saja.

  1. Component
    Component adalah class yang digunakan untuk menampilkan UI. terdiri dari 2 component Spect : Layout Spect (yang dapat menggabungkan beberapa komponen) dan Mount Spect (render view atau drawable)
@LayoutSpec
class MyComponentSpec {

@OnCreateLayout
static Component onCreateLayout(
ComponentContext c,
@Prop String title,
@Prop Uri imageUri) {
...
}
}
  1. Props

Immutable input yang digunakan sebagai parameter di dalam Component.

@LayoutSpec
class ItemListSpec {
companion object {
@JvmStatic
@OnCreateLayout
fun onCreateLayout(c: ComponentContext,
@Prop username:String,
@Prop realname:String,
@Prop urlImage:String
): Component {
. . .
}
}
}

2. State
berfungsi sebagai pengantur kondisi tertentu yg dapat mempengaruhi view di dalam component. Misal dalam component terdapat checkbok. state berfungsi mengatur kondisi check atau uncheck pada checkbok tersebut.

@LayoutSpec
public class CheckboxSpec {

@OnCreateLayout
static Component onCreateLayout(
ComponentContext c,
@State boolean isChecked) {

return Column.create(c)
.child(Image.create(c)
.drawableRes(isChecked
? R.drawable.is_checked
: R.drawable.is_unchecked))
.child(Text.create(c)
.text("Submit")
.clickHandler(Checkbox.onClickedText(c))
.build;
}

@OnEvent(ClickEvent.class)
static void onClickedText(
ComponentContext c,
@State boolean isChecked) {
...
}
}

3. Layout 
Layout di litho menggunakan yoga implementasi dari Flexbox css untuk menyusun komponen komponen yang ada di dalam nya. Jadi seperti ViewGroup yang ada dalam android untuk menyusun beberapa view di dalamnya. Ada 2 basic Row dan Column, Row menyerupai horizontal Linear Layout di android

Row.create(c)
.child(
SolidColor.create(c)
.color(RED)
.flexGrow(1))
.child(
SolidColor.create(c)
.color(BLUE)
.flexGrow(1))
.build();

Sedangkan Colomn menyerupai Vertical Linear Layout di android

Row.create(c)
.child(
SolidColor.create(c)
.color(RED)
.flexGrow(1))
.child(
SolidColor.create(c)
.color(BLUE)
.flexGrow(1))
.build();
lebih lengkapnya bisa ada di dokumentasi berikut

Untuk membuat List View ada 2 cara menggunakan 
RecyclerCollectionComponent

@OnCreateLayout
static Component onCreateLayout(
final ComponentContext c) {
return RecyclerCollectionComponent.create(c)
.section(createSection())
.build()
}

atau bisa jua menggunakan RecyclerComponent. untuk namampilkan data dari server dan update data ke list yang lebih dinamis biasanya menggunakan RecyclerComponent

val recyclerBinder by lazy {
RecyclerBinder.Builder()
.layoutInfo(LinearLayoutInfo(LinearLayoutManager(this)))
.build(context)
}
val recyclerComponent by lazy {
Recycler.create(context)
.binder(recyclerBinder)
.build()
}
Berikut adalah contoh penggunaan RecyclerComponent untuk menampilkan data user dari server. here