Slides for OCRuby Jan 28 2016 meeting

1. REACT.RB - ALL THE POWER OF
REACT.JS WITH ALL THE JOY OF
RUBY
FORREST CHANG
FKCHANG2000@YAHOO.COM

2. WHO'S A WEB DEVELOPER?

3. WHO USES RAILS?

4. WHO KNOWS WHAT REACT IS?

5. REACT JS
Open sourced in 2014
the "It" framework of 2015 - caught up to be top 2 framework in 2 years
Huge adoption and mindshare, community
Other frameworks adopted React features in response (ember wrote a
virtual DOM due to a demo)

6. REACT SUMMARY
https://facebook.github.io/react/blog/2013/06/05/why-react.html
React isn't an MVC framework. React is a library for
building composable user interfaces. It encourages the
creation of reusable UI components which present data
that changes over time.

7. WHY REACT?
Component based - reusable tree of components
Declarative - easy to understand
Fast - via Virtual DOM
Small - library, small API
Unidirectional data flow
Multiple render destinations, web, mobile, text
Testable
Isomorphic/Universal Javascript, domain logic, server/client rendered
views
Server rendered - UX performance, SEO
Simple

8. IN SHORT
A typical write up of a React adoption
https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-
react/
In the end, React's biggest benefits are summed up with:
Declarative → Predictable → Confidence

9. WHO'S USING REACT?
Everyone!

10. WHO USES REACT
Facebook
Instagram
HipChat
Netflix
Khan Academy
Twitter - Fabric
HootSuite
new version of Yahoo mail to be in react
https://github.com/facebook/react/wiki/Sites-Using-React
http://react.careers/

11. CONTROVERSIAL JSX
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
}
});
JSX, "HTML" in your javascript
Actually good, Many mistake separation of technologies with separation of
concerns
Way more concise than pure JS way of writing
Most people rave about it after they get used to it

12. PRETTY AWESOME
Maintainability
Simplicity, dedicated focus of React, declarative
Reuseable testable components
Unidirectional data flow simplfies code, DRY's data flow
Performance, Virtual DOM minimized costly DOM changes
Universal Javascript, less code, less duplication

13. BUT
Javascript!
Javascript!!
Additional learning curve for new backends for full benefits, esp. for
Rubyists
Javascript fatigue – too many choices, too much change
https://medium.com/@ericclemmons/javascript-fatigue-
48d4011b6fc4#.g5zjszug3

14. REACT RESOURCES
Official page
Guide to the overwhelming ecosystem
Steps to learn
Best practices summarized
For the jQuery mind
http://facebook.github.io/react/
https://github.com/petehunt/react-howto
http://developer.telerik.com/featured/5-steps-for-learning-react-
application-development
https://camjackson.net/post/9-things-every-reactjs-beginner-should-
know
https://www.codementor.io/reactjs/tutorial/react-components-from-a-
jquery-programmer-background

15. UNIVERSAL (ISOMORPHIC) JAVASCRIPT
Was isomorphic - Universal defined
Same code for front and backend
One language, no context switches
Javascript only, unless
you use Opal
https://medium.com/@mjackson/universal-javascript-
4761051b7ae9#.rxrgqe5wb

16. UNIVERSAL RUBY?
enabled by Opal (Ruby to JS transpiler and runtime)
single language - Ruby on both ends
shared views - Erb, Haml, and of course..

17. REACT.RB

18. WHAT IS REACT.RB
Opal wrapper to React.js
Best of both worlds?
Leverages the Ruby based backend ecosystem you already know- esp.
Rails
Leverages full React.js ecosystem, but in Ruby

19. BRIEF OVERVIEW
Too much to cover (much to React.js so much correspondingly for React.rb)
Overview now, more details in subsequent talks
All Ruby DSL
Rails integration
Misc

