SlideShare a Scribd company logo
Declarative UI
StyleShare
Declarative UI 

?
'무슨 결과' 를 원하는지 명시하고 그 방법을 명시하지는 않는다.
UI
UI = f ( state )
Container
View A
View B
Container
View C
→
Imperative UI
Container
View A
View B
Container
View A
View B
Container
View C
Declarative UI
Container
View C
🧚
Imperative UI Declarative UI
😘
UI 



👍
Di>ng
Rendering
framework
Declarative UI

framework
Declarative UI 

frameworks
2013 2017 20192014
Declarative UI 

?
Once upon a time
UI
✌Component✌
TrendingUser
ProductLike
Related

Catalogs
Style

Related
Products
Category

Trending
Products
🤔
=
UI=
HorizontalList
Style

Card
Featured Keyword
Style

Card
Featured Keyword
Imperative ?
Recycler

View
Recycler

View
💃🕺Adapter
👯ViewType
👯ViewHolder
Adapter
ViewType
RecyclerView
ViewHolder
VeUical

↓
Horizontal

→
🤦
Adapter 

in

Adapter
👋
Declarative UI
Declarative UI Pa.erns UI , 

.
Declarative UI PaWerns UI , 

.
Declarative UI
Jetpack Compose

Epoxy

Litho
Jetpack Compose

Epoxy

Litho
android.view 👋
CustomView.kt

view_custom.xml
UI
Unbundled

