Declarative UI Patterns

Declarative UI Patterns
김남현 (VCNC)

View Slide

Declarative UI Patterns
김남현, VCNC
[email protected]

View Slide

Contents
1. What is declarative UI pattern?
2. Why a declarative UI?
3. Flutter as a declarative framework
4. State management in Flutter
5. Declarative programming on other platforms
6. Wrap up

View Slide

What is declarative UI pattern?

View Slide

Declarative Programming
● Describes what a computation should perform
○ Not how to accomplish it
● Expresses the logic of a computation without describing its control ﬂow
Like SQL, HTML, XAML

View Slide

Imperative Addition
class Number {
num n;
Number(num n) { this.n = n; }
add(num n) { this.n += n; }
}
var my = Number(5);
My.add(2);
print(my)
var sum = (a) => (b) => a + b;
print(sum (5) (2));
Declarative Addition

View Slide

Imperative Addition
class Number {
num n;
Number(num n) { this.n = n; }
add(num n) { this.n += n; }
}
var my = Number(5);
my.add(2);
print(my)
var sum = (a) => (b) => a + b;
print(sum (5) (2));
Declarative Addition

View Slide

Declarative UI Pattern
Describes
● What elements you need in UI
● How they should look like

View Slide

Declarative UI Pattern
Describes
● What elements you need in UI
● How they should look like
Nowadays - Separation of behavior from UI

View Slide

var b = ViewB(...)
b.setColor(red))
b.clearChildren()
var c3 = ViewC(...)
b.add(c3)
Imperative Style
Describes how to achieve what you want

View Slide

return ViewB(
color: red,
child: ViewC(...),
);
Declarative Style
Describes what you want

View Slide

return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Text1',),
Text('Text2', style: Theme.of(context).textTheme.display1,),
],
),
),
);

View Slide

Why a declarative UI?

View Slide

ViewA a
ViewB b
ViewC c1
ViewC c2
ViewA a
ViewB b
ViewC c3

View Slide

b.setColor(red))
b.clearChildren()
var c3 = ViewC(...)
b.add(c3)
Imperative Style
ViewA a
ViewB b
ViewC c1
ViewC c2
ViewA a
ViewB b
ViewC c3

View Slide

return ViewB(
color: red,
child: ViewC(...),
);
Declarative Style
ViewA a
ViewB b
ViewC c1
ViewC c2
ViewA a
ViewB b
ViewC c3

View Slide

Declarative UI framework
● Lightens the burden on developers from having to program how to transition
between various UI states
● Lets the developer describe the current state
● Lets the developer leaves the transitioning to the framework

View Slide

● Takes care of the details for what exactly it takes to render elements
● Allows us to focus on the functionality of your app
Declarative UI framework

View Slide

Avocado toast
https://www.self.com/recipe/hummus-avocado-toast

View Slide

1. Prepare ingredients: avocado, bread, almond butter, sea salt, red pepper ﬂakes.
2. Gather equipment: toaster, plate, butter knife.
3. Lightly toast a slice of bread.
4. Place toast on plate.
5. Spread thin layer of almond butter over toast
6. Cut avocado in half on its longer axis.
7. Remove avocado core.
Imperative avocado toast

View Slide

4. Place toast on plate.
5. Spread thin layer of almond butter over toast
6. Cut avocado in half on its longer axis.
7. Remove avocado core.
8. Slice single avocado half into half-centimeter slices.
9. Place avocado slices with 50% overlap over toast.
10. Apply three dashes of sea salt.
11. Apply ﬁve dashes of red pepper ﬂakes.
12. Clean toaster and butter knife.
13. Eat avocado toast.

View Slide

“ I’d like some avocado toast on charred sourdough with almond butter, sea
salt, and red pepper ﬂakes.”
Declarative avocado toast

View Slide

Declarative UI
much less code
much more predictable

View Slide

Your App
Basic
features
Custom features!

View Slide

● Breaking down the work process
○ Data : what drives most business applications
○ User Interface : what makes it meaningful
○ Behaviors : Being applied to enhance the experience
● Separation of these 3 components ensures maximum ﬂexibility
Flexibility

View Slide

● Development was placed on hold until the design was completed
● Separation enables a more parallel workﬂow
● Development is possible having agreed upon what data is needed
○ Even if the interface hasn’t been designed yet
Designer - Developer workﬂow

View Slide

Flutter as a declarative framework

View Slide

User interface in Flutter
f( state )
UI

View Slide

f( state )
UI
The layout on
the screen

View Slide

f( state )
UI
The layout on
the screen
state
The application state

View Slide

f( state )
UI
The layout on
the screen
state
Your
build
methods

View Slide

Everything is a widget!

View Slide

Flutter Widgets
● Take inspiration from React
● Are the basic building blocks of App’s user interface
● Describe what their view should look like given their current conﬁguration and
state
● Immutable declaration of part of the user interface

View Slide

Widget can deﬁne
● A structural element (like a button or menu)
● A stylistic element (like a font or color scheme)
● An aspect of layout (like padding)
● And so on...

