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
84
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
160
Migrate to Gradle version catalog and convention plugins
tatocaster
3
1.8k
Make Codebases Secure with OWASP
tatocaster
0
190
Secure Coding Standards
tatocaster
0
140
ტანგო ანდროიდთან
tatocaster
0
240
Adopting Huawei Mobile Services
tatocaster
0
55
Android UI Testing & Challenges
tatocaster
1
96
Reverse & Inject - droidcon
tatocaster
3
290
mobile DevOps
tatocaster
1
120
Other Decks in Programming
See All in Programming
型で語るカタ
irof
0
700
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.5k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
990
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
200
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
960
Hack Claude Code with Claude Code
choplin
7
2.5k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Adopting Sorbet at Scale
ufuk
77
9.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Gamification - CAS2011
davidbonilla
81
5.4k
Automating Front-end Workflow
addyosmani
1370
200k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
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