How to use React with Rails - Talk at LRUG June 2017

How to use React with Rails - Talk at LRUG June 2017

A Talk by Hrishi Mittal on a few different ways of using React with Ruby on Rails. More details at - https://learnetto.com/lrug

4aaf25a98ce0adc439debbedb02571df?s=128

hrishimittal

June 12, 2017
Tweet

Transcript

  1. How to use React with Rails Hrishi Mittal Founder and

    Teacher at Learnetto @hrishio hrishi@learnetto.com Slides at learnetto.com/lrug
  2. What I will cover in this talk 1. What is

    React? 2. Why use React? 3. How to use React with Rails
  3. 1. What is React?

  4. React is an open-source JavaScript library for building User Interfaces

    Released by Facebook in 2013 https://facebook.github.io/react/
  5. Key concept behind React Replace frontend view templates with simple

    reusable components written in Javascript
  6. v = f ( d )

  7. None
  8. Let’s look at some React code!

  9. JSX State Props

  10. 2. Why use React? 1. Better, maintainable code 2. Declarative

    3. Fast 4. Cross-platform
  11. Better, maintainable code Avoid spaghetti code with well-structured logical UI

    components
  12. Declarative Tell the computer what to do instead of how

    to do it (like SQL)
  13. Fast Virtual DOM diffs allow React to make minimum expensive

    changes to the actual DOM
  14. Cross-platform Learn once, write anywhere

  15. React is to the modern frontend, as Rails is to

    the backend Simplicity + power + community momentum =
  16. Why learn React?

  17. 3. How to use React with Rails

  18. a. react-rails gem

  19. Why react-rails gem? Works with Rails 3.2+ Can use with

    Rails asset pipeline OR With Webpack (via Webpacker gem)
  20. How to use it Installation creates components directory: app/assets/javascripts/components Create

    your React component files with a .jsx extension
  21. Example

  22. Other features Server-side rendering ES6 and Coffeescript support Choosing react

    builds for your environment Command line component generators
  23. When to use it Rails < 5.1 Good for quickly

    trying out React with Rails Don’t want to use Webpack
  24. b. react_on_rails gem https://github.com/shakacode/react_on_rails Learnetto.com

  25. Why react_on_rails gem? Works with Rails 4.2+ (old versions support

    3.2+) Native Javascript tooling by default Webpack, yarn, ES6 Doesn’t rely completely on the Rails asset pipeline No jQuery dependence
  26. Installation creates separate /client directory in app root directory How

    to use it
  27. Example

  28. Other features Server-side rendering In-built Support for React Router and

    Redux Hot Module Replacement CSS Modules
  29. Rails < 5.1 Want to use yarn and Webpack Want

    in-built support for React Router or Redux When to use it
  30. c. Using React with Rails 5.1+ Native support for yarn

    Native support for Webpack via webpacker gem
  31. How to use it Installation creates javascript packs directory: app/javascript/packs

    Create your React component files with a .jsx extension
  32. Example

  33. Huge leap for JS in Rails

  34. Most advantages of using other gems are gone! yarn Webpack

    Hot reloading CSS Modules
  35. Rails 5.1 + Highly recommended for Rails devs trying React

    for the first time When to use it
  36. Fatal move for Rails? “Disrupt yourself, or be disrupted” 5.1

    could be the gateway drug to Node
  37. d. Using React with a Rails API

  38. Rails API Standalone Rails API on the backend OR Standard

    Rails app with some API endpoints with JSON output
  39. Frontend React app Use Create React App (for easy start

    with zero setup) OR Plain React app
  40. Depends on your team Makes sense for medium-large companies with

    dedicated teams for backend and frontend
  41. Run React without dependence on Ruby or Rails

  42. API for mobile clients

  43. Use Cross Origin Resource Sharing (CORS) OR proxy requests through

    a server like nginx. Running two apps is more work
  44. If you have/want dedicated teams for frontend and backend If

    you have tested React and are sure you want to use it If you don’t mind overhead of running two apps When to use it
  45. What we covered in this talk 1. What is React?

    2. Why use React? 3. How to use React with Rails
  46. Thanks! Hrishi Mittal Founder and Teacher at Learnetto @hrishio hrishi@learnetto.com

    Slides + Free React on Rails course at learnetto.com/lrug