Things you need to know before starting EmberJS

What is Ember?

EmberJS is a client side web application framework, built on javascript, based on the MVC software architectural pattern. It’s not that it provides anything extra which you can’t do with traditional jQuery, MooTools or basic javascript, rather it works like a blackbox where methods, conventions, rules are predefined.  You just have to follow the ‘ember way’ to develop your app, and many things like data-binding, routing etc. will be done automatically. Before start learning Ember, keep in mind it is developed to reduce your effort of development. So it won’t give you pain.

Ember has dependency on jQuery (1.7.2 and above), and it uses handlebars.js as template engine. That means, to develop an Ember App, you need to include three javascript libraries: ember.js, handlebars.js and jquery.js.

Team: Yehuda Katz and Tom Dale started developing the ember framework first. With time lot others joined them.

What is MVC architecture?

MVC or Model View Controller architecture is a standard to isolate the application logic from the user interface layer.

Model: The data, your app is using is represented in models. It can be a simple array, predefined JSON object or data dynamically retrieved from a RESTful JSON API, via an Ajax request.

View: The name says it all. View is presentation of data in a particular format. This is the part of the application where user will see things, rise events or can do other interactivities.

Controller: Controllers are like intermediate communicator between models and views. They are typically used to store data in models, represent data in views and to handle the events raised by the user in view.

How Ember helps

1. Ember helps to make desktop like application in web.

2. It helps to develop a single page multi route app.

3. Codes become very structured and clean.

4. You have to write dramatically less codes than traditional jQuery.

5. Easy to manage the apps.

6. To make a complex user interface easy to develop

7. To reduce number of http requests required for new views.

8. Nice documentation and easy to learn.

Key features of Ember

Bindings: One of the major tasks which a normal web app has to do is constantly flowing changing data from A to B. This thing has become very easy to do with Ember’s two way data binding. With very minimal effort you can reflect the changing data in view (UI) and vice versa in real time using ember.

Router: Using this feature of ember you can develop a multi url based single page web app, which will look like desktop apps. Within the same page using different routes, you can show different view with different set of data and event handlers.

Components: A component is a custom HTML tag whose behavior you implement using JavaScript and whose appearance you describe using Handlebars templates. They allow you to create reusable controls that can simplify your application’s templates.

Nesting: Nested routes, nested views are possible in ember.


To start with ember, you must have an idea of handlebars.js which is a string based template engine. Handlebars generates your HTML by taking a JSON structure and running it through a template. These templates are written mostly in regular HTML, and are peppered with placeholders that allow you to inject data, as needed. Handlebars gives you the ability to create your own custom helper. Simply register your function into Handlebars, and any template you compile afterwards can access your helper. There are two kinds of helpers that you can make:

1. Function helpers are basically regular functions that, once registered, can be called anywhere in your template. Handlebars writes the function’s return value into the template.

2. Block helpers are similar in nature to the if, each, etc. helpers. They allow you to change the context of what’s inside.

You don’t have to learn handlebars separately; we will cover the necessary parts of it while writing the ember tutorials.

Few big Ember applications

1. Yapp

2. Timbuk2

3. Zendesk

4. Topicus

5. Discourse

6. Square

Start using Ember

Now you have enough understanding to start learning EmberJS. So let’s begin with My First Ember App, which will guide you to write the very first and basic Ember Application.

Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.