Facebook Litho

Droid Up 7.0 , 2017 talk about Facebook Litho

Transcript

1. Facebook Litho A declarative UI framework for Android
2. Tato Kutalia tatocaster tatocaster.me github.com/tatocaster twitter.com/@tatokutalia
3. Litho’s History
4. Litho’s History iOS Platform, now known as Texture(Pinterest).
5. Litho Appeared @ Facebook F8 primarily built to implement complex scrollable UIs based on RecyclerView.
6. Litho - View flattening - Declarative - AsyncLayout - Recycling - Good Debugging Tools a declarative framework for building efficient UIs
7. Litho uses Yoga, also by Facebook cross-platform layout engine Everything is a component immutable inputs knowns as Props React Terminology
8. Litho Core Elements State Props LayoutSpec - groups existing components together in an immutable layout tree. MountSpec - defines a component that can render views or drawables.
9. Litho Recycler
10. Litho Touch and Click @LayoutSpec class ListItemSpec { @OnCreateLayout static ComponentLayout onCreateLayout( ComponentContext c, @Prop(optional = true, resType = ResType.DIMEN_OFFSET) int shadowRadius, @Prop int color, @Prop String title, @Prop String subtitle) { return Column.create(c) .paddingDip(ALL, 16) .backgroundColor(color) .child( Text.create(c) .text(title) .textSizeSp(40)) .child( Text.create(c) .text(subtitle) .textStyle(ITALIC) .textSizeSp(20)) .clickHandler(ListItem.onClick(c)) .build(); } @OnEvent(ClickEvent.class) static void onClick(ComponentContext c, @FromEvent View view, @Prop OnListItemClickListener listener) { listener.onListItemClick(view); }
11. Litho Custom View
12. Litho Install // Litho compile 'com.facebook.litho:litho-core:0.2.0' compile 'com.facebook.litho:litho-widget:0.2.0' provided 'com.facebook.litho:litho-annotations:0.2.0' annotationProcessor 'com.facebook.litho:litho-processor:0.2.0' // SoLoader compile 'com.facebook.soloader:soloader:0.2.0' // Optional // For debugging debugCompile 'com.facebook.litho:litho-stetho:0.2.0' //stetho itself compile 'com.facebook.stetho:stetho:1.5.0'
13. Litho Summary and Demo