0

For the first time as a jnr progammer I'm looking at how to write my js code so that it's isolated to certain pages within my Rails app. I figure this is a sensible thing to do for the purposes of;

a) certain js i write I only want to target a certain element on an individual page, not other elements on other pages within the same controller that may get picked up due to using a class selector for example and marking every single thing with unique id's doesn't seem too neat. (I see that rails already has controller isolation through the naming of js files by controller, but further dividing things up into action/page names js files doesn't sound nice either!).

b) perhaps in finding a solution to only running js on certain pages it could mean that the js only needs to be loaded on certain actions thereby saving on load times.

There's a well attended question here with folks approaches here but most answers are 6 years old now and another nice post about the so called 'Garber Irish method of Dom ready execution' here that sounds quite nice, but again this is quite old now and all based on Rails 3...

So without wanting to create duplicate content I'm seeking to get a refreshed answer to this same question and find out whether there's a best practice now established these days.

Thanks

jbk
  • 1,911
  • 19
  • 36

1 Answers1

1

Convention:

  • Rails when using scaffold generator by default creates corresponding
    • app/assets/javascripts/MODEL_NAME.coffee
    • app/assets/stylesheets/MODEL_NAME.scss
  • which separates JS and CSS logic by "controller" name

Personal Preference:

  • Rather than controller-based segregation, I prefer layout-component-based segregation. Best explained through a sample code below:

    • app/assets/javascripts/application.js

      //= require_tree ./layouts/
      
    • app/assets/javascripts/layouts/__shared.coffee

      // WRITE GLOBAL JS LOGIC HERE FOR ANY LAYOUT
      
    • app/assets/javascripts/layouts/application/__shared.coffee

      // WRITE GLOBAL JS LOGIC HERE ONLY FOR THIS "application" LAYOUT
      
    • app/assets/javascripts/layouts/blog/__shared.coffee

      // WRITE GLOBAL JS LOGIC HERE ONLY FOR THIS "blog" LAYOUT IF YOU HAVE ANOTHER layout such as "layouts/blog.html.erb"
      
    • app/assets/javascripts/layouts/application/components/header.coffee

      // WRITE JS code here for the header component
      
    • app/assets/javascripts/layouts/application/components/footer.coffee

      // WRITE JS code here for the footer component
      
    • app/assets/javascripts/layouts/application/components/users/__shared.coffee

      // You can also divide a component into subcomponents just like this
      // WRITE JS code shared amongst all users subcomponents
      
    • app/assets/javascripts/layouts/application/components/users/form.coffee

      // WRITE JS CODE HERE regarding the form that creates or updates a User
      
    • app/assets/javascripts/layouts/application/components/users/list.coffee

      // WRITE JS CODE HERE regarding the table listing all users
      

You also structure the CSS files in the same way, matching the components

Jay-Ar Polidario
  • 6,463
  • 14
  • 28