react.js for rails developers
TRANSCRIPT
React.js for Rails Developers
Marcin Grzywaczewski Arkency
Problems
• You need to add dynamic elements to your Rails application.
• You want to create Rails application in a single page app fashion.
• You need to make an user experience as similar as possible to their previous experience with desktop apps.
Technical Problems
• To do it, you need some kind of JavaScript flavor
• Many Rails developers don’t like JavaScript
• Writing a good, maintainable client-side code is hard (is it?)
Rails View Layer Tools
• Templates
• Views (ERB, Haml)
• View partials & helpers
• jQuery
• Turbolinks
Transitioning into dynamic UI - stages
• No JavaScript
• jQuery explosion
• Page/Widget Objects
• Single Page Application
Page/Widget objects
• You create an abstraction over a logical piece of your user interface
• You can unit test it, since it is a structured part of the code
Question time
Hello, React.js!
• A library made by Facebook
• Only for user interface (V in MVC)
• Easy to learn
• Not only in the browser!
• Composability
Composability
• React.js operates on the concept of components
• You create components by composing smaller components
• Ease of testing, ease of development
• Components are Page/Widget objects
Explaining React.js
Rails Views vs. React.js
• Templates
• Views (ERB, Haml)
• View partials
• jQuery
• Turbolinks
• ReactDOM.render
• JSX
• Components
• nothing
• setState
ReactDOM.render• To render a React component, you use the
following call: ReactDOM.render(what, where)
• what - a React component
• where - a real DOM node
• Equivalent of yield in Rails templates.
JSX
• React.js ships with a syntactic sugar to define how the component looks like
• It is very similar to HTML and it allows JavaScript injection (think ERB)
• For developers and designers convenience
React Components• Defines a page/widget. Similar to Rails partial +
helpers attached
• Must have a render() method which renders the JSX tree based on state and properties
• Properties - equivalent to locals in Rails partials
• State - a special piece of data which forces re-render if changed
setState• There can be a special piece of data called state in
every React component
• Calling setState updates the component - the render() method is called with new state again
• Under the hood, React creates a minimal set of changes needed to be done
• It is what makes React components dynamic!
• It's similar to Turbolinks
Integration with Rails
• react-rails (https://github.com/reactjs/react-rails)
• Browserify & Rails (http://blog.arkency.com/2015/04/bring-commonjs-to-your-asset-pipeline/)
• custom integration with e.g. Webpack (what is Webpack?: http://reactkungfu.com/2015/07/the-hitchhikers-guide-to-modern-javascript-tooling/)
Question time
Bonus• We have two books about React.js and six
books in total:
• React.js by Example - how to create cool widgets you love and use using React.js
• Rails meets React.js - learning all needed concepts of React.js with CoffeeScript and Rails.
Use JETBRAINS_REACT_WEBINAR to get 35% discount for all our books! Coupon valid to 1st of April.
http://bit.ly/buy-rails-meets-reactjs
http://bit.ly/buy-reactjs-by-example
Materials:• Scaffold to React.js with full commit history:
https://github.com/arkency/scaffold-to-react/commits/newest-20160324
• React.js Koans - a set of exercises for beginners: https://github.com/arkency/reactjs_koans (over 2500 stars on GitHub!)
• React Kung Fu blog: http://reactkungfu.com
• Showcase of examples you can find in React.js by Example: https://reactkungfu.com/showcases/
Hey, ask us anything!
• Twitter: @Killavus @voter101 @andrzejkrzywda @pankowecki
• Arkency Twitter: @arkency
• React Kung Fu Twitter: @reactkungfu
• Or mail: [email protected]
Thank you!