This talk was given at Realm on 3.31.16 and makes the case for looking to the web to find better mobile strategies. Also covers one example of a way you can take a web framework (Cycle.js) and port it to native.

1. Borrowing the best of the web
to make native better
Brandon Kase & Christina Lee

2. Why are we here?
Let me tell you a story!
about a button
a complicated button

3. Take 1:
boss asks for friend button
we say, 'OK! We'll do it this week!'
we do not finish it in a week
woah...this is very complicated!
boss is less than thrilled

4. Take 2:
boss asks for friend button
we say, 'OK! We'll do it this week!'
we modify our approach
we do not finish it in a week
we finish it in a day!
boss is thrilled
Brandon and Christina still have jobs, hurray!

5. What went wrong
Fetch data before view transitions
Optimistically update components
Send server requests and react to responses

6. Side Effects
Touch global state, make network requests
Side-effects are bad, but necessary

7. Most Common Pitfalls
Mutability
Asynchronicity

8. As developers, we are expected to handle
optimistic updates, server- side rendering,
fetching data before performing route
transitions, and so on... This complexity is
difficult to handle as we’re mixing two
concepts that are very hard for the human
mind to reason about: mutation and
asynchronicity. I call them Mentos and Coke”
Motivation | Redux

10. Luckily, we are not alone

11. Web Allies
The web faces all of these challenges and more
Unlike native; however, it's iteration rate is fast
Not "one" UI framework

12. So what did the web come up with?

13. Ways to manage side-effects
View
State

14. Ways to manage side-effects
Separation of concerns
Mutability and asynchronicity are decoupled

16. Flux

17. Redux
// The current application state (list of todos and chosen filter)
let previousState = {
visibleTodoFilter: 'SHOW_ALL',
todos: [ {
text: 'Read the docs.',
complete: false
} ]
}
// The action being performed (adding a todo)
let action = {
type: 'ADD_TODO',
text: 'Understand the flow.'
}
// Your reducer returns the next application state
let nextState = todoApp(previousState, action)
-- Dan Abaramov's Data Flow example in Redux

18. Cycle.js

19. Cycle.js
inputs = read effects you care about
outputs = write effects you want performed
all application logic is pure!

20. Cycle.js

21. from cycle.js.org

22. Common Traits
Unidirectional and circular data flows
Separation of concerns

23. How do we benefit on Android?

24. Logic is made easy
Implicit data flow of your app becomes explicit.
Immutable views of a mutable world
Debugging is made easy
All edge cases caught at compile-time.
Single source of truth.
Time Travel

25. How can you adopt this
View:
React native
Anvil
State:
Direct port of Redux/Cycle/etc.

26. We focused on State
Don't have to fight Android's UI framework
Easy to introduce

28. Native (kotlin)
Single-Atom-State (like redux)
Pure Functional Reactive (like cycle)
Composable (like cycle)

29. Aside: RxJava

30. Aside: RxJava
Reactive programming is programming with
asynchronous data streams
Andre Staltz
Global event emitter << Event buses << Data stream

31. Aside: RxJava
When we say streams, we mean push-based event streams,
not pull-based infinite list streams

32. Aside: RxJava
What can this look like in practice?
Streams of button taps
Streams of snapshots of changing data
Streams from network responses

33. Aside: RxJava
RxJava
Reactive programming with streams
Tools to combine and transform those streams

34. Aside: RxJava
from RxMarbles

35. Aside: RxJava
from RxMarbles

36. Aside: RxJava
Observable.just(1,2,3)

37. Example

38. Example
0:09 0:14

39. Not just a counter

41. 1. View-Model State
data class /*View-Model*/ State(
val numLikes: Int,
val numComments: Int,
val showNewHighlight: Boolean,
val imgUrl: String?,
val showUndo: Boolean
)

43. 2. View Intentions
// Mode is either tapped or untapped
data class ViewIntentions(
val photos: Observable<Photo>,
val modes: Observable<Mode.Sum>,
val globalReadTs: Observable<Long>
)

45. 3. Model State
// Mode is either tapped or untapped
data class /*Model*/ State(
val photo: Photo?,
val isNew: Boolean,
val mode: Mode.Sum,
): RamState<...>
val initialState = State(
photo = null,
isNew = false,
mode = Mode.untapped
)

