Discovering Ember.JS

In order to complete a coding challenge, I had to write the code using Ember.JS. However I had never written a line of code in Ember.JS before. I thought that this would be an amazing opportunity to learn a new framework. And I decided to share with you what I learned about Ember.JS and maybe this will inspire you to discover Ember.JS. I used the Ember.JS documentation as a resource to learn and write this blog post.

Ember.JS is an open source JavaScript client-side framework used for developing web applications. It uses the MVC(Model-View-Controller) architecture pattern. Below I will be focusing on the Core concepts of Ember.

The following image describes how an Ember.JS application works:

If we are writing a web app for a site that lets users list their properties to rent. We should answer the following questions about the current state like What rental are they looking at? and Are they editing it? The answer to these questions are determined by the URL, which can be established in a few ways lie: the user loads the app for the first time or clicks on a link within the app.

Regardless how the URL can be set, the Router maps the URL to a route handler. Then the router handler will render a template and loads a model which is available on the template.

Templates are used to handle the layout of HTML of the application and use the syntax of Handlebars. Handlebars templates look like regular HTML, with embedded handlebars expressions. They look like this {{, some contents, followed by a }} .

Models represent persistent state. An example would be a property rentals application would want to save the details of a rental when a user publishes it, so a rental would have a model defining its details which we can call a rental model. Even though model persists information to a web server, models can be configured to save to the browser’s Local Storage.

While templates handles the HTML layout of an application, components control the behavior of an application. Components consist of a template written in Handlebars, and a file written in JavaScript which defines the component’s behavior. You can have more than one component. For example one that displays all the rentals, and one that displays a specific rental which can define a behavior which lets the user hide the image property of a rental.

On a side note, a feature that I notice about Ember.JS is that the command line interface, is similar to Rails:

In Rails to generate a model you type the following line of code in the terminal:

And in Ember to generate a model you type the following line of code in the terminal:

Overall Ember.JS is a great JavaScript framework. By reading the Ember.JS documentation, and understanding the core concepts of Ember.JS, I was ready to work on my coding challenge and also expanded my knowledge along the way. Thank you for reading this blog post and I hope you learned something new.