How to architect an Ember.js application

Question

It's been difficult to keep up with the evolution of Ember JS as its approached (and reached!) version 1.0.0. Tutorials and documentation have come and gone, leading to a lot of confusion about best practices and the intent of the original developers.

My question is exactly that: What are the best practices for Ember JS? Are there any updated tutorials or working samples showing how Ember JS is intended to be used? Code samples would be great!

Thanks to everyone, especially the Ember JS devs!

Answer 1

Mike Grassotti's Minimum Viable Ember.js QuickStart Guide

This quickstart guide should get you from zero to slightly-more-than-zero in a couple of minutes. When done, you should feel somewhat confident that ember.js actually works and hopefully will be interested enough to learn more.

WARNING: Don't just try this guide then think ember-sucks cause "I could write that quickstart-guide better in jQuery or Fortran" or whatever. I am not trying to sell you on ember or anything, this guide is little more than a hello-world.

Step 0 - Check out jsFiddle

this jsFiddle has all the code from this answer

Step 1 - Include ember.js and other required libraries

Ember.js requires both jQuery and Handlebars. Be sure those libraries are loaded before ember.js:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script> <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script> 

Step 2 - Describe your application's user interface using one or more handlebars templates

By default ember will replace body of your html page using content of one or more handlbars templates. Someday these templates will be in separate .hbs files assembled by sprockets or maybe grunt.js. For now we will keep everything in one file and use script tags.

First, let's add a single application template:

<script type="text/x-handlebars" data-template-name="application">   <div class="container">     <h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>     <p>{{message}}</p>   </div> </script> 

Step 3 - Initialize your ember application

Just add another script block with App = Ember.Application.create({}); to load ember.js and initialize your application.

<script type='text/javascript'>   App = Ember.Application.create({}); </script> 

That's all you need to create a basic ember application, but it's not very interesting.

Step 4: Add a controller

Ember evaluates each handlebars templates in the context of a controller. So application template has a matching ApplicationController. Ember creates is automatically if you don't define one, but here let's customize it to add a message property.

<script type='text/javascript'> App.ApplicationController = Ember.Controller.extend({     message: 'This is the application template'  }); </script> 

Step 5: Define routes + more controllers and templates

Ember router makes it easy to combine templates/controllers into an application.

<script type='text/javascript'>   App.Router.map(function() {     this.route("index", { path: "/" });     this.route("list", { path: "/list" });   });    App.IndexController = Ember.Controller.extend({     message: 'Hello! See how index.hbs is evaluated in the context of IndexController'    });    App.ListRoute = Ember.Route.extend({     setupController: function(controller) {       controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);     }   });  </script> 

To make this work, we modify our the application template by adding an {{outlet}} helper. Ember router will render appropriate template into the outlet depending on user's route. We will also use the {{linkTo}} helper to add navigation links.

    <script type="text/x-handlebars" data-template-name="application">       <div class="container">           <h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>         <p>{{message}}</p>         <div class="row">           {{#linkTo index class="span3 btn btn-large btn-block"}}Home{{/linkTo}}           {{#linkTo list class="span3 btn btn-large btn-block"}}List{{/linkTo}}         </div>         {{outlet}}       </div>     </script>      <script type="text/x-handlebars" data-template-name="list">       <h3 class="demo-panel-title">This is the list template</h3>       <ul>       {{#each item in content}}           <li>{{item}}</li>       {{/each}}        </ul>     </script>      <script type="text/x-handlebars" data-template-name="index">       <h3 class="demo-panel-title">This is the index template</h3>       <p>{{message}}</p>     </script> 

Done!

A working example of this application is available here.

You can use this jsFiddle as a starting point for your own ember apps

Next Steps...

• Read the Ember Guides
• Maybe buy the Peepcode screencast
• Ask questions here on Stack Overflow or in ember IRC

For reference, my original answer:

---

My question is for any Ember.js expert, and certainly the respective tutorial authors: When should I use design patterns from one tutorial, and when from the other?

These two tutorials represent best practices at the time they were written. For sure there is something that can be learned from each, both are sadly doomed to become out of date because ember.js is moving very quickly. Of the two, Trek's is far more current.

What components of each are personal preferences, and what components will prove essential as my app matures? If you are developing a new ember application I would not recommend following the Code Lab approach. It is just too out-of-date to be useful.

In Code Lab's design, Ember seems to be closer to existing within the application (even though it is 100% of his custom JS), whereas Trek's application seems to live more within Ember.

Your comment is bang-on. CodeLab is making taking advantage of core ember components and accessing them from global scope. When it was written (9 months ago) this was pretty common but today best-practice for writing ember applications is much closer to what Trek was doing.

That said, even Trek's tutorial is becoming out-of-date. Components that were required ApplicationView and ApplicationController are now generated by the framework itself.

By far the most current resource is the set of guides published at http://emberjs.com/guides/ - they have been written from the ground up over the last few weeks and reflect the latest (pre-release) version of ember.

I'd also check out trek's wip project here: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

EDIT:

@sly7_7 : I'd also give an other example, using ember-data https://github.com/dgeb/ember_data_example

Answer 2

There is an important project that both new and veteran Ember.js developers should take advantage of:

Ember-CLI

While it does require some comfort level with the command line, you can generate a modern Ember project with community recommended best practices in a matter of seconds.

While it is beneficial to setup an Ember.js project the hard way as in Mike Grassotti's answer, you should not be doing that for production code. Especially when we have such a powerful and easy to use project like Ember-CLI to show us the Yehuda approved happy path.