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
170
Secure Coding Standards
tatocaster
0
130
ტანგო ანდროიდთან
tatocaster
0
180
Adopting Huawei Mobile Services
tatocaster
0
48
Android UI Testing & Challenges
tatocaster
1
68
Reverse & Inject - droidcon
tatocaster
3
240
mobile DevOps
tatocaster
1
83
Other Decks in Programming
See All in Programming
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
Identifying User Idenity
moro
6
7.9k
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.5k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
920
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
390
役立つログに取り組もう
irof
26
8.7k
Server Driven Compose With Firebase
skydoves
0
400
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Making Projects Easy
brettharned
115
5.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Documentation Writing (for coders)
carmenintech
65
4.4k
Done Done
chrislema
181
16k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Six Lessons from altMBA
skipperchong
26
3.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
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