20. QUICK CODE COMPARISON
Instead of this
var HelloMessage = React.createClass({
propTypes: {
name: React.PropTypes.string
}
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
Write this
class HelloMessage < React::Component::Base
param :visitor, type: String
def render
div do
"Hello #{params.name}"
end
end
end

21. CREATING A COMPONENT
# can inherit
class MyComponent < React::Component::Base
def render
# whatever
end
end
# or include Mixin
class MyComponent
include React::Component
def render
# whatever
end
end

22. EVERY COMPONENT HAS A RENDER METHOD
class MyComponent < React::Component::Base
def render
div.big_div do
h1 { 'Eye Catching Headline'}
p { 'Meaningful paragraph' }
end
end
end

23. RUBY DSL INSTEAD OF JSX
Resembles haml/slim/markaby
haml type classes, maps _ to camel case
attributes via hash
Just Ruby
more powerful than JSX which can't express iteration for example
less jarring than than mix of languages and syntaxes

24. RUBY DSL PATTERN
all HTML elements have a component that matches it's name
note that p is para since Ruby/Opal has it's own p() method
tag_name(attribute1 => value1, attribute2 => value2 ...) do
...nested tags...
end

25. JARRING JSX
import React, { Component } from 'react';
import Select from './Select';
import _ from 'lodash';
export default class App extends Component {
render() {
return (
<div className="container">
<ol>
{_.times(3, i =>
<li key={i}>
<Select onSelect={this.onSelect}>
<option value="1">bacon</option>
<option value="2">cheez</option>
</Select>
</li>
)}
</ol>
</div>
);
}
}

26. PARAMS
called props in react.js, params picked to be more familar to Rails
programmers
They are the "parameters" passed into a component
Initial config values
Immmutable
Can be declared, can be typed

27. DECLARING PARAMS
class IndividualParams < React::Component::Base
param :items, type: [String]
param :an_optional_param, default: "hello", type: String, allow_nil: true
# ...
end
class ParamsBlock < React::Component::Base
params do
requires :foo
requires :lorem, type: Lorem
optional :bar, type: String
end
# ...
end

28. ACCESSING PARAMS
params.items.each do |item|
# ...
end

29. STATE
same as react.js state
can change values
when changed, component re renders

30. DEFINING INITIAL STATE VALUES
Javascript
var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
...
Opal
class CommentBox
include React::Component
define_state data: [] # The form define_state :data will initialize to nil
# rest of component
end

31. ACCESSING
state.data # reader
state.data! [1, 2, 3] # writer, triggers rerender

32. REACT LIFECYCLE METHODS
React Life Cycle Method Ruby Macro Name Called When
componentWillMount before_mount Invoked once, both on the client and server,
immediately before the initial rendering occurs
componentDidMount after_mount Invoked once, only on the client. immediately after
the initial rendering occurs.
componentWillReceiveProps before_receive_props Invoked when a component is receiving new props.
This method is not called for the initial render.
componentWillUpdate before_update Invoked immediately before rendering when new
props or state are being received. This method is not
called for the initial render.
componentDidUpdate after_update Invoked immediately after the component's updates
are flushed to the DOM. This method is not called
for the initial render.
componentWillUnmount before_unmount Invoked immediately before a component is
unmounted from the DOM. Perform any necessary
cleanup in this method.

33. GETTING STARTED
No setup required - opal-playground
Rails, can setup manual, new Rails generator gem to be integrated into
react.rb in the future
Hello World

34. WHY REACT.RB > REACT JS
One language, more so than React.js/JSX
Ruby > Javascript, DSL cleaner
No , tool churn, you get Ruby tools
Build on top of rails
JS fatigue

35. REACT.RB REFERENCES
Github project:
Project Page:
Wiki (eventually probably all on project page):
Gitter (the place to ask):
Stack Overflow:
My blog, lots of Opal, will have lots of React
https://github.com/zetachang/react.rb
http://reactrb.org/
https://github.com/zetachang/react.rb/wiki
https://gitter.im/zetachang/react.rb
http://stackoverflow.com/questions/tagged/react.rb
https://funkworks.blogspot.com/

36. RAILS INTEGRATION
Opal integrations via opal-rails
render_component in controler gives serverside rendering
Blog post on geting started
Could be it's own talk
http://funkworks.blogspot.com/2016/01/getting-started-with-reactrb-
and-ruby.html

37. WEBPACK HOOK INS
First class Javascript
Full power of npm available
Could be it's own talk

38. SOME DEMOS
react.rb chat tutorial: live:
partial dbmon port
current Rails app
http://reactrb.org/docs/tutorial.html
http://reactrb.org/chatrb.html
http://git.io/v8Sm7

39. THAT'S IT FOR NOW
lots of material/topics to cover
follow up talks
Blog post