View Slide

Padding(
padding: EdgeInsets.all(10.0),
child: Text(
'Text2',
style: TextStyle(
fontStyle: FontStyle.italic,
color: Color(0xff248f3f)
),
),
)
Example

View Slide

Composition over inheritance
● Widgets are themselves often composed of many small widgets that combine
to produce powerful effects.
● Class hierarchy is shallow and broad to maximize the possible number of
combinations.
● e.g. Container is made up of several widgets responsible for layout, painting,
positioning, and sizing ( view sourcecode )

View Slide

Widget build(BuildContext context) {
...
if (alignment != null)
current = Align(alignment: alignment, child: current);
if (effectivePadding != null)
current = Padding(padding: effectivePadding, child: current);
if (decoration != null)
current = DecoratedBox(decoration: decoration, child: current);
if (constraints != null)
current = ConstrainedBox(constraints: constraints, child: current);
if (margin != null)
current = Padding(padding: margin, child: current);
if (transform != null)
current = Transform(transform: transform, child: current);
return current;
}
Container

View Slide

Basic widgets
● Text
● AssetImage
● Row, Column
● Stack
● Container
● And so on

View Slide

Flutter system overview

View Slide

Rendering in Flutter
● Flutter render tree
○ Low-level layout and painting system
○ Retained tree of objects that inherit from RenderObject
○ All widgets are handled by the appropriate RenderObject

View Slide

RenderObject
● Layout
● Painting
● Hit-testing
● Expensive to instantiate

View Slide

RenderObject
● Layout
● Painting
● Hit-testing
● Expensive to instantiate
Keep RenderObjects in memory as long as possible

View Slide

Padding(
padding: EdgeInsets.all(10.0),
child: Text(
'Text2',
style: TextStyle(
fontStyle: FontStyle.italic,
color: Color(0xff248f3f)
),
),
)
Example

View Slide

App
Padding
(10, 10, 10, 10)
Text
text2
Widget Tree

View Slide

App
Padding
(10, 10, 10, 10)
Text
text2
AppRender
PaddingRender
(10, 10, 10, 10)
TextRender
text2
Widget Tree Render tree

View Slide

App
Padding
(10, 10, 10, 10)
Text
text2
AppRender
PaddingRender
(10, 10, 10, 10)
TextRender
text2
Element
Element
Element
Element Tree

View Slide

Element
● For comparing the widget and the render object
● Represents the use of a widget to conﬁgure a speciﬁc location in the tree
● Keeps a reference to the related Widget, RenderObject

View Slide

Element
● For comparing the widget and the render object
● Represents the use of a widget to conﬁgure a speciﬁc location in the tree
● Keeps a reference to the related Widget and RenderObject
Flutter uses Element tree to compare the new widget tree with the already
existing RenderObject tree

View Slide

A basic rule
● Checks if the old and the new widgets are the same type
○ Just updates the RederObject’s conﬁguration
○ Continues travelling down the tree
● Removes the widget
○ Element and RederObject form the tree (including subtrees)

View Slide

App
Padding
(10, 10, 10, 10)
Text
text2
AppRender
PaddingRender
(10, 10, 10, 10)
TextRender
text2
Element
Element
Element
Element Tree

View Slide

App
Padding
(5, 5, 5, 5)
Text
text2
AppRender
PaddingRender
(10, 10, 10, 10)
TextRender
text2
Element
Element
Element
Element Tree

View Slide

App
Padding
(5, 5, 5, 5)
Text
text2
AppRender
PaddingRender
(5, 5, 5, 5)
TextRender
text2
Element
Element
Element
Element Tree

View Slide

FlatButton(
child: Text("Click!"),
color: Color(0xff9d4038),
onPressed: () => print("ok!"),
)
Example

View Slide

App
FlatButton
Text
Click!
AppRender
PaddingRender
(10, 10, 10, 10)
TextRender
text2
Element
Element
Element
Element Tree

View Slide

App
FlatButton
Text
Click!
AppRender
Element
Element Tree

View Slide

App
FlatButton
Text
Click!
AppRender
FlatButtonRender
TextRender
Click!
Element
Element
Element
Element Tree

View Slide

Advanced
● Keys
● Global keys
● Sublinear layout
● Sublinear widget building

View Slide

State management in Flutter

View Slide

The trouble with android.widgets
Views own state and make their own changes
Most view state changes have optional listeners

View Slide

spinner.onItemSelectedListener = object:
AdapterView.OnItemSelectedListener {
override fun onNothingSelected(parent: AdapterView?) {
value = null
}
override fun onItemSelected(parent: AdapterView?, view: View?,
position: Int, id: Long) {
value = parent?.getItemAtPosition(position)
}
}
The trouble with android.widget.Spinners

View Slide

onSelectedItemChanged tells us when the user changed the value

View Slide

.. but it happens after the value has been changed

View Slide

Now, we have to update the state afterwards

View Slide

The trouble with UIKit
Views own state and make their own changes
Most views send a message by target-action pattern

