Single Pages Apps (SPAs) are the current flavour of the month. They have seemingly appeared from nowhere, but now it seems like every developer is talking about them. Wikipedia describes this pattern as follows:
In my experience they offer some advantages over traditional apps:
- Very responsive
- Rapid development time
- Data is usually provided via a REST API - making integration to other systems easy
along with some disadvantages:
- Can be harder to debug - you can end up in dependency hell
The high responsiveness alone makes SPAs worth of investigating. Responsive web apps == happy users!
Now I’m going to show you how to build one.
Ok, I’m sold. What now?
Ember App Kit gives you:
- A nice project structure
- GruntJS automation for minification, compilation, and deployment
- Ember SPA framework - with Handlebar templates, routing, controllers
- Unit tests with QUnit
Esentially, this kit gives us an out-of-the-box ready to go application. You can use it as a starting point to customise and build on for your own application.
Let’s get started
- Go to Ember App Kit’s git hub page and either (https://github.com/stefanpenner/ember-app-kit/archive/master.zip”>Download the template (and unzip it to a folder) or clone the repo.
- Install Node JS if you don’t already have it. Ember App Kit uses Grunt to automate various tasks, and grunt uses Node.
- Once you have Node, open a command window and do a global install of Grunt using the following command:
npm install -g grunt-cli
- Now install Bower. Bower is a client side package manager:
npm install -g bower
- Still in the commend window, change to your new folder from step one. Install your npm dependencies:
- Install your Bower dependencies:
Now run the app
The following command will run your app in debug mode and watch for file changes (restarting the app as needed):
…and this is the result:
Where to now?
You now have a fully working Ember app ready to build on. Check out the Ember Sherpas guide as well as the getting started guide to get some in depth detail on some of the features mentioned above. Be sure to leave a comment if you find this helpful (or not so helpful).