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
72
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
110
Migrate to Gradle version catalog and convention plugins
tatocaster
2
1.6k
Make Codebases Secure with OWASP
tatocaster
0
150
Secure Coding Standards
tatocaster
0
120
ტანგო ანდროიდთან
tatocaster
0
140
Adopting Huawei Mobile Services
tatocaster
0
35
Android UI Testing & Challenges
tatocaster
0
54
Reverse & Inject - droidcon
tatocaster
3
190
mobile DevOps
tatocaster
1
77
Other Decks in Programming
See All in Programming
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
220
Ruby製社内ツールのGo移行
bgpat
2
330
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
10
5.6k
Git Rebase
bkuhlmann
11
1.6k
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
280
PostmanでAPIの動作確認が楽になった話
h455h1
0
130
[SF Ruby, March 2024] Rails on Wasm
palkan
0
380
Designing for tomorrow's programming workflows
honnibal
PRO
2
110
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
430
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
How to train your dragon (web standard)
notwaldorf
72
5.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
11
4.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
Optimizing for Happiness
mojombo
370
69k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Designing with Data
zakiwarfel
95
4.8k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
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