46. 4. View Intentions => Model State Changes
State changes? We want functional code. We want
immutability.
Think of a state change as a function
func change(currentState: State) -> State /*
nextState */

47. 4. View Intentions => Model State Changes
val model: (ViewIntentions) -> Observable<(State) -> State> =
{ intentions ->
val modeChanges: Observable<(State) -> State> =
intentions.modes.map{ /*...*/ }
val photoChanges: Observable<(State) -> State> =
intentions.photos.map{ /*...*/ }
val tsChanges: Observable<(State) -> State> =
intentions.globalReadTs.map{ /*...*/ }
Observable.merge(
modeChanges, photoChanges, tsChanges)
}

48. 4. View Intentions => Model State Changes
val modeChanges: Observable<(State) -> State> =
intentions.modes.map{ mode ->
{ state: State -> State(state.photo, state.isNew, mode) }
}

50. 5. Model State => View-Model State
val viewModel: (Observable<Model.State>)->Observable<ViewModel.State> =
{ stateStream ->
stateStream
.map{ state ->
val undoable = state.mode == Mode.tapped
val likes = state.photo?.like_details ?: emptyList()
val comments = state.photo?.comments ?: emptyList()
ViewModel.State(
numLikes = likes.sumBy { it.multiplier },
numComments = comments.count,
showNewHighlight = state.isNew,
imgUrl = /* ... */,
showUndo = /*...*/
)
}
}

52. 6. View-Model => Mutate the View
class PhotoComponent(
viewIntentions: ViewIntentions,
view: PhotoCellView
): StartStopComponent by Component(
driver = /* ... */,
model = /* ... */
)

53. 6. View-Model => Mutate the View
driver = ViewDriver<ViewIntentions, ViewModel.State>(
intention = viewIntentions,
onViewState = { old, state ->
if (old?.imgUrl != state.imgUrl) {
view.setImg(state.imgUrl)
}
/* ... */
}
),

54. 6. View-Model => Mutate the View
model = ViewDriver.makeModel(
initialState = Model.initialState,
createState = Model.createState,
model = Model.model,
viewModel = ViewModel.viewModel
)

55. Stick it in a recycler-view, hook up the side-effects into view
intentions and you're done

57. ViewIntentions
The inputs to your component
The photo, the mode, the tap timestamp
Model
Transform the inputs into state changes
Change mode, change isNew, change photo
ViewModel
Transform model state to view-model state
Extract photo url, like counts, etc
Component
Apply mutations to your view based on your view-model
Use the View-Model to change the underlying Android
view

58. Under the hood
Enforce viewintentions/model/view-model structure
RxJava does heavy-lifting
and a magic scan

59. Under the hood

60. Implementation of Redux in one-line
modelStream.scan(initialState,
{ currentState, transform ->
transform(currentState)
})

61. Bonus
Cycle.js-like side-effect drivers
Configurable model state persistance within state
Auto-start and stop components onPause/onResume

62. Just like cycle
read effects are inputs
write effects are outputs
Effects are decoupled from business logic

63. What does it look like in production?

64. Results: The Good
It wouldn't compile

65. Results: The Good
When it did compile, it worked!

66. Results: The Good
Incredibly modular and composable
LEGO-like plug-and-play

67. Results: The Good
Easy to test (by hand + by unit test) & debug
REALLY EASY
Mocking inputs is trivial
UI component is defined ONLY by it's state

68. Results: The Good
Easy to maintain
Spec change?
(possibly) add an input stream
add another mapin the model

69. Results: The Bad
Ramp up necessary

70. Results: The Bad
Animations are hard
chase or interpolate underlying state?
probably additive animations (google it)

71. Results: The Bad?
Boiler plate
(screenshot of files)
Always the 4 pieces
cyklicrepo has counter example in one file

72. Results: The Surprising
It's actually not slow
No noticeable perf hit

73. Results: The Conclusion

74. Results: The Conclusion
We have more powerful tools now
(i.e. Kotlin + Functional programming)
Let's use them
Question everything

75. Cyklic
Github: bkase/cyklic

76. Thanks
Brandon Kase Christina Lee
bkase@highlig.ht christina@highlig.ht
@bkase_ @runchristinarun
bkase.com
Github: bkase/cyklic