Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React.rb
Opal + ReactJS
DC Ruby Users Group 2016
Brock Wilcox
awwaiid@thelackthereof.org
JavaScript!
CoffeeScript
ClojureScript
TypeScript
Elm
Flow
Opal
Compiles Ruby-like language to JS
Question #1: Is it Ruby?
Maximally tries to be Ruby
FAQ: How compatible is Opal?
We run opal against rubyspec as our primary testing
setup. We try to make Opal as compatible ...
In Other Words:
Kinda. Mostly. Lots!
Question #2: Is it horribly slow?
Key semantic differences:
· Numbers are JS floats
· Symbol == String, are immutable
· No threads
· No frozen objects
· No pr...
"foo" # => "foo", class String < React::Component::Base
:foo # => "foo", class String < React::Component::Base
42 # => 42,...
# Ruby->JS integration
`window.title` # => window.title
%x{
console.log("opal version is: #{ RUBY_ENGINE_VERSION }");
}
pu...
// JS->Ruby integration
Opal.Foo.$new().$hello()
# One source of slowdown:
# In Ruby, and thus in Opal...
6 * 7
# ...is really...
6.send(:+, 7)
So far... haven't noticed any speed difference.
Question #3: Does it actually work?
(DEMO Opal IRB)
http://fkchang.github.io/opal-irb/index-jq.html
Works For Me!™
Question #4: Can you debug it?
Er... next question please.
(haha. But seriously, during demos we
debug some things without issue!)
Question #5: Oookkkkaayy?
Volt - Client and Server
Clearwater - Client
React.rb - Client
Components
class Greeting < React::Component::Base
def render
div { "Hello!" }
end
end
Document.ready? do
React.render(
React.create_element(Greeting),
Element['#content']
)
end
<html>
<head>
<title>Inline Reactive Ruby Demo</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>...
Nested Components
class GreetApp < React::Component::Base
def render
Greeting {}
end
end
class Greeting < React::Component::Base
def render
...
Component params
class GreetApp < React::Component::Base
def render
Greeting(name: "Friend")
end
end
class Greeting < React::Component::Bas...
Component state
class GreetApp < React::Component::Base
define_state :name { "Friend" }
def render
div {
span { "Name: " }
input(value: st...
Lifecycle events
before_mount
after_mount
before_receive_props
before_update
after_update
before_unmount
class GreetApp < React::Component::Base
define_state :name
before_mount do
state.name! "Friend"
end
def render
div {
span ...
Callbacks for bubbling up
state changes
class GreetApp < React::Component::Base
define_state :name
before_mount do
state.name! "Friend"
end
def render
div {
span ...
(DEMO of inline-reactive-ruby)
Learning App:
White Elephant Gift Selector
(DEMO of WIP app)
BONUS: Feedback Loops, State, and You
Clojure
ClojureScript
Reagent
Figwheel
Amazing workflow!
(DEMO of liveloader)
References:
reactrb.org
inline-reactive-ruby
figwheel
Code for this:
http://tinyurl.com/20160512-DCRUG-React-rb
WIP White E...
React.rb
Opal + ReactJS
DC Ruby Users Group 2016
Brock Wilcox
awwaiid@thelackthereof.org
Upcoming SlideShare
Loading in …5
×

2016-05-12 DCRUG React.rb

2,346 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×