Get started with Component-Based Rails @ RailsConf 2015

Component-based Rails helps you regain control over your sprawling Rails application. It helps you structure your new Rails application in a way that it will stay more manageable longer. It helps you think completely differently about writing applications - not just in Ruby and Rails!

This session will help you pass the initial hurdle of getting started with component-based Rails. While there is nothing really new, there is a lot that is just a little different. We will go over those differences so your start with component-based Rails is a smooth one.

Transcript

1. $ git clone https://github.com/shageman/sportsball.git
   $ cd sportsball
   $ ./build.sh
   

   View Slide

2. What brings you here?
   

   View Slide

3. Getting started with #cbra
   Component-Based Rails Applications
   RailsConf 2015, Labs Workshop
   

   View Slide

4. Stephan Hagemann
   @shageman
   shagemann@pivotal.io
   Pivotal Labs
   

   View Slide

5. Why #cbra?
   

   View Slide

6. Improved Communication
   Improved Collaboration
   Improved Creation
   Improved Maintenance
   Improved Comprehension
   

   View Slide

7. View Slide

8. Communication
   

   View Slide

9. View Slide

10. Collaboration
    

    View Slide

11. View Slide

12. View Slide

13. Creation
    

    View Slide

14. graphs
    on/off
    

    View Slide

15. Maintenance
    

    View Slide

16. reports2
    

    View Slide

17. Comprehension
    

    View Slide

18. View Slide

19. View Slide

20. $ git clone https://github.com/shageman/sportsball.git
    $ cd sportsball
    $ ./build.sh
    

    View Slide

21. Sportsball - what does it do?
    

    View Slide

22. Status Quo
    

    View Slide

23. Sportsball
    App
    Rails
    Engine
    Gem
    

    View Slide

24. Code Review!
    

    View Slide

25. Code Review Recap
    ● No app folder!
    ● App gem loaded through path (Gemfile)
    ● App is an engine (engine.rb)
    ● App is mounted (config/routes.rb)
    ● App routes defined in engine (app/config/routes.rb)
    ● App defines and loads migrations (app/db/migrate/, engine.
    rb)
    ● Non-published gems are funky (both Gemfiles)
    ● Tests are at the appropriate levels and aggregated via scripts
    (build.sh, test.sh)
    ● Deployment is unchanged
    

    View Slide

26. Finding Components
    

    View Slide

27. What should be extracted
    first?
    

    View Slide

28. Sportsball
    App
    Rails
    Engine
    Gem
    

    View Slide

29. What is the intrinsic
    structure of this
    app?
    

    View Slide

30. 1st Refactor
    Extract Domain Gem
    

    View Slide

31. Sportsball
    App
    Rails
    Engine
    Gem
    

    View Slide

32. Sportsball
    App
    Rails
    Engine
    Gem
    Predictor
    

    View Slide

33. bundle gem predictor #answer questions
    rm -rf predictor/.git*
    Move classes, move tests
    Rename module (in gem)
    Fix tests (in gem)
    Load gem (in engine)
    Fix tests (in engine)
    Check build (in main app)
    DIY - Extract Predictor Gem
    

    View Slide

34. Code Review!
    

    View Slide

35. Code Review Recap
    ● path … do (Gemfile)
    ● Require gem in (lib/app.rb)
    ● Non-test code changes only in Module names
    (prediction_controller.rb)
    ● OpenStruct App::Team and App::Game (predictor_spec.rb)
    ● Test runner is simplified (predictor/test.sh)
    

    View Slide

36. Lessons Learned
    ● Have good tests around the refactor
    ● Keep running those tests!
    ● Run tests inside out (up the dependency graph)
    ● Reduce component dependencies as much as possible
    ○ Simplifies component
    ○ Fewest possible reasons to change
    ○ Keeps dependency graph flat
    

    View Slide

37. Sportsball
    App
    Rails
    Engine
    Gem
    predictor
    

    View Slide

38. What else is in this app?
    

    View Slide

39. Sportsball
    Rails
    Engine
    Gem
    Predictor
    Team UI Game UI Prediction UI
    Teams
    Games
    

    View Slide

40. 2nd & 3rd Refactor
    Push Persistence Down
    

    View Slide

41. Sportsball
    Rails
    Engine
    Gem
    Predictor
    Team UI Game UI Prediction UI
    Teams
    Games
    AR Engine
    

    View Slide

42. Sportsball
    Rails
    Engine
    Gem
    Predictor
    Team UI Game UI Prediction UI
    Teams
    Games
    AR Engine
    

    View Slide

43. rails plugin new --help
    rails plugin new teams -BGVSJT --mountable \
    --dummy-path=spec/dummy
    Move classes, move tests, move migration
    Create table renaming migration (in teams engine)
    Rename module (in teams engine)
    Fix tests (in teams engine)
    Load gem (in app engine)
    Create testhelper (in teams engine) and use (in app engine)
    Fix tests (in app engine)
    Check build (in main app)
    DIY - Push Teams Persistence Down
    

    View Slide

