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
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.2k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
160
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
280
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
5
650
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
620
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
160
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
22
9k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
590
すべてのコンテキストを、 ユーザー価値に変える
applism118
4
1.4k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
20250708_JAWS_opscdk
takuyay0ne
2
120
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
240
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Facilitating Awesome Meetings
lara
54
6.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
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