As many of you may have heard Ember.js is a framework for creating ambitious web applications. Ember is an open-source client-side javascript framework that uses the Model-View-Controller pattern. It's used for single-page applications. It competes directly with Angular.js and other client side frameworks.

For the last few weeks I've been trying out the framework. I've worked with Angular.js before briefly for another project. I really liked the simplicity it offered. From my experience ember has been a little more of a learning curve. With that said I've heard a lot of great things about ember so I'm trying it out.

Hello World App

I'm planning on going into more depth with ember but for this post let's just create a simple hello world application. First things first is to download the ember.js starter kit here. Eventually ember will be promoting their NPM ember-cli instead of the starter kit. The cli will make it much easier to create scaffolding for an ember project and get it up and running quickly. Unfortunately it's still a work in progress and not quite ready yet.

After unzipping the starter kit simply double click on the index.html. This lovely page will be displayed.


Not a lot to show here. So let's try to create an input field that outputs to the page. First I went into the index.html and deleted everything in the index template and added this.

 <script type="text/x-handlebars" id="index">
 {{input type="text" value=name placeholder="Enter your name"}}
<div class="text">  
<h1>My name is {{name}} and I want to learn Ember!</h1>  

The mustaches '{{' are used by the templating engine handlebars. {{input}} is a handlebars helper that inserts an html input tag into the template. The value 'name' is the variable name assigned to the output. This value will auto-update as the user is typing in the value. Here is what it looks like after typing in my name.

That's without adding any javascript. Of course the starter kit already includes all the necessary javascript libraries to get started.

  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.5.1.js"></script>
  <script src="js/app.js"></script>

Another thing worth mentioning is that ember uses outlets. Each templates has to be directed where to be rendered on the page. This is done using the {{outlet}} helper. Outlet is a placeholder that the router will fill in with the appropriate template based on the current state of the application. In the starter kits the outlet is set here under the open body tag.

<script type="text/x-handlebars">  
    <h2>Welcome to Ember.js</h2>


This is a placeholder that tells the index template where to render.

This is just the tip of the iceberg. In my next post we'll go over the router and routes within the app.js