44. Code Review!
    

    View Slide

45. Code Review Recap
    ● Dummy app (teams/spec/dummy)
    ● String renames of AR associations! (app/game.rb)
    ● Teams test helper
    ○ Create test helper
    (teams/spec/support/object_creation_methods.rb)
    ○ Expose test helper (teams/lib/teams/test_helpers.rb)
    ○ Use teams test helper (app/spec/spec_helper.rb)
    

    View Slide

46. Lessons Learned
    ● Two ways of engine-out-of-engine extraction
    ○ Create fresh + move + rename
    ○ Duplicate + delete + rename
    ● Don’t mess with existing migrations!
    ○ Move affected existing migrations
    ○ Create new migration for table rename
    ● Test helpers nice for ActiveRecord models
    ● “App” is a terrible name to refactor away from
    

    View Slide

47. 4th Refactor
    Better Naming of
    Component
    

    View Slide

48. Sportsball
    Rails
    Engine
    Gem
    Predictor
    Team UI Game UI Prediction UI
    Teams
    Games
    Layout
    WebUI
    AR Engine
    

    View Slide

49. Common
    Base
    Misc
    General
    Lib
    
    Side note: If you feel like naming
    your engine...
    

    View Slide

50. Everything
    Cruft
    Random
    Don’t Know
    Don’t Care
    Duh
    Here are some alternatives
    

    View Slide

51. Everything
    Cruft
    Random
    DontKnow
    DontCare
    Duh
    Here are some alternatives
    (Proper module names)
    

    View Slide

52. Give the most specific
    name you can think of
    refactor a lot
    continue the conversation
    

    View Slide

53. Sportsball
    Rails
    Engine
    Gem
    Predictor
    Team UI Game UI Prediction UI
    Teams
    Games
    AR Engine
    

    View Slide

54. Sportsball
    Rails
    Engine
    Gem
    Predictor
    Team UI Game UI Prediction UI
    Teams
    Games
    AR Engine
    Can we split up WebUI?
    

    View Slide

55. 5th Refactor
    Extract Layout and Style
    

    View Slide

56. Sportsball
    Rails
    Engine
    Gem
    Predictor
    Team UI Game UI Prediction UI
    Teams
    Games WebStyle
    AR Engine UI Engine
    

    View Slide

57. Copy WebUI into WebStyle
    Remove everything but assets/layout - don’t forget vendor! (in WebStyle)
    Remove assets (in WebUI)
    Fix asset loading (in WebUI)
    Check build (in main app)
    DIY - Extract WebStyle
    

    View Slide

58. Code Review!
    

    View Slide

59. Code Review Recap
    ● No tests in WebStyle
    ● Application layout (web_style/application.html.slim)
    ● Layout selection (web_ui/application_controller.rb)
    

    View Slide

60. Lessons Learned
    ● You won’t know what components you will need to extract
    until you try to extract something
    

    View Slide

61. 6th, 7th, 8th Refactor
    Separate independent UIs
    

    View Slide

62. Sportsball
    Rails
    Engine
    Gem
    Predictor
    Team UI Game UI Prediction UI
    Teams
    Games WebStyle
    AR Engine UI Engine
    

    View Slide

63. Sportsball
    Rails
    Engine
    Gem
    Predictor
    Team UI Game UI Prediction UI
    Teams
    Games WebStyle
    AR Engine UI Engine
    

    View Slide

64. Sportsball
    Rails
    Engine
    Gem
    Predictor
    Team UI Game UI Prediction UI
    Teams
    Games WebStyle
    AR Engine UI Engine
    

    View Slide

65. Sportsball
    Welcome UI
    Rails
    Engine
    Gem
    Predictor
    Team UI Game UI Prediction UI
    Teams
    Games WebStyle
    AR Engine UI Engine
    

    View Slide

66. Pick any one of the potential UI engines
    DIY - Split off a UI Engine
    

    View Slide

67. Code Review!
    

    View Slide

68. Code Review Recap
    ● Rerouting necessary
    ○ App routes (config/routes.rb)
    ○ Engine routes (*_ui/config/routes.rb)
    ○ Tests
    

    View Slide

69. Lessons Learned
    

    View Slide

70. Sportsball
    Welcome UI
    Rails
    Engine
    Gem
    Predictor
    Team UI Game UI Prediction UI
    Teams
    Games WebStyle
    AR Engine UI Engine
    That’s it!
    

    View Slide

71. Now - Your App!
    

    View Slide

72. leanpub.com/cbra/c/railsconf
    

    View Slide

73. cbra.info
    

    View Slide