Keep your Ember Project cleaner by using Pods

You are building a nice and well featured frontend app using Ember. Everything is fine, but as the application grows in its scope and complex routing, it gets difficult to keep up with the development. You will start facing the following issues:

  • The app becomes unwieldy.
  • Difficulty in scaling and maintaining.
  • Too much hassle in development.

 

But we have pod structure to the rescue! ūüėÄ

As your app gets bigger, a feature-driven structure may be better. 
Splitting your application by functionality/resource would give 
you more power and control to scale and maintain it. As a default, 
if the file is not found on the POD structure, the Resolver will 
look it up within the normal structure. 
- https://ember-cli.com/user-guide

The ember app structure is:

|--app 
|--bower_components 
|--config 
|--dist 
|--node_modules 
|--public 
|--tests 
|--tmp 
|--vendor 
bower.json 
ember-cli-build.js 
package.json 
README.md 
testem.js

The default app structure for ember project where files are generated using simple generate commands:

ember generate <generator-name> <options>

would be:

app.js

|--components 
   my-component.js
|--controllers 
   application.js
   index.js
   |--users
      index.js
      edit.js
      new.js
   users.js
|--helpers 
   my-helper.js
|--models 
   user.js
|--routes
   application.js
   index.js
   |--users
      index.js
      edit.js
      new.js
   users.js
|--styles
   app.scss
|--templates
   application.hbs
   |--components
      my-component.hbs
   index.hbs
   |--users
      index.hbs
      edit.hbs
      new.hbs
   users.hbs
index.html 
resolver.js 
router.js 

Using pods, we get the following structure:

|--components 
   |--my-component
      component.js
      template.hbs
|--controllers 
|--application
   route.js
   controller.js
   template.hbs
   |--index
      route.js
      controller.js
      template.hbs
|--users
   route.js
   controller.js
   template.hbs
   |--index
      route.js
      controller.js
      template.hbs
   |--edit
      route.js
      controller.js
      template.hbs
   |--new
      route.js
      controller.js
      template.hbs
|--helpers 
   my-helper.js
|--models 
   user.js
|--routes
|--styles
   app.scss
|--templates
   |--components
index.html 
resolver.js 
router.js

As your application grows, you will end up with lots of controllers, with quite a few of them living under app/controllers. The same goes for templates and routes. While you can always wildcard search your project to open files, it can be really convenient having a route, controller, and template for a resource/feature located under the same directory.

One of the enhancements that the new Resolver brings is that it 
will first look for Pods before the traditional project 
structure. 
- https://ember-cli.com/user-guide

So, we don’t have to decide to go with this structure right away. Thanks to ember-cli conventions, when a pod structure is specified but the necessary file is not found, the Resolver (how ember-cli looks up files) will fall back to the default naming structure.

podModulePrefix is an optional configuration setting in ember-cli that specifies the root folder for all pods. It can be set in environment.js. If we don’t specify, then app is rot folder for the pods.¬†

Rather than hold your resource directories on the root of your app you can define a POD path using the attribute podModulePrefix within your environment configs. The POD path should use the following format: {appname}/{poddir}

// config/environment.js
module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'my-new-app',
    // namespaced directory where resolver will look for your resource files
    podModulePrefix: 'my-new-app/pods',
    environment: environment,
    baseURL: '/',
    locationType: 'auto'
    //...
  };

  return ENV;
};

The directory structure which was

  • app/users/controller.js
  • app/users/route.js
  • app/users/template.hbs

will become:

  • app/pods/users/controller.js
  • app/pods/users/route.js
  • app/pods/users/template.hbs

To use pod structure, just pass --pod to ember generate when generating new files.

> ember g route music/guitar --pod
  create app/pods/music/guitar/route.js
  create app/pods/music/guitar/template.hbs
  create tests/unit/routes/music/guitar-test.js

> ember g component acoustic --pod
  create app/pods/components/acoustic/component.js
  create app/pods/components/acoustic/template.hbs
  create tests/unit/components/acoustic-test.js

 

If you want to enable a pod structure by default without having to specify ‚ÄĒpodwhen using generators, set usePods: true in your .ember-cli file located in the root of your project.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s