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
Declarative UI 도입을 향한 여정
Search
Yun Seungyong
September 22, 2020
Programming
0
150
Declarative UI 도입을 향한 여정
* DroidKnight 2020 발표 자료입니다.
Yun Seungyong
September 22, 2020
Tweet
Share
More Decks by Yun Seungyong
See All by Yun Seungyong
Android개발을 더 잘 하려면? (MVVM, MVP, Clean Architecture)
devyunsy
0
30
Dependency Injection with Dagger2 for Android
devyunsy
0
29
Other Decks in Programming
See All in Programming
Data-Centric Kaggle
isax1015
2
780
Oxlint JS plugins
kazupon
1
980
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2k
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
460
そのAIレビュー、レビューしてますか? / Are you reviewing those AI reviews?
rkaga
6
4.6k
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
180
並行開発のためのコードレビュー
miyukiw
0
290
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
haochenx
0
140
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
600
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
mulyu
3
380
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
250
Featured
See All Featured
Music & Morning Musume
bryan
47
7.1k
Accessibility Awareness
sabderemane
0
53
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
410
The Cult of Friendly URLs
andyhume
79
6.8k
The Invisible Side of Design
smashingmag
302
51k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
AI: The stuff that nobody shows you
jnunemaker
PRO
2
270
The Mindset for Success: Future Career Progression
greggifford
PRO
0
240
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
920
Being A Developer After 40
akosma
91
590k
The agentic SEO stack - context over prompts
schlessera
0
640
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.6k
Transcript
Speaker l Declarative UI 도입을 향한 여정 윤승용
None
Declarative UI ?
Declarative programming যڃ Ѿҗ ܳ ਗೞח Declarative UI 란?
Declarative UI programming যڃ UI ܳ ਗೞח Declarative UI 란?
UI = f(state) যڃ UI ܳ ਗೞח Declarative UI 란?
→ Container View A View B View C Container
Imperative UI 방식 Container View A View B
Imperative UI 방식 Container View A View B
Imperative UI 방식 Container View A View B
Container Container Imperative UI 방식
Imperative UI 방식 Container View C
View C Imperative UI 방식 Container View C
Imperative UI 방식 Container View C
Declarative UI 방식 Container View A View B
Declarative UI 방식 Container View A View B Container View
C
Imperative UI Declarative UI
Declarative UI 의 장점 적은 코드량 UI상태에만 집중 재사용성 업무
효율성
Diffing Rendering Etc..
Declarative UI framework/library
Declarative UI framework/library
2013 2017 2019 2014 Declarative UI framework/library
스쉐는 왜 Declarative UI 를 도입했을까?
Once upon a time UI 모듈화
None
None
✌Component✌
None
None
Trending User Product Like Related Catalogs Style Related Products Category
Trending Products
효율성 = 재사용성
효율성 = UI 모듈화
UI 모듈화
UI 모듈화
HorizontalList UI 모듈화
UI 모듈화
StyleCard Featured Keyword UI 모듈화
UI 모듈화
UI 모듈화
None
Android에서 구현?
Recycler View
Recycler View Adapter
Recycler View Adapter ViewType ViewHolder
Adapter ViewType RecyclerView ViewHolder
Vertical ↓
Horizontal→ Horizontal→ Vertical ↓
적은 코드량 UI상태에만 집중 재사용성 효율성
None
Declarative UI Tool 을 찾아서..
Jetpack Compose Litho Epoxy
NumberModel
1. 컴포넌트 정의 2. 컴포넌트를 활용한 화면 구성
Section Header 1. 컴포넌트 정의
Section Header 1. 컴포넌트 정의 - Title
Section Header 1. 컴포넌트 정의 - Title Item
Section Header 1. 컴포넌트 정의 - Title Item - Title
- TitleSize - backgroundColor
1. Declarative UI의 장점을 얻을 수 있는가? 2. 기존 프로젝트에
도입하기 쉬운가? 3. 학습 곡선이 낮은가?
Jetpack Compose
None
@Composable + functions
None
@Preview
None
None
* compose 0.1.0-dev14 기반으로 작성되었습니다
* compose 0.1.0-dev14 기반으로 작성되었습니다
* compose 0.1.0-dev14 기반으로 작성되었습니다
* compose 0.1.0-dev14 기반으로 작성되었습니다
Declarative UI 패턴의 장점 도입 용이성 * 발표자의 주관적인 평가입니다
학습 용이성
Litho
None
None
eed 장인
Litho - 렌더링 퍼포먼스 Async Layout Flatten UI
Litho - Android SDK와의 호환성 ViewRenderInfo @MountSpec
ӡزॿ Litho - 맥락 별 UI 정의
Litho - 맥락 별 UI 정의
Litho - 맥락 별 UI 정의
None
None
@Annotation Processor Component 스펙 실제 Component 클래스
@LayoutSpec object SectionHeaderSpec public final class SectionHeader extends Component @Annotation
Processor
DataDiffSection
DiffSection - DataDiffSection - SingleComponentSection DataDiffSection
None
None
None
None
None
None
None
Declarative UI 패턴의 장점 학습 용이성 도입 용이성 * 발표자의
주관적인 평가입니다
Airbnb Epoxy
None
RecyclerView RecyclerView.Adapter RecyclerView.ViewHolder
EpoxyRecyclerView EpoxyController EpoxyModel
@ModelView class SectionHeader public class SectionHeaderModel_ extends EpoxyModel @Annotation Processor
CustomView Databinding View holder
EpoxyModelGroup
ӡزॿ @ModelView class StyleCard : ViewGroup
ӡزॿ @ModelView class Header : ViewGroup @ModelView class StyleCard :
EpoxyModelGroup @ModelView class ImagePager : ViewGroup @ModelView class Description : ViewGroup @ModelView class Reactions : ViewGroup Header ImagePager Description Reactions
None
equals() hashCode()
None
None
None
None
Declarative UI 패턴의 장점 학습 용이성 도입 용이성 * 발표자의
주관적인 평가입니다
결론: Declarative UI 를 향한 여정 위에서
직접 맛 본 Declarative UI 후기 적은 코드량 UI상태에만 집중
재사용성 업무 효율성
None
직접 맛 본 Declarative UI 후기 적은 코드량 UI상태에만 집중
재사용성 업무 효율성
결국은 Compose
조금이라도 빨리 Declarative UI를 맛보고 싶다면? Epoxy
+ ⍺ 단방향 데이터 흐름
devussy/Declarative-UI-Sample ✉
[email protected]
감사합니다