Much has already been written about the client side JavaScript framework for building ambitious web applications, Ember.js. If you’ve heard of Ember.js, then you likely know that it has a somewhat high learning curve. That comes with being a full featured framework.

We at Loadsys have started using Ember.js for more than just complex web applications. We are now also using Ember.js to build html wireframes. Doing so, we can deliver interactive html wireframes that the clients are able to use and give feedback on. This also eases our developers into using Ember.js since we aren’t using any of the more complicated features.

To get started, we are going to need to start an Ember.js project with ember-cli. Check out my previous post on getting ember-cli installed.

Now that we have ember-cli installed, lets start a new project:

$ ember new project-wireframes
$ cd project-wireframes
$ ember serve

Now the project is running at localhost:4200. There you will see the default message in app/templates/application.hbs.

For this example, we’re going to write the markup for a simple blog. The links in the app will work, but the content will be purely static. That means we’ll only need to modify the app/router.js and the files in app/templates/.

We’ll start by adding the routes for the different screens that will be visible. Open app/router.js in your editor of choice.

import Ember from 'ember';

var Router = Ember.Router.extend({
    location: ProjectWireframesENV.locationType
});

Router.map(function() {
    this.route('about');
    this.resource('posts', { path: '/' }, function() {
        this.resource('post', { path: ':post' });
    });
});
export default Router;

The only content you’ll add to the app/router.js will be the body of Router.map(function() {. The rest should exist from the time the project was generated.

This should be enough that we won’t need to open the app/router.js for the rest of this example.

We’ll start modifying templates now, and the first we’ll work on is the app/templates/application.hbs. This template is the first template rendered and all other top level templates will render into the {{outlet}} of the application.hbs.

    
Project Wireframes




{{outlet}}

This new application.hbs uses a few Handlebars helpers. The first is {{link-to}}. This is how we create links in an Ember.js application. In the resulting html, there will be an anchor tag, but when clicked the browser will not load the url, but rather Ember.js will handle the routing and the browser location will be updated. The params for the {{link-to}} helper are value then route name. After route name is any data to pass to that route. In the case of the posts links, we are passing an int which will show up in the url. For {{link-to 'Post 1' 'post' 1}}, the url will end up being localhost:4200/1.

The {{link-to}} helper can also be used with open/close helper tags. {{link-to 'Post 1' 'post' 1}} could also be written {{#link-to 'post' 1}}Post 1{{/link-to}}. This format is useful when more conditions need to be handled to determine the links value.

The next helper is the {{outlet}}. This is simply where nested templates will be rendered. In the case of our /about route, the markup in app/templates/about.hbs will be rendered into the {{outlet}} helper in the app/templates/application.hbs template.

Speaking of the /about route, lets create the app/templates/about.hbs template. We can use ember-cli to generate the template.

$ ember generate template about

This will create the app/templates/about.hbs file for you. Now open that file in your editor and we’ll add some content.

    

        
About
    

    

        Lorem ipsum...
    

If you visit the app in the browser now, you should be able to follow the about link in the applications nav, and the content of the app/templates/about.hbs should display.

We’re going to generate the template for the posts route (for the / url). This template will render the list of posts, and will contain an outlet that each post will render into.

$ ember g template posts

ember-cli has shortcut commands for many of the commands. Instead of having to write out generate all the time, you can use g. Another alias to be aware of is s, which can be used in place of serve.

Edit the app/templates/posts.hbs, and add this content.

    {{link-to 'Post 1' 'post' 1}}
    {{link-to 'Post 2' 'post' 2}}


{{outlet}}

You should see this content when at the root url of the project, but you should not see this content when you visit the /about route. That is because the /about route is not nested in the posts route, so the posts template does not get rendered.

Now we’ll generate another template for the /:post route.

$ ember g template post

Open up the app/templates/post.hbs and we’ll add some content for the post.

    

        
Post 1
    
    

        Lorem ipsum..
        
Lorem ipsum
        
Subheading
        Lorem ipsum..
    

We’ve now created a few templates for the different screens of the blog application. The next steps will be to add css (by adding to app/styles) to style the markup we’ve added. You could just as easily add a css framework like Twitter Bootstrap, and change the markup in the templates to reflect what bootstrap can style. The combination of Twitter Bootstrap and Ember CLI makes for wireframes that can be created rapidly and are interactive.

Next, we’ll look into how to add a fake data server so that we can use other parts of Ember.js with fake static data. This means we can use Ember.js as if it is connected to a real API without having to write any server code. You can get a long way before ever needing to write the server, but the Ember.js should continue to work once you do get around to implementing the backend.

If you are looking for an Ember company, please contact us to discuss your project.