View Slide

let control = UISwitch()
control.addTarget(
self,
action: #selector(onSwitchValueChanged(sender:)),
for: .valueChanged
)
@objc func onSwitchValueChanged(sender: UISwitch) {
isOn = sender.isOn
}
The trouble with UISwitch

View Slide

The selector (action) is triggered when the user changed the value

View Slide


View Slide

Now, we have to update the state afterwards

View Slide

Data ﬂow
What is the source of truth?
Who owns it?
Who updates it?

View Slide

Multiple sources of truth
Widget
App State

View Slide

Multiple sources of truth
Widget
State
App State

View Slide

The trouble on android / iOS
UI widgets have their own behavior!

View Slide

f( state )
UI
The layout on
the screen
state
Your
build
methods

View Slide

Data ﬂow in Flutter
Single source of truth

View Slide

Every piece of state has one owner
Only the owner can make changes to state
Owner listens to events and makes changes in response

View Slide


View Slide

Screen
Request Builder
Vehicle Request
Builder
Request Monitor

View Slide

Top-down Data Flow
Screen
Request Builder
Vehicle Request
Builder
Data
Request

View Slide

Bottom-up Data Flow
Screen
Request Builder
Vehicle Request
Builder
Event
Event

View Slide

Demo

View Slide

Screen
Request Builder
Request Monitor

View Slide

Screen
Request Builder
Request Monitor
Request

View Slide

Demo

View Slide

Declarative programming on other platforms

View Slide

React
● A JavaScript library for building user interface
● Declarative and component-based library
● Flutter’s architecture is inspired by React
○ Stateful Component & Stateless Component

View Slide

render() {
return (

TODO

What needs to be done?

Add #{this.state.items.length + 1}

);
}

View Slide

Reconciliation
● The state of the art algorithms have a O(n^3) complexity
● React implements a heuristic O(n) algorithm
○ Assumptions
■ Two elements of different types will produce different trees
■ The developer can hint at which child elements may be stable across
different renders with a key prop.

View Slide

The Diﬃng Algorithm
● Elements of different types
○ Tears down the old tree and builds the new tree from scratch
● DOM elements of the same type
○ Looks at the attributes of both
○ Only updates the changed attributes
● Component elements of the same type
○ Updates the props of the underlying component to match the new element

View Slide

Batching
● React batches updates inside event handlers
● Excutes all event handlers ﬁrst
● Then triggers a single re-render batching all of updates together

View Slide

Jetpack Compose
● Google introduced Jetpack compose at Google I/O 2019
● Declarative style with annotation
● A super experimental feature

View Slide

Google’s API Regrets
● Bundled
● Complicated
● Too many lines of code
● Multiple data ﬂow

View Slide

Goals
● Unbundle from platform releases
● Fewer technology stack ﬂowcharts
● Write less lines of code
● Clarify state ownership and event handling

View Slide

Jetpack Compose
● UI as a function
○ Takes data as input
○ Emits UI hierarchy when invoked

View Slide

Jetpack Compose
● UI as a function
○ Takes data as input
○ Emits UI hierarchy when invoked
Declarative UI pattern!

View Slide

@Composable
fun NewsFeed(stories: List) {
for (story in stories) {
StoryWidget(story)
}
}
@Composable
fun StoryWidget(story: StoryData) {
Padding(8.dp) {
Column {
Title(story.title)
Image(story.image)
Text(story.content)
}
}
}

View Slide

SwiftUI
● Apple introduced SwiftUI at WWDC 2019
● Declarative syntax
● iOS13+

View Slide

Problems
● Multiple source of truths
● Limitation of Storyboards, Interface builder

View Slide

View
● Protocol
○ Composition over inheritance
● Value type
● SwiftUI prefers smaller and single-purposed Views

View Slide

SwiftUI
● Declares View with Modiﬁer
Text(name)
.font(.caption)
.foregroundColor(.blue)
● SwiftUI optimizes the process down behind the scenes.

View Slide

VStack {
Text("Hi")
.font(.system(size: 15))
.foregroundColor(.red)
Text(name)
.font(.caption)
.foregroundColor(.blue)
Button(action: { self.isPlaying.toggle() }) {
HStack {
Image(systemName: "pause.circel")
Text("play")
}
}
}

View Slide

Wrap up

View Slide

return ViewB(
color: red,
child: ViewC(...),
);
Declarative UI pattern

View Slide

Why a declarative UI?
● Less lines of code
● Predictability
● Eﬃcient workﬂow
● Flexibility

View Slide

Flutter as a declarative framework
● UI = f( state )
● Widget
● Widget tree
● Element tree
● Render tree

View Slide

State management in Flutter
● Dataﬂow
● Single source of truth
● ChangeNotiﬁerProvider

View Slide

Declarative programming on other platforms
● React
● Jetpack Compose
● SwiftUI

View Slide

View Slide

Declarative UI Patterns

Declarative UI Patterns

VCNC

More Decks by VCNC

Other Decks in Programming

Featured

Transcript