Web-client development with Ember.js and Windows Azure Mobile Services - Part 1

Recently I've been reading about JavaScript frameworks for creating single page applications, and wanted to try my hand at it. I also wondered how well Windows Azure Mobile Services would work with these frameworks. While there are several frameworks available, such as AngularJS, Durandal, and Batman.js, I settled on Ember. Not for any specific technical or political reasons, but mostly because I enjoyed working with it the most.

Over the next few blog posts I'll go through the process of creating a single page blogging application using Ember.js that uses Windows Azure Mobile Services for data storage, and then deploy it to a Windows Azure Web Site.

Single Page Applications and Ember.js

Single page applications normally have an .html page that acts as a container for the JavaScript that is the brains of the application. This JavaScript is responsible for generating the information displayed in the browser based on templates, and handles routing you between 'pages' (really just loading different templates) and communicating with data sources such as a remote REST API to retrieve data used by the templates.

Ember.js provides an model-view-controller (MVC) approach to designing a single page application, where the model and controller are implemented in JavaScript and the view is implemented in Handlebars, a templating language.

Development environment

I used Yeoman to create and maintain my project. Yeoman is a collection of tools that provides scaffolding (through the 'yo' tool,) build, preview, and testing through Grunt and dependency management through Bower. It's a little overkill for this project, and there were some rough edges, but overall it was valuable and I'll probably use it again in the future.

Here are the steps to setup Yeoman and associated tools:

1. Install Node.js. Note that you must have a recent version of Node, at least v0.8.something I believe. I used v0.10.4.

2. Install Ruby. There's a lot of ways to get this for each platform, including building from source. For this project I used RubyInstaller for Ruby 1.9.3-p392, and the associated DevKit install (TDM-32-452.)

3. After installing Node and Ruby, run the following commands to install Yeoman, Grunt, Bower, a scaffolding generator for Ember applications, and the Compass gem (required for CSS stuff):

    npm install -g yo grunt-cli bower generator-ember
   gem install compass 
   

   You may need to use sudo if you are on a Mac or Unix system. You can also go get a coffee or something while these install.

4. Install Git, as this is used by Bower. You can get this from a variety of places depending on your OS. I used the version installed with GitHub for Mac and GitHub for Windows.

Create and test the application

To create a basic Ember-based application using Yeoman, perform the following steps from a command-prompt, bash or terminal:

1. Make a new directory, change directories into it, initialize a Git repository, and then use the 'yo ember' command:

    mkdir emberapp
   cd emberapp
   git init
   yo ember
   

2. If you get errors on that last command, you might want to update your version of Node.js to v0.8 or higher.

3. One of the Grunt tasks created by default is a development server that can be used to test the application. Start the server using the following command:

    grunt server 
   

   This should launch your default browser and display a page similar to the following:

   

One of the nice things about the grunt server task is that it monitors changes to the application in real time. For example, if you open the emberapp/app/index.html file and change the title from 'Ember Starter Kit' to 'My Ember Starter Kit', once you save the file the browser window should update to reflect the title change.

Understanding the application layout

At this point you've got a bunch of files and folders under your emberapp directory and are probably wondering where, exactly, your application is. It's under the app folder. In here you'll find:

• Index.html - the web page that contains your application. If you look at this file, it's pretty empty other than loading JavaScript files. Notice that it loads scripts/app.js. This is the entry point for your application.

• Templates - the handlebar templates that are used to render the different 'pages' within the application. Currently there should only be two files here; application.hbs, which is the main body of your application, and index.hbs, which contains the view for the '/' or index route of the application.

• Styles - the CSS style sheets used by the application

• Scripts - the JavaScript that drives the application

• Images - any images used by the application

• Components - this is where Bower installs components used by the application

Adding components

While Grunt provides useful tasks such as the server used above, Bower provides component management. Sadly, not everything I'll be using is available through Bower yet, but let's add something that is - Twitter Bootstrap. Specifically, Sass-Bootstrap. If you're not familiar with Sass, it's an extension to CSS and the tools and tasks we have installed through Yeoman understand how to work with it and compile it down to basic CSS. But it provides a good example of using Bower to install a component.

Use the following command to install Sass-Bootstrap:

 bower install sass-bootstrap --save

After the command completes, you should have a new emberapp/app/components/sass-bootstrap folder, and a emberapp/bower.json file entry that specifies the version of Sass-Bootstrap that was installed. Similar to how the package.json file that describes Node.js modules required by your application, the bower.json file describes Bower components required by your application. The actual components folder is excluded from your Git repository, just like the node_modules folder.

To modify the application to use styling from Sass-Bootstrap, perform the following steps:

1. Edit the emberapp/app/index.html and replace the contents with the following:

2. Create a new file named main.scss located in the emberapp/app/styles folder:

3. Copy the glyphicons-halflinkgs.png and glyphicons-halflings-white.png from the emberapp/app/components/sass-bootstrap/img directory to the emberapp/app/images folder.

4. Save the index.html. If you have the Grunt server task running and a browser window open viewing the application, you should see the style of the page change once the index.html page has been saved. The difference is a little subtle at this point. Here's before and after screenshots:

   Before:

   

   After:

   

Summary

At this point you should have a basic Ember site, along with some useful tools. In the next part, I'll cover setting up the routes and templates to handle displaying and authoring of blog posts.

Comments

• Anonymous
  August 26, 2013
  "yo ember If you get errors on that last command, you might want to update your version of Node.js to v0.8 or higher." Not just that but also .. npm install -g yo

• Anonymous
  August 26, 2013
  (nevermind my previous comment .. since comments are moderated I can't delete it myself ..)