Slide 1
Slide 1 text
“Predictable state container”
and
DataBinding
Masayuki IZUMI - @izumin5210
potatotips #23
Slide 2
Slide 2 text
> Masayuki IZUMI a.k.a. @izumin5210
> Rekimoto Lab. at the University of Tokyo
> Wantedly, Inc.
> Rubyist / Androider / {Java,Type}Scripter
Slide 3
Slide 3 text
Ruby
JavaScript
Android
Design
Slide 4
Slide 4 text
How do you feel
“Front-end JavaScript” ?
Slide 5
Slide 5 text
Trends of JavaScript libraries (2011.11-2015.11, worldwide)
Slide 6
Slide 6 text
Trends of JavaScript libraries (2011.11-2015.11, Japan)
Slide 7
Slide 7 text
Trends of JavaScript libraries (2011.11-2015.11, Japan)
* http://blog.livedoor.jp/sasata299/archives/51966228.html
Slide 8
Slide 8 text
Trends of JavaScript libraries (2011.11-2015.11, Japan)
* http://qiita.com/mizchi/items/4d25bc26def1719d52e6
Slide 9
Slide 9 text
Trends of JavaScript libraries (2011.11-2015.11, Japan)
\ jQuery /
Slide 10
Slide 10 text
TodoMVC
Slide 11
Slide 11 text
TodoMVC
Slide 12
Slide 12 text
How do you feel
“Front-end JavaScript” ?
Slide 13
Slide 13 text
How do you feel
“Front-end JavaScript” ?
\ jQuery has dead ! /
Slide 14
Slide 14 text
How do you feel
“Front-end JavaScript” ?
\ jQuery has dead ! /
\ Backbone has dead ! /
Slide 15
Slide 15 text
How do you feel
“Front-end JavaScript” ?
\ jQuery has dead ! /
\ Backbone has dead ! /
\ AngularJS has dead ! /
Slide 16
Slide 16 text
How do you feel
“Front-end JavaScript” ?
\ jQuery has dead ! /
\ Backbone has dead ! /
\ AngularJS has dead ! /
\ This is generation Flux ! /
Slide 17
Slide 17 text
How do you feel
“Front-end JavaScript” ?
\ jQuery has dead ! /
\ Backbone has dead ! /
\ AngularJS has dead ! /
\ This is generation Flux ! /
\ What’s the Flux ?! Let’s Redux ! /
Slide 18
Slide 18 text
How do you feel
“Front-end JavaScript” ?
\ jQuery has dead ! /
\ Backbone has dead ! /
\ AngularJS has dead ! /
\ This is generation Flux ! /
\ What’s the Flux ?! Let’s Redux ! /
Slide 19
Slide 19 text
In the meantime,
the latest and greatest JavaScript framework
comes around every sixteen minutes.
- A JS framework on every table *
* http://blog.livedoor.jp/sasata299/archives/51966228.html
Slide 20
Slide 20 text
* To build user interface
* To handler user interaction
* To manage application states
* ...
Common purpose of JS and Android Java
Slide 21
Slide 21 text
* To build user interface
* To handler user interaction
* To manage application states
* ...
Common purpose of JS and Android Java
Try to introduce
“Exprosive grouth of JavaScript”
into Android Java
Slide 22
Slide 22 text
* Focus on:
- “How to handle user interaction”
- “How to manage application states”
In this talk...
Slide 23
Slide 23 text
* MVC (Model - View - Controller)
Applicatoin architecture on Android
Slide 24
Slide 24 text
* MVC (Model - View - Controller)
> Android では MVC より MVP の方がいいかもしれない
> 実は Android では MVC の採用は結構つらいものがあります **
Applicatoin architecture on Android
* http://konifar.hatenablog.com/entry/2015/04/17/010606
** [ Android ] ‒ これからの「設計」の話をしよう http://tech.recruit-mp.co.jp/mobile/android-architecture/
Slide 25
Slide 25 text
* MVC (Model - View - Controller)
> Android では MVC より MVP の方がいいかもしれない
> 実は Android では MVC の採用は結構つらいものがあります **
* MVP (Model - View - Presenter)
* The Clean Architecture
Applicatoin architecture on Android
* http://konifar.hatenablog.com/entry/2015/04/17/010606
** [ Android ] ‒ これからの「設計」の話をしよう http://tech.recruit-mp.co.jp/mobile/android-architecture/
Slide 26
Slide 26 text
* MVW (Model - View - Whatever)
e.g. AngularJS 1.x, Backbone.js, etc.
Applicatoin architecture on JavaScript
Slide 27
Slide 27 text
* MVW (Model - View - Whatever)
e.g. AngularJS 1.x, Backbone.js, etc.
Facebook:
“leading to a tangled weave of data flow and unpredictable results”
Applicatoin architecture on JavaScript
Slide 28
Slide 28 text
* MVW (Model - View - Whatever)
e.g. AngularJS 1.x, Backbone.js, etc.
Facebook: leading to a tangled weave of data flow and unpredictable results
* Flux
- “Flux eschews MVC in favor of a unidirectional data flow” *
* Redux
- “a predictable state container for JavaScript apps.” **
Applicatoin architecture on JavaScript
* https://facebook.github.io/flux/
** http://redux.js.org/
Slide 29
Slide 29 text
* MVW (Model - View - Whatever)
e.g. AngularJS 1.x, Backbone.js, etc.
Facebook: leading to a tangled weave of data flow and unpredictable results
* Flux
- “Flux eschews MVC in favor of a unidirectional data flow” *
* Redux
- “a predictable state container for JavaScript apps.” **
Applicatoin architecture on JavaScript
* https://facebook.github.io/flux/
** http://redux.js.org/
Slide 30
Slide 30 text
Redux - rackt/redux/
https://speakerdeck.com/axross/introduction-to-redux
Slide 31
Slide 31 text
Redux - rackt/redux/
https://speakerdeck.com/axross/introduction-to-redux
Slide 32
Slide 32 text
Redux for Android
Droidux
http://github.com/izumin5210/Droidux
Slide 33
Slide 33 text
notify
dispatch action
event
store
Slide 34
Slide 34 text
Sample code
TodoMVC with Undo
https://github.com/izumin5210/Droidux/tree/master/examples/todos-with-undo
Slide 35
Slide 35 text
Movie
upload later...
Slide 36
Slide 36 text
* Try to introduce “Explosive growth of JavaScript”
into our world - Android Java:D
* Implement Droidux : rackt/redux for Android
- Undirectional data flow
- Single state tree
- Bindable states to views using DataBinding
- Implement redo/undo easily
- Try to use Rx + DataBinding + predictable data container
* More at DroidKaigi 2016 !!!!!!!!!!!!
- when my CFP is accepted...
Conclusion
Slide 37
Slide 37 text
“Predictable state container”
and
DataBinding
Masayuki IZUMI - @izumin5210
potatotips #23