Imperative is dead, long live Declarative! | Appdevcon

> Twitter: @marcoGomier
 
> Github: prof18
 
> Website: marcogomiero.com
Imperative

is dead, long live

Declarative
👨💻 Senior Android Engineer @ TIER
 
Google Developer Expert for Kotlin

View Slide

Hacker News Client
Loading State
Appdevcon - @marcoGomier

View Slide

Hacker News Client
Error State
Loading State

View Slide

Hacker News Client
Success State
Loading State Error State

View Slide

👷 How to built it 👑? 🚧

View Slide

1. Define the view

View Slide

XML or Code
1. Define the view

... />

android:id="@+id/progress_bar"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

... />

android:id="@+id/error_message"



android:visibility="gone"

... />

android:id="@+id/error_button"



android:text="Refresh"


... />

android:id="@+id/recycler_view"

android:layout_width="match_parent"

android:layout_height="match_parent"


... />

< /
androidx.constraintlayout.widget.ConstraintLayout>


View Slide

Storyboard or Code
1. Define the view

View Slide

1. Define the view
2. Retrieve the views instances

View Slide

1. Define the view
val progressBar = findViewById(R.id.progress_bar)


View Slide

1. Define the view
@IBOutlet weak var loader: UIActivityIndicatorView!


View Slide

1. Define the view
3. Add some code to handle a list

View Slide

1. Define the view
RecyclerView.Adapter
class NewsAdapter(var items: List = listOf()) :

RecyclerView.Adapter() {

...

}


View Slide

1. Define the view
extension MainViewController: UITableViewDelegate, UITableViewDataSource {

...

}

Delegate and a DataSource


View Slide

1. Define the view
4. Add some logic

View Slide

Kotlin
1. Define the view
4. Add some logic
when (appState.newsState) {

is NewsState.Loading
->
{

progressBar.visibility = View.VISIBLE

...

}

is NewsState.Error
->
{

progressBar.visibility = View.GONE

errorMessage.visibility = View.VISIBLE

...

}

is NewsState.Success
->
{


errorMessage.visibility = View.GONE

recyclerView.visibility = View.VISIBLE

...

}

}


View Slide

👑 Imperative
• Lots of boilerplate and boring code

• Errors and bugs prone

• Not a single source of truth

• Hard to maintain

View Slide

👑 Imperative

View Slide

“ a programming paradigm
that uses statements that
change a program's state ”
- Wikipedia

View Slide

state A

View Slide

state A state B

View Slide

state A
🧙

View Slide

state B
🧙

View Slide

📣 Declarative

View Slide

“ what the program should
accomplish without specifying how
the program should achieve the
result. ”
- Wikipedia

View Slide

🧐

View Slide

UI = f(state)

View Slide

state
• Describes the UI right now, i.e. what to show

• Independent of the previous state[s]

• If changes, the UI is redrawn

View Slide

state
• Describes the UI right now, i.e. what to show

• Independent of the previous state[s]

• If changes, the UI is redrawn [with optimizations]

View Slide

Changes are handled by the magician system

not by the developer
🧙

View Slide

How the magician system works
1. Creates an abstract representation of the UI and renders it


View Slide


2. When a change is made, it creates a new representation

3. Computes the differences between the two representations

4. Renders the differences


View Slide


2. When a change is made, it creates a new representation

3. Computes the differences between the two representations

4. Renders the differences [if any]


View Slide

🤔 How it works in details?

View Slide

🤷 It depends!

View Slide

React [Native]
• Virtual DOM as representation of the UI

OK!

b>

button>

{

type: 'button',

props: {

className: 'button button-blue',

children: {

type: 'b',

props: {

children: 'OK!'

}

}

}

}


View Slide

React [Native]

• Diff comparison using reconciliation, an O(n) heuristic
algorithm

View Slide

React [Native]

• Diff comparison using reconciliation, an O(n) heuristic
algorithm
reactjs.org/docs/reconciliation.html

View Slide

Flutter
• Element Tree as representation of the UI

View Slide

Flutter

• Not a tree-diffing algorithm

• For each element, the child list is examined independently
 
(O(n) algorithm)

View Slide

Flutter

• Not a tree-diffing algorithm

• For each element, the child list is examined independently
 
(O(n) algorithm)
flutter.dev/docs/resources/inside-flutter

View Slide

Jetpack Compose
• Slot table as representation of the UI

View Slide

Jetpack Compose
• Every node is cached with a key

View Slide

Jetpack Compose
• Reuse the node unless it changed

View Slide

Jetpack Compose
• Reuse the node unless it changed
youtube.com/watch?v=6BRlI5zfCCk

View Slide

👨🎨 How to define a piece of UI?

View Slide

Component

View Slide

Component
Component
export default class NewsCard extends React.Component {

constructor(props) {

super(props);

}

render() {

const { news } = this.props;

if (news) {

return (

. .
>

..
>

..
>

TouchableOpacity>

View>

);

}

return null;

}

}


View Slide

Component
Widget

View Slide

Component
Widget
Widget
class NewsCardWidget extends StatelessWidget {

final News news;

NewsCardWidget({this.news});

@override

Widget build(BuildContext context) {

return Padding(

padding: const EdgeInsets.all(6.0),

child: Card(

elevation: 8.0,

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(16.0),

),

child:
...
,

),

);

}

}


View Slide

Component
Widget
composable function

View Slide

Component
Widget
composable function
composable function
@Composable

fun NewsCard(news: News) {

Card(

shape = RoundedCornerShape(16.dp),

elevation = 8.dp,

modifier =
..

) {

Column {

Text(news.title)

..
.

}

}

}


View Slide

Component
Widget
composable function
struct

View Slide