Single data `ow

Less code
SUPER
Experimental
🏗
framework Jetpack Compose 

, framework .
Jetpack Compose

Epoxy

Litho
Android
 RecyclerView

RecylerView.Adapter
Epoxy
EpoxyRecylerView

EpoxyController
The controller's 

declarative style makes it
very easy to visualize
Declarative UI
Android UI 

Controller in Controller
But
💔Epoxy
Jetpack Compose

Epoxy

Litho
Declarative UI
Async Layout FlaWen UI
UI 🤩
⭐ 6.4k
eed
😫
1.
Single source of truth
State

🤮
❤
State View
Jetpack Compose .
2. Yoga Layout
Yoga Layout ≈ Flexbox
Yoga Layout ≈ Flexbox
🤷
😘
1. Android 👍
Feed
UI ? 🤔
UI ? 🤔

UI

👍
🧗

Litho → Android
👎
Declarative UI 

?
✅ 

✅ UI 

✅ 

✅
Declarative UI 

?
🙌 Declarative UI 🙌
Declarative UI Pa.erns UI , 

.
Android UI 

Litho .
Epoxy
🏗
Declarative UI Pa.erns UI , 

.


Jetpack Compose Epoxy .
Declarative UI의 이론과 실제

More Related Content

Similar to Declarative UI의 이론과 실제

Universal programming recipes​ - Ekaterina Trofimenko - Women In Technology
Universal programming recipes​ - Ekaterina Trofimenko - Women In TechnologyUniversal programming recipes​ - Ekaterina Trofimenko - Women In Technology
Universal programming recipes​ - Ekaterina Trofimenko - Women In Technology
Badoo
 
Lecture Slides for List Views [Android ]
Lecture Slides for List Views [Android ]Lecture Slides for List Views [Android ]
Lecture Slides for List Views [Android ]
Nehil Jain
 

Similar to Declarative UI의 이론과 실제 (20)

"Universal programming recipes", Kateryna Trofimenko
"Universal programming recipes", Kateryna Trofimenko"Universal programming recipes", Kateryna Trofimenko
"Universal programming recipes", Kateryna Trofimenko
 
Universal programming recipes​ - Ekaterina Trofimenko - Women In Technology
Universal programming recipes​ - Ekaterina Trofimenko - Women In TechnologyUniversal programming recipes​ - Ekaterina Trofimenko - Women In Technology
Universal programming recipes​ - Ekaterina Trofimenko - Women In Technology
 
Compose In Practice
Compose In PracticeCompose In Practice
Compose In Practice
 
Taking control of Storyboard
Taking control of StoryboardTaking control of Storyboard
Taking control of Storyboard
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
 
Intro to iOS Application Architecture
Intro to iOS Application ArchitectureIntro to iOS Application Architecture
Intro to iOS Application Architecture
 
Visual AI Testing Using Applitools
Visual AI Testing Using ApplitoolsVisual AI Testing Using Applitools
Visual AI Testing Using Applitools
 
Android accessibility for developers and QA
Android accessibility for developers and QAAndroid accessibility for developers and QA
Android accessibility for developers and QA
 
Lecture Slides for List Views [Android ]
Lecture Slides for List Views [Android ]Lecture Slides for List Views [Android ]
Lecture Slides for List Views [Android ]
 
Creating a reusable ui component
Creating a reusable ui componentCreating a reusable ui component
Creating a reusable ui component
 
Refactoring Wunderlist. UA Mobile 2016.
Refactoring Wunderlist. UA Mobile 2016.Refactoring Wunderlist. UA Mobile 2016.
Refactoring Wunderlist. UA Mobile 2016.
 
Fullstack JS Workshop
Fullstack JS WorkshopFullstack JS Workshop
Fullstack JS Workshop
 
Mixing Objective-C, Swift and Japan
Mixing Objective-C, Swift and JapanMixing Objective-C, Swift and Japan
Mixing Objective-C, Swift and Japan
 
Glenn Reyes - Secrets of building robust UI components
Glenn Reyes - Secrets of building robust UI componentsGlenn Reyes - Secrets of building robust UI components
Glenn Reyes - Secrets of building robust UI components
 
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...
 
Building impressive layout systems with vaadin
Building impressive layout systems with vaadinBuilding impressive layout systems with vaadin
Building impressive layout systems with vaadin
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to React
 
Java EE 7 from an HTML5 Perspective, JavaLand 2015
Java EE 7 from an HTML5 Perspective, JavaLand 2015Java EE 7 from an HTML5 Perspective, JavaLand 2015
Java EE 7 from an HTML5 Perspective, JavaLand 2015
 
Ux Example
Ux ExampleUx Example
Ux Example
 
Continuous Visual Integration - RailsConf 2016 - Mike Fotinakis - Percy.io
Continuous Visual Integration - RailsConf 2016 - Mike Fotinakis - Percy.ioContinuous Visual Integration - RailsConf 2016 - Mike Fotinakis - Percy.io
Continuous Visual Integration - RailsConf 2016 - Mike Fotinakis - Percy.io
 

Recently uploaded

Recently uploaded (20)

Top Mobile App Development Companies 2024
Top Mobile App Development Companies 2024Top Mobile App Development Companies 2024
Top Mobile App Development Companies 2024
 
Studiovity film pre-production and screenwriting software
Studiovity film pre-production and screenwriting softwareStudiovity film pre-production and screenwriting software
Studiovity film pre-production and screenwriting software
 
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
 
Crafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM IntegrationCrafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM Integration
 
De mooiste recreatieve routes ontdekken met RouteYou en FME
De mooiste recreatieve routes ontdekken met RouteYou en FMEDe mooiste recreatieve routes ontdekken met RouteYou en FME
De mooiste recreatieve routes ontdekken met RouteYou en FME
 
GraphAware - Transforming policing with graph-based intelligence analysis
GraphAware - Transforming policing with graph-based intelligence analysisGraphAware - Transforming policing with graph-based intelligence analysis
GraphAware - Transforming policing with graph-based intelligence analysis
 
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
 
Vitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume MontevideoVitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume Montevideo
 
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAGAI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
 
Advanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should KnowAdvanced Flow Concepts Every Developer Should Know
Advanced Flow Concepts Every Developer Should Know
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdf
 
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
 
AI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning FrameworkAI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning Framework
 
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
 
top nidhi software solution freedownload
top nidhi software solution freedownloadtop nidhi software solution freedownload
top nidhi software solution freedownload
 
Using IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New ZealandUsing IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New Zealand
 
SOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBroker
 
Accelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with PlatformlessAccelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with Platformless
 
Designing for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesDesigning for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web Services
 

Declarative UI의 이론과 실제