$30 off During Our Annual Pro Sale. View Details »

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

hrishimittal

June 12, 2017
Tweet

Other Decks in Programming

Transcript

  1. How to use React with Rails
    Hrishi Mittal
    Founder and Teacher at Learnetto
    @hrishio
    [email protected]
    Slides at learnetto.com/lrug

    View Slide

  2. What I will cover in this talk
    1. What is React?
    2. Why use React?
    3. How to use React with Rails

    View Slide

  3. 1. What is React?

    View Slide

  4. React is an open-source JavaScript library for
    building User Interfaces
    Released by Facebook in 2013
    https://facebook.github.io/react/

    View Slide

  5. Key concept behind React
    Replace frontend view templates
    with simple reusable components
    written in Javascript

    View Slide

  6. v = f ( d )

    View Slide

  7. View Slide

  8. Let’s look at some React code!

    View Slide

  9. JSX
    State
    Props

    View Slide

  10. 2. Why use React?
    1. Better, maintainable code
    2. Declarative
    3. Fast
    4. Cross-platform

    View Slide

  11. Better, maintainable code
    Avoid spaghetti code with well-structured logical UI components

    View Slide

  12. Declarative
    Tell the computer what to do instead of how to do it
    (like SQL)

    View Slide

  13. Fast
    Virtual DOM diffs allow React to make minimum expensive
    changes to the actual DOM

    View Slide

  14. Cross-platform
    Learn once, write anywhere

    View Slide

  15. React is to the modern frontend,
    as Rails is to the backend
    Simplicity + power + community momentum =

    View Slide

  16. Why learn React?

    View Slide

  17. 3. How to use
    React with Rails

    View Slide

  18. a. react-rails gem

    View Slide

  19. Why react-rails gem?
    Works with Rails 3.2+
    Can use with Rails asset pipeline
    OR
    With Webpack (via Webpacker gem)

    View Slide

  20. How to use it
    Installation creates components directory:
    app/assets/javascripts/components
    Create your React component files with a .jsx extension

    View Slide

  21. Example

    View Slide

  22. Other features
    Server-side rendering
    ES6 and Coffeescript support
    Choosing react builds for your environment
    Command line component generators

    View Slide

  23. When to use it
    Rails < 5.1
    Good for quickly trying out React with Rails
    Don’t want to use Webpack

    View Slide

  24. b. react_on_rails gem
    https://github.com/shakacode/react_on_rails
    Learnetto.com

    View Slide

  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

    View Slide

  26. Installation creates separate /client directory in app root directory
    How to use it

    View Slide

  27. Example

    View Slide

  28. Other features
    Server-side rendering
    In-built Support for React Router and Redux
    Hot Module Replacement
    CSS Modules

    View Slide

  29. Rails < 5.1
    Want to use yarn and Webpack
    Want in-built support for React Router or Redux
    When to use it

    View Slide

  30. c. Using React with Rails 5.1+
    Native support for yarn
    Native support for Webpack via webpacker gem

    View Slide

  31. How to use it
    Installation creates javascript packs directory:
    app/javascript/packs
    Create your React component files with a .jsx extension

    View Slide

  32. Example

    View Slide

  33. Huge leap for JS in Rails

    View Slide

  34. Most advantages of using other
    gems are gone!
    yarn
    Webpack
    Hot reloading
    CSS Modules

    View Slide

  35. Rails 5.1 +
    Highly recommended for Rails devs trying React for the first time
    When to use it

    View Slide

  36. Fatal move for Rails?
    “Disrupt yourself, or be disrupted”
    5.1 could be the gateway drug to Node

    View Slide

  37. d. Using React with a Rails API

    View Slide

  38. Rails API
    Standalone Rails API on the backend
    OR
    Standard Rails app with some API endpoints with JSON output

    View Slide

  39. Frontend React app
    Use Create React App (for easy start with zero setup)
    OR
    Plain React app

    View Slide

  40. Depends on your team
    Makes sense for medium-large companies
    with dedicated teams for backend and frontend

    View Slide

  41. Run React without dependence on
    Ruby or Rails

    View Slide

  42. API for mobile clients

    View Slide

  43. Use Cross Origin Resource Sharing (CORS)
    OR
    proxy requests through a server like nginx.
    Running two apps is more work

    View Slide

  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

    View Slide

  45. What we covered in this talk
    1. What is React?
    2. Why use React?
    3. How to use React with Rails

    View Slide

  46. Thanks!
    Hrishi Mittal
    Founder and Teacher at Learnetto
    @hrishio
    [email protected]
    Slides + Free React on Rails course at
    learnetto.com/lrug

    View Slide