The document discusses the rise of reactive declarative UI as code in mobile development, highlighting trends and frameworks such as Flutter, Jetpack Compose, and SwiftUI. It emphasizes the benefits of reduced code complexity, faster development cycles, and cleaner, more testable code while addressing potential pitfalls. The speaker encourages embracing this trend, noting that Flutter is well-positioned in the market compared to its competitors.

1. Reactive declarative
UI as code
mobile trend and healthy competition
TruongSinh Tran-Nguyen, Inspectorio
@truongsinhtn

2. Before we begin

3. Before we begin

4. Before we begin
● Flutter
○ alpha May 2017
○ 1.0 Dec 2018
● Jetpack Compose
○ technical preview May 2019
● SwiftUI
○ beta Jun 2019

5. Before we begin

6. Before we begin
This slide is available online,
don’t need to take pictures of
my cool slides 😆
http://bit.ly/2GbL39T

7. Before we begin

8. About Speaker
● “Sinh”
● 10y+ working w/ European and VN
startups
● People's Choice CTO of the Year
2016 – Nordic Startup Award
Finland

9. About Speaker
● Engineering Director,
● Flutter advocate
● @truongsinhtn

10. About
● Startup, 13 quarters-old
● Quality and compliance platform, powered by AI
● B2B, serving Fortune 100 factories, brands, retailers
● Always looking for new talents 😉

11. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
About

12. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
About

13. Agenda
● Concept reviews: reactive, declarative, as code
● Why trendy
● How this trend is a healthy competition

14. Concepts review

15. Concepts review

16. Declarative
● Declarative vs Imperative
● Declarative can be NON-reactive
● Declarative can be NON-as-code

17. Declarative
● Declarative vs Imperative
● Declarative but NOT reactive
● Declarative but NOT as code

18. Imperative vs Declarative
Imperative: tell compiler
what you want to happen,
step by step
Declarative: describes what
you want, but not
necessarily how to get it

19. Imperative vs Declarative
Imperative:
● Open the rice cooker
● Put rice and water concurrently
● Press “cook” button
● Return a future when the “cook” button turns to “warm”
● Put water, veggie and tofu into the pot concurrently
● Return a future when the pot is boiling
● Waiting for both futures to be resolved
● Present both on the tables

20. Imperative vs Declarative
Imperative:
● Open the rice cooker
● Put rice and water concurrently
● Press “cook” button
● Return a future when the “cook” button turns to “warm”
● Put water, veggie and tofu into the pot concurrently
● Return a future when the pot is boiling
● Waiting for both futures to be resolved
● Present both on the tables

21. Imperative vs Declarative
Imperative:
● java.util.concurrent.ExecutionException:
● java.util.concurrent.RejectedExecutionException
● java.util.concurrent.FutureTask$Sync.innerGet(FutureTask.java:233)
● java.util.concurrent.FutureTask.get(FutureTask.java:94)

22. Imperative vs Declarative
Imperative:
➢ Open the rice cooker
● Put rice and water concurrently
● Press “cook” button
● Return a future when the “cook” button turns to “warm”
● Put water, veggie and tofu into the pot concurrently
● Return a future when the pot is boiling
● Waiting for both futures to be resolved
● Present both on the tables

23. Imperative vs Declarative
Imperative:
● Open the rice cooker
➢ Put rice and water concurrently
● Press “cook” button
● Return a future when the “cook” button turns to “warm”
● Put water, veggie and tofu into the pot concurrently
● Return a future when the pot is boiling
● Waiting for both futures to be resolved
● Present both on the tables

24. Imperative vs Declarative
Imperative:
● Open the rice cooker
● Put rice and water concurrently
➢ Press “cook” button
● Return a future when the “cook” button turns to “warm”
● Put water, veggie and tofu into the pot concurrently
● Return a future when the pot is boiling
● Waiting for both futures to be resolved
● Present both on the tables

25. Imperative vs Declarative
Imperative:
● Open the rice cooker
● Put rice and water concurrently
➢ Press “cook” button
● Return a future when the “cook” button turns to “warm”
● Put water, veggie and tofu into the pot concurrently
● Return a future when the pot is boiling
● Waiting for both futures to be resolved
● Present both on the tables
Cooker:
● connectedToPower: false

26. Imperative vs Declarative
Declarative:
● A table with
○ Meal with
■ Cooked rice
■ Soup with veggie and tofu

27. XML is declarative but not reactive nor as code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add" />
</LinearLayout>

28. Reactive

29. Reactive

30. Reactive
● Spreadsheet is reactive
● Not reactive: 2-way binding
○ MVC, MVP, MVVM

31. Reactive
● Spreadsheet is reactive
● Not reactive: 2-way binding
○ MVC, MVP, MVVM
● Unidirectional data flow is reactive
○ on Android: MVI
● Reactive Extension family (Rx): RxJava, RxDart, RxSwift

32. Reactive stream with imperative UI
const konamiCode = const <keyCode>[
⬆️,⬆️,⬇️,⬇️,⬅️,➡️,⬅️,➡️,🅰 ,🅱
];
final keyUp = Observable<KeyboardEvent>(document.onKeyUp);
keyUp
.map((event) => event.keyCode)
.bufferCount(10, 1)
.where((last10KeyCodes) => last10KeyCodes == konamiCode))
.listen((_) async {
// Create a <marquee> element
final marquee = document.createElement("marquee");
// Insert text
marquee.innerHTML = "KONAMI";
// Append <button> to <body>
body.appendChild(btn);
// sleep for 5 seconds
await Future.delayed(Duration(seconds: 2));
// remove marquee
body.removeChild(marquee);
});

