Getting to grips with Ember

Since October last year, we’ve made a company change in how we treat the JS frameworks.

Instead of going for a deliverable where we deliver plain HTML + CSS for the developers to integrate, we deliver code that straight-up uses the framework itself.

Before, our HTML/CSS would have to be translated to JS components. Now, they’re simply components in whatever system that the developers are using (Vue.js, Ember, Svelte etc.). We work in prototype git repositories or the software repository itself.

Many frameworks have worked hard to become “designer-friendly” and Ember is one of them. Granted, you still have to know a thing or two about web development to be productive in an Ember context, but things have become much more approachable than in the past.

Much of this is thanks to what is called Ember Octane, which is essentially a way to write components in Ember in a way that uses angled brackets (<>) – just like writing HTML.

An Octane button component might look like this:

<Button @variant="primary">Save</Button>

Ember components have traditionally been written in another way which is referred to as the “classic” syntax. I won’t go into detail about it in this post, due to the vast syntactical and logical differences — just know that it’s quite complex — but if you are curious just check out Ember’ cheat sheet.

Ember provides a nice learning path through its official guides and has a helpful community with a lot of Discord activity. I found help myself in channels such as #topic-ui, #topic-glimmer and #topic-octane-migration.

The Ember community seems relatively small but quite passionate. There’s the Ember Times: a weekly report about what is going on in the community. Recently, EmberConf had to be changed to a (partially) virtual conference due to COVID-19, but all the videos can be found online. And there’s some small orgs providing Ember training, such as EmberMap (paid video courses) and EmberCasts. 

A while ago I saw this interview with Yehuda Katz, one of the creators of Ember, and his backstory of being a designer really clicked with me. Around the one hour mark, they start talking about Octane. Yehuda talks about how as a designer you can take a bunch of HTML and CSS that you have written in a static way and “Octanify” it and how this is a realistic proposition, whereas to do it in Ember prior to Octane (or Rails or PHP for that matter) you would have to have the knowledge to write much more complex code.

Octane helps us as designers to be able to focus on the things we care about while helping us to bridge the gap between design and development. We are currently implementing Octane components in a large client project and my first conclusions are that it looks to be a really solid investment toward the future.