React on rails v6.1 at LA Ruby, November 2016
8 likes2,478 views
The document discusses the integration of React with Rails using the react_on_rails gem, which combines React, Redux, and React Router with Rails views via Webpack and NPM, enabling server-side rendering and efficient client-side interfaces. It emphasizes the flexibility of mixing traditional Rails screens with React components as needed, and outlines the benefits and considerations for setting up this integration, including server rendering, development tools, and asset management. Additionally, it offers guidance for beginners and details on how to set up and manage a React on Rails application effectively.
React on rails v6.1 at LA Ruby, November 2016
- 1. React on Rails React + Redux + React-Router on Rails Views via Webpack/NPM including Server Rendering, v 6.1 github.com/shakacode/react_on_rails by Justin Gordon, [email protected] Presented at LA Ruby, November 10, 2016 1
- 2. Who is Justin? • Palisades High, undergrad at Harvard, MBA from UC Berkeley • Lived in Boston, then San Francisco, then telecommuting from Maui! • Used to blog a lot at http://www.railsonmaui.com • Started hiring and renamed my company to ShakaCode! • We have our own app! https://www.friendsandguests.com 2
- 3. Why add React to a Rails Project? 3
- 4. Task: Build an Interactive Dashboard • Old “Rails Way”: CoffeeScript and jQuery • Client: madroneco.com • JavaScript Frameworks: • Ember.js • AngularJS • React.js 4
- 5. Why React Inside a Rails App? • You need a rich client interface…You decide on React (smart) • Rails only as an API server? Or all Node.js tooling? • Nah! We ❤ Rails for both front and back-end development. In a large app, only some screens need a high fidelity JavaScript UX. • That’s the sweet spot: the ability to mix and match simple Rails screens with React where and when you need it, with ease! • Use a React navigation header with a Rails content area. 5
- 6. Two videos =>Sold on React.js! 6 Pete Hunt: React: Rethinking best practices -- JSConf EU 2013 https://youtu.be/x7cQ3mrcKaY Mountain West JavaScript 2014 - Be Predictable, Not Correct. by Pete Hunt https://youtu.be/h3KksH8gfcQ
- 7. How about the react-rails gem? • react-rails is based on the standard asset pipeline inclusion of assets • Benefits • Simpler for newbies and those used to doing this the Rails way. • Code organization is very much the Rails way, if you like that. (I’d rather run with the JavaScript herd for JavaScript!) 7
- 8. Why not the react-rails gem? • The custom setup via the Rails asset pipeline is just not anything like the native tooling popular in the JavaScript community. • How do you integrate Redux and React-Router? • This is what led me to custom Webpack integration of Rails with React, and eventually React on Rails! • I just wanted to use an npm package called react-bootstrap, and there was no obvious way to do that with react-rails in 2014. • React-rails may support webpack someday; issues: #301 and #448. 8
- 9. 9
- 10. Ruby Gems vs NPM 10
- 11. 11
- 12. 12
- 13. Why create the React on Rails Gem? • Server rendering? • React on Rails Doctrine • Omakase for JavaScript with Ruby on Rails! 13
- 14. React on Rails • React + Redux + React-Router + Webpack + Babel Rock! • Both a Ruby Gem react_on_rails and a NPM Package react-on- rails! • Used by Friends and Guests, Pivotal Tracker, Blink Inc, and others, listed here. • 2167+ ⭐ as of November 10, 2016 14
- 15. React on Rails • All files for the client side under /client • React: rendering • Webpack + Babel + NPM: packages files for the browser (for distribution via the Rails asset pipeline or a server for hot reloading assets) • Favorite Libraries: Redux + React-Router: Key major JS components to use with React, supported by React on Rails • Tooling: ESLint, Flow, CSS-Modules, etc.: Many other cutting edge JavaScript technologies enabled by doing things the JavaScript way, and not the Rails way! 15
- 16. React on Rails Integration with Rails • Production and Tests: Webpack creates JavaScript and CSS assets that are used by the asset pipeline, like any other JS and CSS files. • Development: Can either use statically created JS and CSS files, or special view helpers can grab “hot-reloadable” versions of the JS and CSS from a Webpack Development Server. 16
- 17. 17
- 18. Adding React on Rails to a new Rails app 18 https://youtu.be/_bjScw60FBk
- 19. Code Generated 19 • Demo App and change one line and restart (no hot reloading) • Show generated source in browser • Code walkthrough in RubyMine • Optional: show hot-reloading https://github.com/shakacode/react- webpack-rails-tutorial/
- 20. Getting Started • Read The React on Rails Doctrine and React on Rails, 2000+ 🌟 Stars • Lots of great docs at github.com/shakacode/react_on_rails • Follow a simple tutorial • Study example apps: • Simple, no DB: test/demo app: github.com/shakacode/react_on_rails/tree/ master/spec/dummy • A more complex example at www.reactrails.com with code: https:// github.com/shakacode/react-webpack-rails-tutorial 20
- 23. spylight.com 23
- 24. Want More Help? • ShakaCode can build your app, or augment your engineering team. We’re free to use techniques and code from our own app, www.friendsandguests.com. • ShakaCode offers consulting on React on Rails, from a modestly priced starter pack of usage help to full app development. We’re experts at Rails/ React/Redux/React-Router/Webpack JavaScript apps! • Check out forum.shakacode.com for discussions. We have a Slack room! • Follow @railsonmaui for updates on React on Rails. • Aloha from Justin, [email protected], and the ShakaCode Team! 24
- 25. React on Rails Advanced Topics 25
- 26. Tips for Newbies • Do simplest things first • Initially skip: • Server Rendering • Hot Reloading • CSS Modules 26
- 27. Hot Module Reloading in Rails • Statically created assets always used for production and tests. • Why HMR in development? No page refresh to see changes in JS and Sass code! • How? • ReactOnRails view helpers, env_javascript_include_tag and env_stylesheet_link_tag configure getting assets either from HMR server or regular static files. • Procfile.hot sets ENV value so Rails knows and starts HMR server for assets on port 3500, client/server-rails-hot.js • More details: Hot Reloading of Assets for Rails Development 27
- 28. React on a Rails View via React On Rails • redux_store: Rails helper method, sets up a registered redux store, either in controller or on the view, usable by react components, initialized with props from Rails. If defined on the view and server rendering used, it must go before the react_component call. • react_component: Rails view helper to put a registered component on a Rails View. This component may talk to a registered redux store, or it may create a redux store, getting initialized by props from Rails. • ReactOnRails.register: JavaScript registration of stores and components (actually functions that generate them). 28
- 29. Client Side Rendering • React on Rails installs a post-load JavaScript function (turbolinks compatible) that scans the HTML, using class matchers on hidden HTML elements, and does initialization, passing in props from rails that is placed in a HTML data attribute. 1. Initialize any Redux Stores, via controller helper or view helper with props from Rails. Note the use of <% and NOT <%= for the ERB call: <% redux_store("SharedReduxStore", props: @app_props_server_render %> 2. Render any react components, optionally with props from Rails. Note the use of <%= <%= react_component("HelloWorld", props: @app_props_server_render %> • You don’t need Redux for React on Rails! It’s an option. You also don’t need the redux_store API. You can initialize your redux stores with your components if you have a 1:1 mapping of a redux store to a component. You do this with a “generator function” which is a function that takes props and returns a Redux component attached to a store. 29
- 30. Server Side Rendering • First, don’t try server rendering until client rendering is working without bugs! • Set option prerender: true in the call to react_component • React on Rails Server side rendering of React roughly does: 1. Sets up the JavaScript “context” with your server side webpack build 2. Create code to hydrate stores for the view 3. Create initialization code to server render react component, maybe passing props. 4. Execute this JavaScript on the Rails Server as part of the rendering process 5. Returns a HTML string placed on the Rails view 30
- 31. Shared Redux Stores AppReduxStore Header React Component Body React Component Footer React Component • Many React components communicating with the same redux store • Supports server rendering and react-router 31
- 32. Shared Redux Stores AppReduxStore Header React Component Body React Component Body Rails Partial • Allows a header React component to be paired with either a body react component or a body Rails partial. • Header React component can be dynamic! Notifications indicators! • Why use Rails views? Sometimes Rails is good enough! and WAY less code! Header React Component AppReduxStore 32
- 33. react-router Integration • react-router is supported including server rendering. • If your server rendered router does a redirect, React on Rails handles this by doing a redirect on the client side. • More details are here. 33
- 34. CSS Options 1. Standard Rails: Just use React on Rails for JavaScript and your regular Rails techniques for Sass, images, etc. Advantage: simple 2. Webpack Generated CSS: More complex, but not hard to setup with our examples. Advantages: 1. CSS Modules. This is huge. Once you try this, you won’t go back. What is it? Allows very simple CSS class names with small CSS files right next to your JavaScript. Here’s an example in the react-webpack-rails-tutorial. 2. Hot Reloading. You can change the your Sass files, save, and then you’ll see the browser update, without reloading. For configuration of hot reloading, see Hot Reloading of Assets For Rails Development. 34
- 35. Performance • Turbolinks: Don’t reload the JavaScript and CSS, just the HTML • Fragment caching of Server Rendering: The fast way to generate the HTML is to have it cached! 35
- 36. Running Tests • React on Rails provides a test helper to optimize building the static assets only when needed. • This is a huge convenience! • Be sure to setup config/initializers/react_on_rails.config • Configure rails_helper: RSpec.configure do |config| # Ensure that if we are running js tests, we are using latest webpack assets # This will use the defaults of :js and :server_rendering meta tags ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config) 36