Declarative UI 도입을 향한 여정

* DroidKnight 2020 발표 자료입니다.

Transcript

1. Speaker l Declarative UI 도입을 향한 여정 윤승용
3. Declarative UI ?
4. Declarative programming যڃ Ѿҗ ܳ ਗೞח૑ Declarative UI 란?
5. Declarative UI programming যڃ UI ܳ ਗೞח૑ Declarative UI 란?
6. UI = f(state) যڃ UI ܳ ਗೞח૑ Declarative UI 란?
7. → Container View A View B View C Container
8. Imperative UI 방식 Container View A View B
9. Imperative UI 방식 Container View A View B
10. Imperative UI 방식 Container View A View B
11. Container Container Imperative UI 방식
12. Imperative UI 방식 Container View C
13. View C Imperative UI 방식 Container View C
14. Imperative UI 방식 Container View C
15. Declarative UI 방식 Container View A View B
16. Declarative UI 방식 Container View A View B Container View C
17. Imperative UI Declarative UI
18. Declarative UI 의 장점 적은 코드량 UI상태에만 집중 재사용성 업무 효율성
19. Diffing Rendering Etc..
20. Declarative UI framework/library
21. Declarative UI framework/library
22. 2013 2017 2019 2014 Declarative UI framework/library
23. 스쉐는 왜 Declarative UI 를 도입했을까?
24. Once upon a time UI 모듈화
27. ✌Component✌
30. Trending User Product Like Related Catalogs Style Related Products Category Trending Products
31. 효율성 = 재사용성
32. 효율성 = UI 모듈화
33. UI 모듈화
34. UI 모듈화
35. HorizontalList UI 모듈화
36. UI 모듈화
37. StyleCard Featured Keyword UI 모듈화
38. UI 모듈화
39. UI 모듈화
41. Android에서 구현?
42. Recycler View
43. Recycler View Adapter
44. Recycler View Adapter ViewType ViewHolder
45. Adapter ViewType RecyclerView ViewHolder
46. Vertical ↓
47. Horizontal→ Horizontal→ Vertical ↓
48. 적은 코드량 UI상태에만 집중 재사용성 효율성
50. Declarative UI Tool 을 찾아서..
51. Jetpack Compose Litho Epoxy
52. NumberModel
53. 1. 컴포넌트 정의 2. 컴포넌트를 활용한 화면 구성
54. Section Header 1. 컴포넌트 정의
55. Section Header 1. 컴포넌트 정의 - Title
56. Section Header 1. 컴포넌트 정의 - Title Item
57. Section Header 1. 컴포넌트 정의 - Title Item - Title - TitleSize - backgroundColor
58. 1. Declarative UI의 장점을 얻을 수 있는가? 2. 기존 프로젝트에 도입하기 쉬운가? 3. 학습 곡선이 낮은가?
59. Jetpack Compose
61. @Composable + functions
63. @Preview
66. * compose 0.1.0-dev14 기반으로 작성되었습니다
67. * compose 0.1.0-dev14 기반으로 작성되었습니다
68. * compose 0.1.0-dev14 기반으로 작성되었습니다
69. * compose 0.1.0-dev14 기반으로 작성되었습니다
70. Declarative UI 패턴의 장점 도입 용이성 * 발표자의 주관적인 평가입니다 학습 용이성
71. Litho
74. eed 장인
75. Litho - 렌더링 퍼포먼스 Async Layout Flatten UI
76. Litho - Android SDK와의 호환성 ViewRenderInfo @MountSpec
77. ӡزॿ Litho - 맥락 별 UI 정의
78. Litho - 맥락 별 UI 정의
79. Litho - 맥락 별 UI 정의
82. @Annotation Processor Component 스펙 실제 Component 클래스
83. @LayoutSpec object SectionHeaderSpec public final class SectionHeader extends Component @Annotation Processor
84. DataDiffSection
85. DiffSection - DataDiffSection - SingleComponentSection DataDiffSection
93. Declarative UI 패턴의 장점 학습 용이성 도입 용이성 * 발표자의 주관적인 평가입니다
94. Airbnb Epoxy
96. RecyclerView RecyclerView.Adapter RecyclerView.ViewHolder
97. EpoxyRecyclerView EpoxyController EpoxyModel
98. @ModelView class SectionHeader public class SectionHeaderModel_ extends EpoxyModel @Annotation Processor
99. CustomView Databinding View holder
100. EpoxyModelGroup
101. ӡزॿ @ModelView class StyleCard : ViewGroup
102. ӡزॿ @ModelView class Header : ViewGroup @ModelView class StyleCard : EpoxyModelGroup @ModelView class ImagePager : ViewGroup @ModelView class Description : ViewGroup @ModelView class Reactions : ViewGroup Header ImagePager Description Reactions
104. equals() hashCode()
109. Declarative UI 패턴의 장점 학습 용이성 도입 용이성 * 발표자의 주관적인 평가입니다
110. 결론: Declarative UI 를 향한 여정 위에서
111. 직접 맛 본 Declarative UI 후기 적은 코드량 UI상태에만 집중 재사용성 업무 효율성
113. 직접 맛 본 Declarative UI 후기 적은 코드량 UI상태에만 집중 재사용성 업무 효율성
114. 결국은 Compose
115. 조금이라도 빨리 Declarative UI를 맛보고 싶다면? Epoxy
116. + ⍺ 단방향 데이터 흐름
117. devussy/Declarative-UI-Sample ✉ y.devussy@gmail.com
118. 감사합니다