Mobx-ruby allows using the Mobx state management library in Ruby projects. It introduces observable values and computed values that automatically update dependent code. The document provides examples of using Mobx features like autorun, transactions, and integrating Mobx into Rails applications through caching, callbacks, and ActionCable. Mobx-ruby aims to simplify state management in Ruby similarly to how Mobx and related libraries work in other languages like React, Vue, and Angular.

1. mobx-ruby
ruby
ruby conf 2017

2. Ruby
80% &CTO
,

3. 80%
•
• RubyConf China
• (DJI) Ruby
•

4. • spreadsheet
• web
• mobx-ruby
• mobx-ruby
•
•
• callback
• + ( , )

5. mobx

6. spreadsheets
an example

7. AngularJS
•
• <=> UI
• ( scope apply & digest)
•
• zone.js( )

8. ReactJS
•
• , UI
• DOM, diff UI

9. VueJS
• mobx
• data: {}
• , UI

10. Ruby mobx

11. mobx
• ( observable value )
• ( computed value )
• ( autorun )

12. mobx-ruby

13. # basic.rb
require 'mobx'
class A
include Mobx::Extension
observable :foo, 1
end
a = A.new
## Autorun
runner = Mobx.autorun do
puts "Hello: #{a.foo}"
end
a.foo = 2
# > Hello: 2
a.foo = 3
# > Hello: 3

15. # ai.rb
require 'mobx'
require 'byebug'
class A
include Mobx::Extension
observable :foo, 1
observable :bar, 2
observable :nocare, 10
end
a = A.new
runner = Mobx.autorun do
puts "Hello foo: #{a.foo} bar: #{a.bar}"
end
# > Hello foo: 1 bar: 2
a.foo = 2
# > Hello foo: 2 bar: 2
a.bar = 4
# > Hello foo: 2 bar: 4
a.nocare = 10
#

17. # transaction.rb
require 'mobx'
require 'byebug'
class A
include Mobx::Extension
observable :foo, 1
end
a = A.new
runner = Mobx.autorun do
puts "Hello: #{a.foo}"
end
# > Hello: 1
Mobx.transaction do
a.foo = 2
a.foo = 3
a.foo = 4
end
# > Hello: 4

18. mobx-ruby (
)

19. mobx-ruby
•
•
•

20. • class Observable
•
•
• class Reaction
•
• class Autorun
•
• ,

21. • Observable
• Autorun , Observable
•
• Observable ,

22. • transaction
• ,
• , autorun

23. • mobx
• ,
• redux
• ,
• rxjs
• , :)

24. redux
3 ~ 15

25. •
• actioncable opal , rails
‘meteor’

26. # This is just a simple example for actioncable server
require 'mobx'
class Todolist
include Mobx::Extension
observable :todos, []
def todo_length
todos.length
end
end
todolist = Todolist.new
runner = Mobx.autorun do
ActionCable.broadcast 'todo_channel', { todos:
todolist.todos, length: todolist.todo_length }
end
todolist.todos << ' '
# > todo_channel
todolist.todos << ' '
# > todo_channel
todolist.todos << ' '
# > todo_channel

27. • callback
•

28. # This is just a simple example for callback
require 'mobx'
class ModelA
include Mobx::Extension
observable :a, 1
end
class ModelB
def initialize
@b = nil
end
end
a = ModelA.new
b = ModelB.new
Mobx.autorun do
b.b = a.a + 1
b.save!
end
a.a = 2
# b a , callback

29. • Rails
•

30. # This is just a simple example for redis cache
require 'mobx'
class CacheListener
include Mobx::Extension
observable :avatar, '/uploads/xx.jpg'
end
cache = CacheListener.new
runner = Mobx.autorun do
Redis.set(:avatar_key, cache_listener.avatar)
end
cache.avatar = '/uploads/new_avatar.jpg'
# > Cache

31. mobx-ruby
• ( ) -
• ( )
• ( )
• ( ) -
• ( TODO )
• ( TODO )
• ( TODO )
• ( TODO )
• 2018 1

32. mobx-ruby
• RxJava( ) 27k
•
•
• Ruby

33. lyfi2003
: mobx

35. • rails-template
• github: 80percent/rails-template
• rails5.x
• : , ssl, backup, ,

36. • wechat-weapp-mobx
• github: 80percent/wechat-weapp-mobx
•

37. RubyChina ID: lyfi2003