Guiding new Ember developers to the power of Ember Addons #EmberJS2018

This post is in response to the A Call for Blog Posts put out by the Ember team. There have been many excellent posts and I wanted to take this opportunity to share my experience as a new Ember developer and how I discovered the full potential of Ember.

In late 2016 I was looking for a JavaScript framework for Lineup Ninja, this would be the first proper framework I had been exposed to, my previous experience being mostly on the backend with some JQuery sprinkled on the frontend. After reading numerous Ember vs Angular vs React guides I decided to give Ember a shot.

As a newbie I dove straight into the excellent guides and I quickly got up to speed with the core concepts (routes, components, templates, services, etc..). This early exposure was enough to make me keen to continue to explore Ember more thoroughly. Two things that attracted me and many others were, and still are:

• ember-cli: Dedicated tooling to support the project, this meant that a lot of decisions on how to layout and build the project had already been made. As someone new to frontend development I had no idea how to make many of these decisions, if I was indeed aware they even needed to be made at all. Being able to ‘outsouce’ these decisions to the community was a massive boon for someone new to the frontend.
• The release cycle: As someone with a good few years of experience under my belt, a solid release cycle with LTS builds and well thought out upgrade plans means a lot more to me that some whizz-bang new feature. I was looking for a framework that my project could rely on for the long term and Ember hit the mark.

It wasn’t long before I started to discover the wonderful world of the Ember Addon ecosystem and it’s this that brings me to the point of this post. There are a huge number of addons available, some of which I would now consider core to my experience as an Ember developer. However for each addon I had to go through a discoverability phase.

I love Handlebars but until I discovered ember-truth-helpers and ember-composable-helpers I thought I would be writing a lot of supporting code to achieve logic that I have become used to in other templating languages. While I can appreciate the argument for keeping logic out of templates, being able to do simple stuff like this with the eq helper is invaluable:

{{#each things as |thing|}}
    {{#if (eq thing.value 'someValue')}}
        {{thing.name}} is someValue
    {{else}}
        {{thing.name}} isn't someValue, it's {{thing.value}}
    {{/if}}
{{/each}}

There are plenty of ways you could achieve the same thing without the eq helper but being able to use it and many similar helpers has been good for my productivity.

Similarly ember-concurrency is the solution to so many problems I never knew I had. I now use this addon pretty much exclusively instead of traditional actions. It forces me to think about the concurrency of an action, should it drop repeated invocations, queue them, or some other option.

On the CSS front I started out with a steadily growing stylesheet of doom, then discovered ember-cli-sass and ember-component-css. This enabled me to locate my stylehseets with my templates and this really helped CSS feel like an integrated part of the component system.

For internationalisation I chose ember-i18n, but to this day I’m not sure if I should have gone with ember-intl. 🤔

The above is simply summarised into 4 questions:

• How do I make the Ember templates more capable?
• How do I manage concurrency effectively?
• How do I manage my CSS?
• How do I manage i18n?

I found myself asking these questions fairly soon after completing the guides. I found answers either via Googling or asking in the community Slack. The solutions I have picked above are certainly not the only solution to each problem, they’re just the one that worked best for me at the time.

What I propose for #EmberJS2018 is that the guides are extended to include topics around similar questions which must be faced by many new Ember developers as their application becomes more and more ambitious.

I can appreciate that the core team may be reluctant to recommend one specific addon over another, or be seen to officially sanction something that is provided by a third party. However I think as a newbie Ember developer having guides around these topics would be invaluable. Where there are choices to be made, eg ember-component-css vs ember-css-modules, highlighting the choices would be useful.

The learning team have recently relaunched the guides as an Ember project with the goal of making them easier to contribute to. Hopefully this brings an opportunity for people like myself to get involved and help write some of these guides I have been talking about.

The more I use Ember, the more I appreciate it’s full power. Hopefully we can find a way to help new developers discover this sooner!

Thanks for reading!