33. Reactive stream with imperative UI
const konamiCode = const <keyCode>[
⬆️,⬆️,⬇️,⬇️,⬅️,➡️,⬅️,➡️,🅰 ,🅱
];
final keyUp = Observable<KeyboardEvent>(document.onKeyUp);
keyUp
.map((event) => event.keyCode)
.bufferCount(10, 1)
.where((last10KeyCodes) => last10KeyCodes == konamiCode))
.listen((_) async {
// UI manipulation here
});

34. Reactive stream with imperative UI
.listen((_) async {
// Create a <marquee> element
final marquee = document.createElement("marquee");
// Insert text
marquee.innerHTML = "KONAMI";
// Append <button> to <body>
body.appendChild(btn);
// sleep for 5 seconds
await Future.delayed(Duration(seconds: 2));
// remove marquee
body.removeChild(marquee);
});

35. As Code
● UI as code is “Programmatic UI
on steroid”
● access to the full features of a
single language

36. 3 languages in a snippet
<h1
style="color:blue; margin-left:30px;"
onclick="alert(' ♀')"
>
This is a heading
</h1>

37. As Code
● React/React Native: DSL (JSX)
● Jetpack Compose: DSL (@annotation)
● SwiftUI: DSL (@annotation)
● Flutter: vanilla Dart

38. Why trendy?
Reactive declarative UI as code

39. Achieving the same result with less code
● Less code to test, have bug, maintain, extend
● Optimization is (mostly) done by abstraction layer
● Faster development cycle
● Cleaner, more testable code if done right

40. Less code?
● A lot of abstract layers so common we don’t care

41. 1st generation programming language
Literally binary, 0000 0110 0010 1010

42. 2nd generation programming language
● Assembly language
● 1-1 mapping mnemonic instruction to binary
● CPU- and OS-dependent
load_a 42 // 0000 0110 0010 1010

43. Later generations
● CPU-independent
● Blurred distinction between 3rd-, 4th- and 5th- gen
● Concrete/Procedural ←→ Abstract/Expressive
● malloc vs GC
● Threading vs Coroutine

44. Really? Prove it!
● Jetpack compose is still in technical preview
● Flutter vs Android is not fair
● Let’s see SwiftUI vs UIKit
● https://www.youtube.com/watch?v=qk2y-TiLDZo by Paul
Hudson

45. UIKit vs SwiftUI

46. UIKit vs SwiftUI
UIKit
Time: 16:46
LOCs: 98
SwiftU
Time: 9:25
LOCs: 52

47. Optimization?
● Declarative: describes what you want, but not
necessarily how to get it
● Each update the to the framework / toolkit may result in
better performance with mostly no code change
○ E.g: React 17 “time slicing”

48. Faster development cycle?
● As a result of less code / higher abstraction
● Preview / Hot reload, especially for animation
● Debugger point vs Inspector

49. Tools

50. Cleaner, more testable code if done right?
● MVC, MVP, MVVM, MVI, etc. patterns emerge for cleaner
code
● MV* are (mostly) bidirectional
○ MVI is unidirectional

51. Cleaner, more testable code if done right?
● Functional reactive is unidirectional
○ Half things to test, less “data
traffic jam”
○ Easier to separate (business
logic) “domain” from platform

52. Cleaner, more testable code if done right?
● What can go wrong?
○ Too many internal states
○ Too many logic entangled in the UI code

53. Cleaner, more testable code if done right?
● What can go wrong?
○ Too many internal states
○ Too many logic entangled in the UI code

54. So yes, it’s trendy!
● Less code to test, have bug, maintain, extend
● Optimization is (mostly) done by abstraction layers
● Faster development cycle
● Cleaner, more testable code if done right

55. So yes, it’s trendy!
● Less code to test, have bug, maintain, extend
● Optimization is (mostly) done by abstraction layers
● Faster development cycle
● Cleaner, more testable code if done right

56. Healthy competition

57. Healthy competition

62. In conclusion

63. Moral of the Story
● Reactive declarative UI as code has already been the
trend, deservedly so
● Learn it, Embrace it, Utilize it

64. Moral of the Story
● Flutter is in the sweet pot in this trend for mobile
○ ReactNative suffers performance problem
○ SwiftUI is in beta, requires iOS13+
○ Jetpack compose is in technical preview
○ Flutter uses vanilla language
● Ask the right question, “Should I use Flutter with MVP or
MVVM” is the wrong one

65. Moral of the Story
● Flutter is in the sweet pot in this trend for mobile
○ ReactNative suffers performance problem
○ SwiftUI requires iOS13+
○ Jetpack compose is in technical preview
● Ask the right question, “Should I use Flutter with MVP or
MVVM” is the wrong one

66. Thank You

67. Oh, one more thing
We can still do imperative programming in Flutter.
Remember the legendary Flappy game?

68. Try it yourself
https://github.com
/truongsinh
/fluttery_dash
/releases/tag/v0.0.1

69. Questions?