Beginning with Ember JS

Ember.js is a client side JavaScript framework based on the MVC design pattern used to create “ambitious web applications”. Ember puts a strong focus on convention over configuration, which helps developers build highly interactive web applications with ease. With that said, there is an expected learning curve that is incredibly rewarding.

Below are five tips to help kick start your Ember learning experience:

1. Understand How Ember is Organized and its Conventions

Since Ember believes in convention over configuration it’s paramount that one understands the various components of an Ember application. Ember can be frustrating to use if you fail to follow naming conventions, so be sure to understand what Ember expects and where things belong.

The important pieces of an Ember application are as follows:

Router: Matches URLs to corresponding objects

Controller: Handles actions and passes model data to its views

Model: Stores, retrieves, and saves data

Template: Describes HTML output, and it’s created using HTML and handlebars (more on this later).

Ember Naming Conventions:

Below is an example of how to model your Ember application using the correct naming conventions that Ember expects; following an example related to creating and displaying a listing of user blog posts.  Note: The keyword post(s) can be substituted with anything else.

Create a new Ember application:

window.App = Ember.Application.create();

Create the router with the base URL path which points to http://localhost:9000/

App.Router.map(function() {
  this.resource('posts', { path: '/' });
});

Create a route

App.PostsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('post');
  }
});

Create a controller:

App.PostsController = Ember.ArrayController.extend({
  actions: {
    //Some action
  }
});

Create a model:

App.Post = DS.Model.extend({
  title: DS.attr('string'),
});

Template: posts.hbs

<ul id="post-list">
  {{#each}}
    <li>
      {{title}}
    </li>
  {{/each}}
</ul>

2. URLs are Key

URLs drive the web and therefore Ember applications are built around the URL as well. It’s extremely important to understand that with Ember, the URL dictates the state of the UI. This keeps the traditional way of browsing the web in tact, giving the user the ability to hit the back button on their browser without breaking the expected results. This is unlike many other Javascript frameworks which put the URL on the backburner, and harms the user experience. This concept also gives the user the ability to share or bookmark their current URL and reliably view the same content each time.

The way that ember puts URLs at the center is through the Router, which associates a URL to a route. The route object then loads data from the model, not the controller, unlike other common MVC frameworks. Therefore, when http://localhost:9000/#/posts is visited the Ember Router calls the App.PostsRoute object which then finds the associated data from the Posts model and assigns it to the App.PostsController which is set up by the route as well.

The following diagram clearly shows how the route functions:

EmberRouteDiagram-01

3. Enjoy Handlebars

Ember is tightly integrated with the Handlebars templating system, which provides a quick and easy way of creating dynamic HTML templates through Handlebars expressions. For example, it’s incredibly quick to bind data directly into an HTML template from the associated controller as shown in the example below where we grab the data from the name property and display it in the template using the Handlebars notation.

Controller:

App.ApplicationController = Ember.Controller.extend({
  name: "Ed",
});

Template example.hbs file:

<div>
  <p>Hello {{name}}!</p>
</div>

Result:  Hello Ed!

This will display the data from the model associated with the controller, which is “name” and contains the associated value of Ed. It will then be displayed in the final HTML output.

Handlebars also provides developers with the ability to conditionally display certain parts of the template using {{#if}}, {{else}}, and the {{#unless}} expressions as shown below.

{{#if hasLoggedIn}}
  Welcome back, {{name}}!
{{else}}
  Please Log in!
{{/if}}

This will display either “Welcome back, Ed!” or “Please Log in!” depending on the boolean value of hasLoggedIn.

It’s also possible to easily loop through a list using Handlers with the {{#each}} expression:

<ul>
  {{#each friend}}
    <li>
      Hello, {{name}}!
    </li>
  {{/each}}
</ul>

Output:

<ul>
  <li>Hello, Chris!</li>
  <li>Hello, Bob!</li>
  <li>Hello, Bill!</li>
 </ul>

For more information regarding Handlebars usage with Ember check out the following guide.

4. Take Advantage of Components

Re-usability is without a doubt one of the most important concepts when it comes to development and Ember is no different. Therefore, Ember has created components which give developers the ability to create new HTML tags to integrate reusable chunks of UI.

For instance, if we were to create a rating component which would give us the ability to insert a rating system that the user can toggle on/off for a film review site, and if we wanted to incorporate it throughout our application, all we would have to do is declare it in our HTML using the handlebars notation without writing the same code multiple times.

In order to create this component all we would have to do is create a template and a javascript file that holds any properties or actions related to the component.

rating-system.js:

App.RatingSystemComponent = Ember.Component.extend({
  click: function() {;
    //do stuff
  }
});

rating-system.hbs:

<div>
  {{#each star}}
    {{!-- Do some stuff here --}}
  {{/each}}
</div>

Then we can use our component throughout our application, simply through the use of the Handlebars notation as shown here with {{rating-system}}:

<ul>
  {{#each film}}
    <li>
      {{film.name}} {{rating-system}}
    </li>
  {{/each}}
</ul>
<ul>
  {{#each actor}}
    <li>
      {{actor.name}} {{rating-system}}
    </li>
  {{/each}}
</ul>

For more information regarding Ember Components check out the following guide.

5. Use Ember Inspector

Download the Ember Inspector and use it with both Firefox and Chrome to increase your understanding of Ember and help debug your application. The inspector provides an easy way to understand some of the inner workings of an Ember application. With the inspector you can view information regarding your application’s view tree, which displays the templates, controllers, and models that are associated with the current state of the application, as shown below.

Some other neat features of the Ember Inspector includes, the ability to view your data layer if you are using Ember Data, a list of all the promises your application has fulled or rejected, as well as, a built in reference to all of Ember’s naming conventions, and much more. All of which are extremely helpful during the development process.

For more information regarding ember.js visit emberjs.com.

Ed

Written by Ed

Leave a Reply

*