mobx-ruby 将前端联动式编程带入后端, 这是 rubyconf china 2017 李亚飞的主题

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