Ember.js is a JavaScript web application framework based on the MVC architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.
To learn Ember.js you need to have a basic understanding of Javascript, CSS, and HTML, you don't need to know server-side technologies like Ruby on Rails, .NET, Python/Django or Java
Who uses Ember.js?
Among many who uses Ember.js are Yahoo, Tilde, Discourse, Groupon and Living Social.
Why Ember.js?
With Ember, Small choices are made for you, just like Rails it lets you solve more interesting problems. It also manages the complexity of large application stuff you didn't know you needed is already there.
You could develop a web app that exposes a Restful web API, and Ember.js can consume the web API along with other client-side implementations like an iOS or an Android app. Ember.js is not the best option if you are planning to develop something like a blog, a newspaper or static content.
Getting Started with Ember.js
You can download the starter kit from the following location:
And the Ember Data can be downloaded from:
Let's set up the index.html file
<html>
<head>
<script src="jquery.js"></script>
<script src="handlebars.js"></script>
<script src="ember.js"></script>
<script src="ember-data.js"></script>
<script src="app.js"></script>
<link href="bootstrap.css" media="screen" rel="stylesheet" />
</head>
</html>
The Ember Application
We need a single object to contain all the functionality of the app.
Let's create an app.js file
var App = Ember.Application.create({});
Here we are using App as the namespace, but you could use any name for this variable. An application needs to be created only once.
Ember Application Options
Inside the application, we can send in a JavaScript Object with options. For instance, for debugging, in app.js we can log out a message to the browser everytime a new page is accessed.
var App = Ember.Application.create({
LOG_TRANSITIONS: true
});
Running Our First App
If we open the app in firebug or chrome DevTools and view the source code, you will see that Ember added a body class ember-application and data-ember-extension, to our code.
<!DOCTYPE html>
<html>
<head>...</head>
<body class='ember-application' data-ember-extension='1'>
<div class='navbar'></div>
<div class='container'></div>
<footer class='container'></footer>
</body>
</html>
This way Ember will know the part of the page it will control. But then we need to dynamically update the content inside the body, this where templates come in handy. And we will need to move everything within our body in to the template.
Handlebars Template
Handlebars templates look like regular HTML with Handlebars expressions.
<body>
<script type='text/x-handlebars'>
<div class='navbar'></div>
<div class='container'></div>
<footer class='container'></footer>
</script>
Ember by default will render the handlebars template into a div, so that Ember can uniquely identify that div. In this case ember248.
<!DOCTYPE html>
<html>
<head>...</head>
<body class='ember-application' data-ember-extension='1'>
<div id='ember248' class='ember-view'>
<div class='navbar'></div>
<div class='container'></div>
<footer class='container'></footer>
</div>
</body>
</html>
If we wanted to make the content of the above template dynamic, we use a syntax called handlebars expression.
<script type='text/x-handlebars'>
<div class='navbar'>...</div>
<div class='container'>
<h1>Welcome to {{siteName}}!</h1>
</div>
<footer class='container'>...</footer>
</script>
The value {{siteName}} needs to be provided by our ember app.
Our current webpage layout looks like this:
tree
body -| ('application' template)
|- div.navbar
|- div.container
|- footer.container
We are going to have multiple pages on our website
- Homepage
- About page
div.container can contain:
// About Page - 'about' template
<h1>About Demo Ember</h1>
// Home Page - 'index' template
// We want this to be the default
<h1>Welcome to the Demo Ember site!</h1>
Adding a the Template Name
Each template needs a unique name, so are calling our main template, application
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar'></div>
<div class='container'></div>
<footer class='container'></div>
</script>
The application template is shown for every page by default.
Adding the Homepage Template
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar'>...</div>
<div class='container'>...</div>
<footer class='container'>...</footer>
</script>
<script type='text/x-handlebars' data-template-name='index'>
<h1>Welcome to the Demo Ember site!</h1>
</script>
index is what we will call the homepage template name.
Adding the About Template
Now let's add the about template.
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar'>...</div>
<div class='container'>...</div>
<footer class='container'>...</footer>
</script>
<script type='text/x-handlebars' data-template-name='index'>
<h1>Welcome to the Demo Ember site!</h1>
</script>
<script type='text/x-handlebars' data-template-name='about'>
<h1>About the Demo Ember site</h1>
</script>
If we tested our application now, you will see only our application template is showing. And no welcome message will appear! We need a way of telling our template where on the page to render.
Outlet
Using the handlebars expression outlet we’re giving our code a hint as to where templates should be inserted. If our Ember code reaches an {{outlet}}, by default it will look to find a template named ‘index’ and render that in place of the outlet.
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar'>...</div>
<div class='container'>{{outlet}}</div>
<footer class='container'>...</footer>
</script>
<script type='text/x-handlebars' data-template-name='index'>
<h1>Welcome to The Ember Demo!</h1>
</script>
<script type='text/x-handlebars' data-template-name='about'>
<h1>About The Ember Demo</h1>
</script>
How can we ever render the ‘about’ template? and map it to a URL, like http://example.com/about?
The Ember Router
An Ember router translates a path into a route. It figures out the route name for each request.
Browser Request > Ember Router > Handlebars Template
app.js
var App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function() {
});
Every page for our website will be defined by the router. Let's see how we can render the about Route.
app.js
App.Router.map(function() {
this.route('about');
});
This Route corresponds to below values:
URL http://example.com#/about Path /about about about
When the {{oulet}} is found, about template is loaded into it.
template.js
<script type='text/x-handlebars' data-template-name='application'>
…
{{outlet}}
…
</script>
!
<script type='text/x-handlebars' data-template-name='about'>
<h1>About The Ember Demo site</h1>
</script>
What’s with the Hash Sign?
You may wonder why there is a hash sign in http://example.com#/about URL. Ember is a single page application, so there are no absolute paths like http://example/about. The hash sign will render the relevant template instead. When a browser sees the # it knows the file path information is over.
In Ember.js, our entire application is loaded through one file. In our case index.html which is loaded from http://example.com No matter what page we load, Homepage, About Page, or Product List, we will have first called up index.html. And this loads up all our templates. So in Ember.js, all our templates are sent over to us when the application loads.
Using custom path
If we want to add a custom path to our About Route, we can do as follows:
app.js
App.Router.map(function() {
this.route('about', { path: '/aboutus' } );
});
That's the introduction to Ember.js folks! I will discuss more advanced topics in my future posts. Stay tuned!