Idiomatic routes and resources

1

Hey folks,

As an app gets bigger and more hierarchical, it becomes very important to keep the router clean and organized. However, there are many ways to build out routes and resources, so I’d like to know what is considered idiomatic when things get complicated.

For example, consider the hierarchy of entities: Accounts → Users. We can describe the different states with URLs:

/accounts                    //shows a list of accounts
/accounts/new                //form to create new account
/accounts/:id/edit           //form to edit existing account
/accounts/:id/users          //shows a single account w/ list of users
/accounts/:id/users/new      //form to create new user for account
/users/:id/edit              //form to edit existing user
/users/:id/feedback          //show a single user w/ list of feedback 
/users/:id/feedback/new      //form to create new feedback for user
/feedback/:id/edit           //form to edit single feedback

Pretty straightforward hierarchy structure. One key point is that listing out sub-entities only occurs on the parent entity’s detail page. So from a routing perspective, some would structure as follows:

this.resource('accounts', function() {
  //index route implicitly created; used for listing accounts
  this.route('new');
});

this.resource('account', { path: 'accounts/:account_id'}, function () {
  //index route implicitly created, used for showing single account
  this.route('edit');
  this.resource('users', function() {
    //index route used for showing list of users in account outlet
    this.route('new');
  });
});

this.resource('user', { path: 'users/:user_id'}, function () {
  //index route implicitly created, used for showing single user
  this.route('edit');
  this.resource('feedbacks', { path: 'feedback'}, function() {
    //index route used for showing list of feedbacks in user outlet
    this.route('new');
  });
});

This may get the job done, but there are a few things that bother me. Firstly, the semantics of the index route is different depending on if the resource is plural or singular. This goes against RESTful conventions, where the detail page of a single resource is represented by ‘show’. Secondly, the split between plural and single resources will cause a redundant folder structure throughout the app when using ember-cli. Rather than just having everything in /accounts, /users, and /feedback, There will be /accounts, /account, /users, /user, /feedbacks, /feedback.

So, how are you guys handling this? Is there a more optimal way to keep things cleaner in your router.js, urls, and physical folder structure?

6 Likes
2

I’m tormented by that myself. Would really like if someone more experienced chimed in.