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

Transcript

1. How to use React with Rails
   Hrishi Mittal
   Founder and Teacher at Learnetto
   @hrishio
   hrishi@learnetto.com
   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
    hrishi@learnetto.com
    Slides + Free React on Rails course at
    learnetto.com/lrug
    

    View Slide