Though I’ve been working with Rails for years, I started my first Ember.js client project a year ago. It was a bit confusing stepping into a world where the JavaScript framework controls everything. I really started to love Ember once I got over the learning curve. I realized why I loved Ember so much: Ember is for designers!
Implementing the Best Experience
As a developer, my primary job is to work with our clients and my teammates to determine the best interface for users to interact with the application, and then implement it. Usually this involves questions like: “We would like to be able to click a button here, have the text slide away, show an image over here, and also update this text over here, as the user types. Is that possible?”. Our response to this question is typically: “Yes but that will take more time”. As a team, we have to make decisions on the trade offs between desirability and feasibility. Ember helps remove a lot of those trade offs by making common patterns easy. The live updating nature of Ember gives us a very fast way to implement great user experiences. I love being able to answer questions like those above with: “Sure, that should only take an hour or so”.
Stop thinking about the DOM, think about the experience
Ember is a new way of developing on the web. In traditional JavaScript web development, we have to constantly think about the DOM and what we are changing to get it to look the way we want. With Ember, we move that knowledge into our models and start thinking of our application in live updates instead of page refreshes. We move away from being concerned about what has to change when a value changes, Ember is already taking care of that for us. Now we can spend that extra time thinking of ways to provide the best user experience.
Small Things, Big Wins
I’d like to show a few quick things that Ember has built-in that make our life easier while designing applications. Other frameworks include parts of these, but having so many ‘standard’ things working out of the box can help speed up development of great interactions.
Each with an else
This is actually a feature of handlebars but every time I show this to someone new, they are amazed at how nice it is. If we are trying to display a list, we typically want to also show something different if there are no items in the array. This may look something like this:
{{#if items}}
{{#each items}}
<li>{{name}}</li>
{{/each}}
{{else}}
<li>There are no items in your list</li>
{{/if}}
The Ember way:
{{#each items}}
<li>{{name}}</li>
{{else}}
<li>There are no items in your list</li>
{{/each}}
Now we can easily show our users when they have an empty list,
and we avoided an extra conditional.
Live bindings in Ember take that one step further.
If the user adds an item to the list,
it will automatically update the page to show the name,
and remove the item in the else area.
Active Links
In most projects,
there is a navigation menu with links to various places.
Ember makes it easy to highlight the user’s current page.
If the link is for the current page,
it will automatically get an active class.
This also works with nested URLs.
Without any extra effort,
we can now style our links
to let the user distinguish which link is their current location.
Learn More
This only scratches the surface of what is possible using Ember. In the coming weeks we are going to publish a series of posts dedicated to describing what designers should expect when moving onto a new Ember project and the tools they have at their disposal.
