Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Facebook Litho
Search
Merab Tato Kutalia
May 04, 2017
Programming
2
77
Facebook Litho
Droid Up 7.0 , 2017 talk about Facebook Litho
Merab Tato Kutalia
May 04, 2017
Tweet
Share
More Decks by Merab Tato Kutalia
See All by Merab Tato Kutalia
What's new in Android 14?
tatocaster
0
130
Migrate to Gradle version catalog and convention plugins
tatocaster
3
1.7k
Make Codebases Secure with OWASP
tatocaster
0
180
Secure Coding Standards
tatocaster
0
130
ტანგო ანდროიდთან
tatocaster
0
190
Adopting Huawei Mobile Services
tatocaster
0
48
Android UI Testing & Challenges
tatocaster
1
68
Reverse & Inject - droidcon
tatocaster
3
250
mobile DevOps
tatocaster
1
83
Other Decks in Programming
See All in Programming
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
140
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
Jakarta EE meets AI
ivargrimstad
0
110
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.7k
Arm移行タイムアタック
qnighy
0
330
CSC509 Lecture 09
javiergs
PRO
0
140
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Navigating Team Friction
lara
183
14k
Statistics for Hackers
jakevdp
796
220k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Designing Experiences People Love
moore
138
23k
Designing for humans not robots
tammielis
250
25k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Transcript
Facebook Litho A declarative UI framework for Android
Tato Kutalia tatocaster tatocaster.me github.com/tatocaster twitter.com/@tatokutalia
Litho’s History
Litho’s History iOS Platform, now known as Texture(Pinterest).
Litho Appeared @ Facebook F8 primarily built to implement complex
scrollable UIs based on RecyclerView.
Litho - View flattening - Declarative - AsyncLayout - Recycling
- Good Debugging Tools a declarative framework for building efficient UIs
Litho uses Yoga, also by Facebook cross-platform layout engine Everything
is a component immutable inputs knowns as Props React Terminology
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.
Litho Recycler
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); }
Litho Custom View
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'
Litho Summary and Demo