Component
Widget
composable function
struct
struct
struct NewsCard: View {

let news: News

var body: some View {

HStack {

VStack(alignment: .leading) {

Text(self.news.title)

..
.

}

}

}

}


View Slide

Component
Widget
composable function
struct

View Slide

Component
Widget
composable function
struct
With a function!

View Slide

Component
Widget
composable function
struct
With a function (of the state)
!

View Slide

Pure Function

View Slide

fun sum(a: Int, b: Int): Int {

return a + b

}

👍

View Slide

👍 fun sum(a: Int, b: Int): Int {

return a + b

}

fun addExpense(account: BackAccount, amount: Int) {

account.balance = account.balance - amount

}

View Slide

👍 fun sum(a: Int, b: Int): Int {

return a + b

}

fun addExpense(account: BackAccount, amount: Int) {

account.balance = account.balance - amount

}

👎

View Slide

Pure Function
• Returns the same value given the same input

• Has no side effects

View Slide

Take some inputs and return a piece of UI

View Slide

UI = f(state)

View Slide

View Slide

fun checkComponent(

isChecked: Boolean,

onSelectionChange: ()
->
Unit,

): MaterialSwitch {

return MaterialSwitch(

selected = isChecked,

onSelectionChange = { onSelectionChange() },

)

}

View Slide

fun checkComponent(

isChecked: Boolean,

->
Unit,

): MaterialSwitch {

return MaterialSwitch (



)

}
fun checkComponent(

isChecked: Boolean,

->
Unit,

): MaterialSwitch {




)

}
SwitchComponent
isChecked
State Holder

View Slide

SwitchComponent
State Holder
onSelectionChange
fun checkComponent(

isChecked: Boolean,

->
Unit,

): MaterialSwitch {




)

}

View Slide

SwitchComponent
isChecked
fun checkComponent(

isChecked: Boolean,

->
Unit,

): MaterialSwitch {




)

}

View Slide

State goes down
Events goes up
Unidirectional Data Flow

View Slide

🧩

View Slide

🧩 Composition

View Slide

Inheritance
🧩 Composition over

View Slide

🧩 Inheritance
fun Container() : View() {
..
}

fun NewsCard() : View() {
..
}

fun NewsCardContainer() :
??
{
..
}

View Slide

🧩 Composition
fun NewsCardContainer() {

NewsCard {

Container {

...

}

}

}

fun Container() {
..
}

fun NewsCard() {
..
}

View Slide

Imperative vs Declarative

View Slide

Imperative

->
{


recyclerView.visibility = View.GONE


errorButton.visibility = View.GONE

}

is NewsState.Error
->
{

val errorState = appState.newsState as NewsState.Error


errorButton.visibility = View.VISIBLE


errorMessage.text = errorState.reason

errorButton.setOnClickListener {

viewModel.loadData()

}

}

->

View Slide







}

}

->
{

val successState = appState.newsState as NewsState.Success





adapter.items = successState.news

adapter.notifyDataSetChanged()

}

}

Imperative

View Slide

when (appState
?.
newsState) {

NewsState.Loading
-
>
{

LoadingView()

}

->
{

val successState = appState
?.
newsState as NewsState.Success

NewsList(newsList = successState.news)

}

is NewsState.Error
->
{

val errorState = appState
? .
newsState as NewsState.Error

ErrorView(

reason = errorState.reason,

onRefreshClick = { viewModel.loadData() })

}

}

Declarative

->
{





}

is NewsState.Error
->
{

val errorState = appState.newsState as NewsState.Error







}

}

->
{

val successState = appState.newsState as NewsState.Success





adapter.items = successState.news

adapter.notifyDataSetChanged()

}

}

View Slide

Appdevcon - @marcoGomier https://github.com/prof18/imperative-vs-declarative

View Slide

Conclusions

View Slide

Conclusions
• Describe WHAT to see NOT HOW

• Less code to write → Fewer bugs

• Totally new paradigm, it requires time to get used to

View Slide

Bibliography / Useful Links
• https:
//
www.youtube.com/watch?v=zaSn_qA7Nb4

• https:
//
www.youtube.com/watch?v=4EFjDSijAZU

• https:
//
www.youtube.com/watch?v=x7cQ3mrcKaY

• https:
//
www.youtube.com/watch?v=1uRC3hmKQnM

• https:
//
www.youtube.com/watch?v=eR4LjL1h6cE

• https:
//
overreacted.io/react-as-a-ui-runtime/

• https:
//
rauchg.com/2015/pure-ui

• http:
/ /
intelligiblebabble.com/compose-from-first-principles/

• https:
//
www.youtube.com/watch?v=6BRlI5zfCCk

• https:
//
www.youtube.com/watch?v=WqnR_XhEiVI

• https:
//
reactjs.org/docs/reconciliation.html

• https:
//
flutter.dev/docs/resources/inside-flutter

• https:
//
www.youtube.com/watch?v=rshXbwrrUxY

• https:
//
www.youtube.com/watch?v=_1_XkeFUUME

• https:
//
www.youtube.com/watch?v=aH7oWxfxpJY

• https:
//
medium.com/androiddevelopers/understanding-jetpack-compose-part-1-of-2-ca316fe39050

• https:
//
medium.com/androiddevelopers/under-the-hood-of-jetpack-compose-part-2-of-2-37b2c20c6cdd

• https:
//
developer.android.com/jetpack/compose/state

View Slide

Thank you!
> Twitter: @marcoGomier
 
> Github: prof18
 
> Website: marcogomiero.com
👨💻 Senior Android Engineer @ TIER
 
Google Developer Expert for Kotlin

View Slide

Imperative is dead, long live Declarative! | Appdevcon

Imperative is dead, long live Declarative! | Appdevcon

Marco Gomiero

More Decks by Marco Gomiero

Other Decks in Programming

Featured

Transcript