Successfully reported this slideshow.

2016-05-12 DCRUG React.rb

0

Share

Loading in …3
×
1 of 46
1 of 46

2016-05-12 DCRUG React.rb

0

Share

Download to read offline

Presentation on React.rb, which is Opal + ReactJS. I did several interactive demos, but have linked to some resources.

References:

reactrb.org

inline-reactive-ruby

figwheel

Code for this:
http://tinyurl.com/20160512-DCRUG-React-rb

WIP White Elephant App:
https://github.com/awwaiid/reactrb-elephant

Presentation on React.rb, which is Opal + ReactJS. I did several interactive demos, but have linked to some resources.

References:

reactrb.org

inline-reactive-ruby

figwheel

Code for this:
http://tinyurl.com/20160512-DCRUG-React-rb

WIP White Elephant App:
https://github.com/awwaiid/reactrb-elephant

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

2016-05-12 DCRUG React.rb

  1. 1. React.rb Opal + ReactJS DC Ruby Users Group 2016 Brock Wilcox awwaiid@thelackthereof.org
  2. 2. JavaScript!
  3. 3. CoffeeScript ClojureScript TypeScript Elm Flow
  4. 4. Opal
  5. 5. Compiles Ruby-like language to JS
  6. 6. Question #1: Is it Ruby?
  7. 7. Maximally tries to be Ruby
  8. 8. FAQ: How compatible is Opal? We run opal against rubyspec as our primary testing setup. We try to make Opal as compatible as possible, whilst also taking into account restrictions of JavaScript when applicable. Opal supports the majority of ruby syntax features, as well as a very large part of the corelib implementation. We support method_missing, modules, classes, instance_exec, blocks, procs and lots lots more. Opal can compile and run Rspec unmodified, as well as self hosting the compiler at runtime.
  9. 9. In Other Words: Kinda. Mostly. Lots!
  10. 10. Question #2: Is it horribly slow?
  11. 11. Key semantic differences: · Numbers are JS floats · Symbol == String, are immutable · No threads · No frozen objects · No private/protected
  12. 12. "foo" # => "foo", class String < React::Component::Base :foo # => "foo", class String < React::Component::Base 42 # => 42, class Numeric < React::Component::Base 3.141 # => 3.142, class Numeric < React::Component::Base 5.to_r # Error: undefined method (next ver!)
  13. 13. # Ruby->JS integration `window.title` # => window.title %x{ console.log("opal version is: #{ RUBY_ENGINE_VERSION }"); } puts "opal version is: #{ RUBY_ENGINE_VERSION }"
  14. 14. // JS->Ruby integration Opal.Foo.$new().$hello()
  15. 15. # One source of slowdown: # In Ruby, and thus in Opal... 6 * 7 # ...is really... 6.send(:+, 7)
  16. 16. So far... haven't noticed any speed difference.
  17. 17. Question #3: Does it actually work?
  18. 18. (DEMO Opal IRB) http://fkchang.github.io/opal-irb/index-jq.html
  19. 19. Works For Me!™
  20. 20. Question #4: Can you debug it?
  21. 21. Er... next question please. (haha. But seriously, during demos we debug some things without issue!)
  22. 22. Question #5: Oookkkkaayy?
  23. 23. Volt - Client and Server Clearwater - Client
  24. 24. React.rb - Client
  25. 25. Components
  26. 26. class Greeting < React::Component::Base def render div { "Hello!" } end end
  27. 27. Document.ready? do React.render( React.create_element(Greeting), Element['#content'] ) end
  28. 28. <html> <head> <title>Inline Reactive Ruby Demo</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="inline-reactive-ruby.js"></script> <!-- scripts can be remote or inline --> <script type="text/ruby"> puts "Hello!" </script> <!-- scripts can be remote or inline --> <script type="text/ruby" src="hello.rb"></script> </head> <body> <div id="content"></div> </body> </html>
  29. 29. Nested Components
  30. 30. class GreetApp < React::Component::Base def render Greeting {} end end class Greeting < React::Component::Base def render div { "Hello!" } end end
  31. 31. Component params
  32. 32. class GreetApp < React::Component::Base def render Greeting(name: "Friend") end end class Greeting < React::Component::Base param :name def render div { "Hello, #{params.name}!" } end end
  33. 33. Component state
  34. 34. class GreetApp < React::Component::Base define_state :name { "Friend" } def render div { span { "Name: " } input(value: state.name).on(:change) { |e| state.name! e.target.value } Greeting(name: state.name) } end end class Greeting < React::Component::Base param :name def render div { "Hello, #{params.name}!" } end end
  35. 35. Lifecycle events before_mount after_mount before_receive_props before_update after_update before_unmount
  36. 36. class GreetApp < React::Component::Base define_state :name before_mount do state.name! "Friend" end def render div { span { "Name: " } input(value: state.name).on(:change) { |e| state.name! e.target.value } Greeting(name: state.name) } end end class Greeting < React::Component::Base param :name def render div { "Hello, #{params.name}!" } end end
  37. 37. Callbacks for bubbling up state changes
  38. 38. class GreetApp < React::Component::Base define_state :name before_mount do state.name! "Friend" end def render div { span { "Name: " } input(value: state.name).on(:change) { |e| state.name! e.target.value } Greeting(name: state.name, clear_name: lambda { state.name! "" }) } end end class Greeting < React::Component::Base param :name param :clear_name, type: Proc def render div { span { "Hello, #{params.name}!" } a(href: '#') { "CLEAR" }.on(:click) { params.clear_name } } end end
  39. 39. (DEMO of inline-reactive-ruby)
  40. 40. Learning App: White Elephant Gift Selector (DEMO of WIP app)
  41. 41. BONUS: Feedback Loops, State, and You
  42. 42. Clojure ClojureScript Reagent Figwheel
  43. 43. Amazing workflow!
  44. 44. (DEMO of liveloader)
  45. 45. References: reactrb.org inline-reactive-ruby figwheel Code for this: http://tinyurl.com/20160512-DCRUG-React-rb WIP White Elephant App: https://github.com/awwaiid/reactrb-elephant
  46. 46. React.rb Opal + ReactJS DC Ruby Users Group 2016 Brock Wilcox awwaiid@thelackthereof.org

×