Exploring the possibilities of Unidirectional Data Flow Architectures on Android

Unidirectional data flow is a simple architecture used to design applications that are easy to reason about. It opens the doors to interesting possibilities. Namely, time travel debugging, improved testing, and the ability to deterministically reproduce bugs..

We’ll start with a tour of existing approaches and demo a current web implementation. Then, we’ll discuss the history. Afterwards, we’ll introduce a Java library for writing Android apps and present a demo with code examples. Finally, we’ll present a few more interesting avenues of exploration: Hot Reloading, better bug reporting, etc.

Transcript

1. Exploring the possibilities of Unidirectional Data Flow Architectures on Android Brian Egan & Guillaume Lung November 10, 2015
2. Danger: Fun & Experimental! We don’t actually use any of this on the SoundCloud Android App.
4. What’s happening? UI Playback User Interaction ZOMG
5. Visualize the state change! State UI State UI State UI State UI
6. Demo Redux, Brian!
7. DX
8. The Basics
9. State UI Unidirectional Flow Actions / Intent f( )
10. Global State State Immutable Data Structures
11. A simple counter app. One example to try them all.
17. Plan 1. State with Redux 2. Components with Elm 3. RX with Cycle
18. Redux
19. Data Flow in Redux model reduce model action , state change notification Subscriber
28. State & UI Over time State UI State UI State UI State UI
29. Time Travel! State UI State UI State UI State UI
30. Time Travel! State UI State UI State UI State UI
31. Time Travel! State UI State UI State UI State UI
32. Time Travel! State UI State UI State UI State UI
33. Testing!
34. Elm Architecture
35. Elm Architecture update model view
36. Elm Architecture update model view UI
37. Elm Architecture update model view UI action
38. Elm Architecture model update model view UI action ,
44. Composable action model update view
45. Components action model update view
46. Compose interfaces with Components!
47. Open / Closed principle
48. update model view View Data Structure Views become testable
49. Cycle.js
50. Cycle driver main
51. View View View Cycle driver main Itent Itent Itent
59. Complex.
60. Render anywhere! State Android State iOS State web State Server
61. Now for the Android Demo! A TODO list with redux and debug tools
62. Wrapping up
63. State UI Unidirectional Flow Actions f( )
64. Composable UI Time Travel Debugging Testing Render anywhere Fun to learn :) Benefits
65. Bug reports, Databases, Hot Reloading* More possibilities
66. Memory Footprint, UI Rendering Speed Unsolved
67. Should I start writing my production apps like this?
68. NO
69. Should we continue to experiment and improve our architectures?
70. YES
71. Pleasure in development
72. Thank you. Brian Egan & Guillaume Lung December 10, 2015
73. • This presentation examples. • Unidirectional use interface architectures by André Staltz • Facebook flux documentation. • Presentation of Redux by Dan Abramov at Go Reactive. • Presentation of Cycle.js by André Staltz at Go Reactive • ELMLang and the ELM-architecture tutorial • Redux-Java • Kotlin • RxBindings • The SoundCloud android app. architecture by Matthias Käppler at Goto Resources