Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Get started with Component-Based Rails @ RailsConf 2015

shagemann
April 21, 2015

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.

shagemann

April 21, 2015
Tweet

More Decks by shagemann

Other Decks in Technology

Transcript

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

    View full-size slide

  2. What brings you here?

    View full-size slide

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

    View full-size slide

  4. Stephan Hagemann
    @shageman
    [email protected]
    Pivotal Labs

    View full-size slide

  5. Improved Communication
    Improved Collaboration
    Improved Creation
    Improved Maintenance
    Improved Comprehension

    View full-size slide

  6. Communication

    View full-size slide

  7. Collaboration

    View full-size slide

  8. graphs
    on/off

    View full-size slide

  9. Comprehension

    View full-size slide

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

    View full-size slide

  11. Sportsball - what does it do?

    View full-size slide

  12. Sportsball
    App
    Rails
    Engine
    Gem

    View full-size slide

  13. Code Review!

    View full-size slide

  14. 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 full-size slide

  15. Finding Components

    View full-size slide

  16. What should be extracted
    first?

    View full-size slide

  17. Sportsball
    App
    Rails
    Engine
    Gem

    View full-size slide

  18. What is the intrinsic
    structure of this
    app?

    View full-size slide

  19. 1st Refactor
    Extract Domain Gem

    View full-size slide

  20. Sportsball
    App
    Rails
    Engine
    Gem

    View full-size slide

  21. Sportsball
    App
    Rails
    Engine
    Gem
    Predictor

    View full-size slide

  22. 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 full-size slide

  23. Code Review!

    View full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. Sportsball
    App
    Rails
    Engine
    Gem
    predictor

    View full-size slide

  27. What else is in this app?

    View full-size slide

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

    View full-size slide

  29. 2nd & 3rd Refactor
    Push Persistence Down

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. Code Review!

    View full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. 4th Refactor
    Better Naming of
    Component

    View full-size slide

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

    View full-size slide

  38. Common
    Base
    Misc
    General
    Lib

    Side note: If you feel like naming
    your engine...

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. 5th Refactor
    Extract Layout and Style

    View full-size slide

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

    View full-size slide

  46. 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 full-size slide

  47. Code Review!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. Code Review!

    View full-size slide

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

    View full-size slide

  58. Lessons Learned

    View full-size slide

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

    View full-size slide

  60. Now - Your App!

    View full-size slide

  61. leanpub.com/cbra/c/railsconf

    View full-size slide