Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
275 lines (193 sloc) 6.3 KB
layout title permalink category github
post
Naming Conventions
naming-conventions
user-guide

Overview

  • kebab-case
    • file names
    • directory names
    • html tags/ember components
    • CSS classes
    • URLs
  • camelCase
    • JavaScript
    • JSON

When using Ember CLI it's important to keep in mind that the Resolver changes some of the naming conventions you would typically use out of the box with Ember, Ember Data and Handlebars. In this section we review some of these naming conventions.

Module Examples

Adapters

{% highlight javascript %} // app/adapters/application.js import DS from 'ember-data';

const { RESTAdapter } = DS;

export default RESTAdapter.extend({}); {% endhighlight %}

Components

{% highlight javascript %} // app/components/time-input.js import TextField from '@ember/component/text-field';

export default TextField.extend({}); {% endhighlight %}

Controllers

{% highlight javascript %} // app/controllers/stop-watch.js import Controller from '@ember/controller';

export default Controller.extend({}); {% endhighlight %}

And if it's a nested controller, we can declare nested/child controllers like such: app/controllers/posts/index.js.

Helpers

{% highlight javascript %} // app/helpers/format-time.js import { helper } from '@ember/component/helper';

export default helper(function(){}); {% endhighlight %}

Instance Initializers

{% highlight javascript %} // app/instance-initializers/observation.js export function initialize(appInstance) {

};

export default { name: 'observation', initialize: initialize }; {% endhighlight %}

Note: instance-initializers are loaded automatically.

Mixins

{% highlight javascript %} // app/mixins/evented.js import Mixin from '@ember/object/mixin';

export default Mixin.create({}); {% endhighlight %}

Models

{% highlight javascript %} // app/models/observation.js import DS from 'ember-data';

const { Model } = DS;

export default Model.extend({}); {% endhighlight %}

Routes

{% highlight javascript %} // app/routes/timer.js import Route from '@ember/routing/route';

export default Route.extend({}); {% endhighlight %}

Nested routes as such: app/routes/timer/index.js or app/routes/timer/record.js.

Serializers

{% highlight javascript %} // app/serializers/observation.js import DS from 'ember-data';

const { RESTSerializer } = DS;

export default RESTSerializer.extend({}); {% endhighlight %}

Transforms

{% highlight javascript %} // app/transforms/time.js import DS from 'ember-data';

const { Transform } = DS;

export default Transform.extend({}); {% endhighlight %}

Utilities

{% highlight javascript %} // app/utils/my-ajax.js export default function myAjax() {}; {% endhighlight %}

Views

{% highlight html %}

{% raw %}{{view 'stop-watch'}}{% endraw %} {% endhighlight %}

{% highlight javascript %} // app/views/stop-watch.js import Ember from 'ember';

export default Ember.View.extend({}); {% endhighlight %}

And views, which can be referenced in sub-directories, but have no inheritance.

{% highlight html %}

{% raw %}{{view 'inputs/time-input'}}{% endraw %} {% endhighlight %}

{% highlight javascript %} // app/views/inputs/time-input.js import TextField from '@ember/component/text-field';

export default TextField.extend({}); {% endhighlight %}

Filenames

It is important to keep in mind that the Resolver uses filenames to create the associations correctly. This helps you by not having to namespace everything yourself. But there are a couple of things you should know.

All filenames should be lowercased

{% highlight javascript %} // models/user.js import DS from 'ember-data';

const { Model } = DS;

export default Model.extend({}); {% endhighlight %}

Dasherized file and directory names are required

{% highlight javascript %} // controllers/sign-up.js import Controller from '@ember/controller';

export default Controller.extend({}); {% endhighlight %}

Nested directories

If you prefer to nest your files to better manage your application, you can easily do so.

{% highlight javascript %} // controllers/posts/new.js results in a controller named "controllers.posts/new" import Controller from '@ember/controller';

export default Controller.extend({}); {% endhighlight %}

You cannot use paths containing slashes in your templates because Handlebars will translate them back to dots. Simply create an alias like this:

{% highlight javascript %} // controllers/posts.js import Controller from '@ember/controller'; import { alias } from '@ember/object/computed';

export default Controller.extend({ needs: ['posts/details'], postsDetails: alias('controllers.posts/details') }); {% endhighlight %}

{% highlight html %} {% raw %}

{{postsDetails.count}} {% endraw %} {% endhighlight %}

Tests

Test filenames should be suffixed with -test.js in order to run.

Pod structure

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.

In this case, you should name the file as its functionality. Given a resource Users, the directory structure would be:

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

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}.

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

return ENV; }; {% endhighlight %}

Then your directory structure would be:

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