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.


ISO 3103

ISO 3103 is a standard published by the International Organization for Standardization, specifying a standardized method for brewing tea


I’ve had quite heated debates in the past about how to brew proper tea, but this should resolve any future disagreements:

If the test involves milk, then it is added before pouring the infused tea.

Ember & Ember Data

Playing around with Ember this weekend I had a very frustrating time getting it working. Whilst the documentation isn’t bad per se, it is completely devoid of working examples, instead it only has snippets of app and template code.

Since it’s such a new framework there have been significant changes in the last year meaning any tutorials you might find online, even from a few months ago, are out of date and may include no longer functional or no longer recommended practices.

I did manage to find one good screencast by Toran Billups, as I followed along with the tutorial with my own code and got to the point where I needed to define my Model I found that Ember handles this with Ember Data. This isn’t currently part of Ember’s core and isn’t available for download, instead you have to clone the repo and build it using Bundler.

At this point I almost gave up.

For some reason, possibly related the version of Ruby installed on my machine, it simply refused to compile and not being a Ruby guy I didn’t really fancy spending the rest of my evening tracing obscure debug messages in a language I didn’t really understand.

After some food and some thinking I came back to the problem. Rather than trying to compile it myself I figured that someone else must of done this already. Googling around I found a few versions, one of them even on the project’s GitHub download page, but none at the latest version. I went back to Billups’ screencast to just watch the rest without following along when I spotted a link to his GitHub repo of the project.

‘Aha! that should have the code I need’ or so I thought. GitHub was having a ‘Major service outage‘. Great. Fortunately the outage wasn’t so major that I wasn’t able to download the zipped version and extract the elusive library inside. At this point, if it had been a game, it would of been a little bit like this.

Now I can understand that the Ember folks make you jump through the compile hoop because things aren’t stable yet and they don’t want loads of bug tickets for things they already know are broken. But raising the bar too high doesn’t help either, it’s much more helpful to newcomers to have a simple working demo and up to date documentation than a suite of unit tests. I understand that Ember is still new, it’s not even 1.0 yet, but a little help for us newbs would go a long way towards building a stronger community around the project.

It’s worth saying that after all that when I finally got my basic little app working, it worked great and I’m looking forward to doing more with Ember in the future.

Tl;dr: Open source projects: always be newb friendly. You can download Ember-data.js here.

Responsive ROI

Impressive stats:

We took a popular ecommerce store (O’Neill Clothing) that we’d recently redesigned and monitored conversions, transactions and revenue for three weeks. Then we quietly deployed the responsive conditions to the already live site and monitored for another three weeks.

Here’s what we found:

Conversions: + 65.71% Up
Transactions: + 112.50% Up
Revenue: + 101.25% Up

Android Devices:
Conversions: + 407.32% Up
Transactions: + 333.33% Up
Revenue: + 591.42% Up

You like apples?Electric Pulp

Trello: To-Do re-done

Holiday planning with Trello
Holiday planning with Trello

We use Jira exclusively at work, but Trello is a good lightweight alternative that I’ve just started playing around with. Great for getting a really quick overview of tasks.

Microsoft Surface available disk space

Engaget reports that the Microsoft Surface Pro requires 45 GB of disk space for the OS and pre-installed apps, leaving with you just 23 or 83 GB available for the 64 and 128 GB models respectively. By comparison OS X Mountain Lion requires 8 GB of space and iOS only 2.5 GB.

Sounds like it needs some serious refactoring and aggressive culling of old drivers.