This is how we roll #2: Ember.js

by Lukas J. Hafner, Designer, Photographer, Gadget lover.

One of the very difficult tasks as a web designer is to find the right tools for the job.

Pretty much every day we find new projects in our news-feeds coming with the promise to make our lives easier.
Fancy CSS-preprocessor here, very cool jQuery-plugin there, and then some awesome template engine that makes everything else obsolete.

Being cool kids, of course we give most of them a try and every now and then we actually end up using something in our daily production.
This is the second piece of a series where we will share the tools that found a place in our ♥ and save us a lot of #%&@!!☁.
We hope they can bring some ☀ to your life!

booncon’s tools

What is Ember.js?

ember web application tool javascript

“A framework for creating ambitious web applications”, that is what Ember says about itself.
What does that mean? What makes it special?

It incorporates the MVC pattern and works in Javascript on the client side. You can program a single page application and Ember’s toolset helps you to actually build a proper application that can handle different states and manipulate data.

Ember feels like the framework to build “native web apps”, whatever that means 🙂
It’s logic and best practices really help you to create a clean application in pure Javascript.
What makes it so great is how it handles variables. It keeps track of wherever they are used within the current view and updates them automatically in real time if they get changed anywhere, or some value they are dependant on gets changed.

This is just great – no need to come up with complicated ways of handling these tasks with jQuery anymore.

Another framework doing similar things is AngularJS, which I have never worked with. It is supposed to be easier to get started with, so it might be worth a look.

Simple framework to build “native web apps”

How can I use it?

You can use Ember in a lot of different ways. The easiest might be to just download the starterkit and follow the official getting started guide.

We use it most of the time with our Middleman Template that you can download from here. Use it to very quickly set up a basic project and focus on the actual implementation of whatever you are trying to build.

This tutorial is a great way to get started. Just follow the steps and use our template as a base. You will see it is really easy to get started, and in no time you will have a working app 🙂

Download the starter-kit or our Middleman template

What did I not tell you?

Ember alone is great, but it absolutely makes sense to use in conjunction with Ember Data.
Ember Data is a library for loading data from a persistence layer, let’s say from a JSON API, and map it to models inside your Ember app. It takes care of caching requests and handling all the necessary calls to a REST server for example.

Another cool use is the ability to hook your app with the HTML5 local storage, just use this adapter.
There are many different adapters you can use for a lot of different data sources.

As if Ember isn’t cool enough Ember Data just makes it awesome

Should I use it?

If you plan on creating an ambitious web application, Ember might be just the tool to go with. If you know Javascript it is easy to get into Ember and the best practices really help you to focus on implementing whatever you have in mind 🙂

Oh Yeah!

Get your daily dose of web design inspiration from booncon PIXELS!