Getting started with Ember.js

Web applications today are nothing like the ones we saw just a couple of years ago, they’re far more complex and many rival desktop equivalents.

In order to create this kind of application, we can’t really rely on libraries like jQuery that are intended for DOM manipulation. This new rise of web applications has lead to JavaScript developers taking the MVC route simply because it creates much cleaner and more manageable code. 

A number of JavaScript frameworks have emerged for creating web applications and one of them is Ember.js.

What is Ember.js ?

As I’ve said, Ember.js is a JavaScript framework for the creation of web applications. It evolved from a project called SproutCore.

Ember integrates tightly with the templating engine Handlebars which lets us create dynamic HTML templates.

One thing to bear in mind is that Ember.js does in fact use jQuery, so it’s not a replacement for that, but if you want to create powerful web applications Ember.js may be the thing for you.

Getting started

Ember.js uses the MVC pattern:

  • Model – This is where you store your data when it’s waiting to be used by the app.
  • View – A view is what the users see in the browser it’s basically the UI of your application.
  • Controller – A controller processes and responds to events, typically user actions, and calls changes on the model or the view.

To get started with Ember you need to download the starter kit at their home page and open up index.html and app.js in your favorite text editor.

Then you start with this code:

App = Ember.Application.create();

This creates your application, but if you run it in a browser you’ll see nothing because as of yet there’s nothing for the browser to output.

To correct this, you can use Ember’s ready object, which is similar to jQuery’s document.ready:

App = Ember.Application.create({
	ready: function(){
		$('body').html('Hello Ember');
	}
});

Now, in order to store some data we need a model. You can have as many models as you like, and each one will handle a specific type of data. If for example you wanted to create a model with your favourite TV shows you’d use something like:

App.Show = Ember.Object.extend({
	name: null,
	day: null,
	status: null
});

Having created the class, you can then use create to instantiate an instance of the class:

Dexter = Show.create({
    name: 'Dexter',
    day: 'Sunday',
    status: 'Finished'
});

Next, we want to build a controller. They funnel data from the model to the view.

Here’s a simple controller containing our show, which will allow us to use it later in our view:

App.showsController = Ember.ArrayController.create({
    content: [],
    init: function(){
        var Dexter = App.Show.create({
        name: 'Dexter',
        day: 'Sunday',
        status: 'Finished'
    });
        this.pushObject(Dexter);
    }
});

To show this controller in the view we need to create a handlebars template on our index page. In this case I’m going to use an each statement because it works with one show and will still work if I decide to add more later:

  <script type="text/x-handlebars">
{{#each App.showsController}}
<h3>{{name}}</h3>
<p>{{day}}</p>
<p>{{status}}</p>
{{/each}}
</script>

If you now reload the page you’ll see our show appearing as intended.

This is just the very beginning of what you can do with Ember.js. As the website says, it’s used to create powerful single page applications in JavaScript and I hope this brief introduction has inspired you to dig into the subject further, because it has a bright future.

Have you built a project in Ember.js? Is JavaScript suitable for complex applications? Let us know in the comments.

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website. More articles by Sara Vieira
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress