Hacking with Ember.js

Yesterday I went along to the London Ember.js User Group hack day, it was great fun and good to see a helpful community already developing around the project.

The idea was that we would group up and mix the more experienced Ember’ists with beginners, although with Ember being such a new framework that is changing quite rapidly there probably isn’t such a thing as an Ember expert. There were two themes that we were encouraged to build our hacks around: something that connected users to one another and anything that could be considered a game.

The Meetup was hosted by Enthuse.me who have built their product using Ember and are also sponsoring the Meetup group. The agenda for the day was pretty straight forward, get into groups, decide what you want to build (using Ember of course) and present back to everyone at the end of the day.

I had already been playing around with a simple chat application that used WebSockets and found a group that was thinking about doing something similar.

We spent the first few minutes discussing what our app should do and sketching out a rough wireframe. Soon we had a pretty good idea of what we wanted to build – a chat app that displayed messages on a map, rather than just a traditional list, plus everyone knows that a good hack always somehow involves Google Maps.

Enter Ember

In our team only myself and another person had laptops and we were both just beginning with Ember so our first few hours were spent going over the basics. Because Ember focusses heavily on convention over configuration a lot of things happen ‘magically’ without you having to call lots of methods explicitly. Previously I’ve used Backbone which is almost the opposite, requiring that you tell it exactly what you want to do.

The magic Ember does is smart and makes sense when you understand it’s conventions, but coming to it as beginners we found ourselves spending a lot of time inserting breakpoints to debug our app and to find out exactly what was happening as our code executed.

Previously I found Ember quite frustrating to work with, mainly due to the lacking documentation coupled with a rapidly changing API. It seems that I wasn’t the only one struggling to get to grips with it but the Ember team have acknowledged this and over the last couple of months the documentation has really come along and there are some good tutorials available.

The Hack day

As this was my first hack day I wasn’t really sure what to expect. In the end we didn’t manage to finish our app in time, for which there were some contributing factors, but we did at least have something to present at the end, even if it wasn’t feature complete. I really enjoyed the experience and found it a great way to learn something new.

There were a few things that didn’t work out in our group, but they were good things to learn from:

  • Architect then build. We had a good idea of what we wanted to do and even sketched out a basic wireframe. But later on I felt that maybe we’d jumped in too soon, with too broad an idea, as we ended up having to pause and think out what we were doing.
  • Hack things quickly. We probably spent too much time thinking about and implementing things the proper way, rather than hacking them together quickly and there was precious little time.
  • Don’t block. Even though there were only two of us working on the app, we ended up blocking the progress of one another as we waited for the other to implement functionality. Or having to resolve merge conflicts as we were working over the same lines of code.

In the end I think we probably bit off a bit more than we could chew, given that we were two beginners with very limited time to build something quite complicated.

Time’s up

When the time was up we had accomplished quite a lot, but sadly not enough to be considered for the hack day prizes.

In the end ours worked as follows: you load up the app and you are prompted to enter a username and grant access to your device’s geolocation, as you do each of these things it broadcasts that data over a WebSocket so each connected client can see a realtime list of connected users and their location on the map. Unfortunately we ran out of time just as we were implementing the functionality for users to send messages, but with a bit more time we probably could of nailed it. I’m proud of what we did manage though and intend to finish the app off, probably over the next few weekends. The code is up on GitHub and is of course very hacky and un-polished.

The hacks that the other teams built were really impressive:

  • iSpy – An IRL game in which participants volunteer themselves as “spies” and let “controllers” direct their motions. Think murder-mystery party meets speed dating, but real time and city wide, then colour in the rest yourself.
  • HatChat – A fun chat app that makes you pick an avatar instead of an alias.
  • An app that grabbed data from the Meetup API and displayed it on a map, with a nifty search bar that filtered out results by keyword.

Overall I’m much happier with Ember than I was previously. It’s got great promise and I really hope it can follow through. The documentation has improved considerably in a short time. There’s Ember 101, which has got easy to follow tutorials, that are short and best of all, include full working code examples. Thanks to the hack day now I know there’s a great community out there as well.

Thanks

Hi man,
It was great hacking with you. Excellent post. I too got very frustrated with Ember about a year ago when I came across it. Though there are improvements, it’s really the philosophy of the framework that one must agree with.
I know that I will be keeping a close eye on Ember in the future.
Hope to see you in other meetups.

BTW, did you end up finishing the project?