7 Reasons to Use Ember.js

in Development

Your time is valuable, which is why it’s vital to have tools that are not only enjoyable to use, but that let you spend your time creating features and helping your customers. For me, that’s Ember — it helps me make better things faster, whether I’m working on a small project or large project, alone or on a team. So today I want to go over 7 reasons why I use Ember, and how it can impact you.

1. Built-in Best Practices

Ruby on Rails popularized the idea of “Convention over Configuration”, and since then the idea has spread to other languages and ecosystems fast. Proponents like that you can get started right away without worrying about the perfect thing to do, since the choices made by the framework are right in about 90% of cases. Opponents dislike that it appears to limit their freedom — making every choice, however trivial, is part of what they enjoy about the development process.

However, I don’t know anyone who opposes best practices. Best practices are the accumulation of the software community’s wisdom, collected so that you can benefit from others’ experiences instead of having to learn everything the hard way.

Some communities collect theirs in external documents, like blog posts or wikis. This is valuable, but it requires constant vigilance on the part of anyone who wants to follow these practices. If they want to maintain an app that follows these best practices, they must continually review the best-practice documents, as well as any code they maintain. If others contribute toward the codebase, they must be trained in best practices, or the code will start to rot. It gets worse if everyone has small deviations from the agreed-upon best practice, or if they change over time (as most inevitably will). And with a large long-running project, these factors can lead to incoherent code.

Ember sets itself apart by collecting the best practices internally. While there is freedom to make changes to how things are done, best practices are built into the structure of the framework. This makes it easy to do things like issue warnings when practices have changed, sometimes pointing to the exact line of code that needs to change. There’s even an automated tool that helps you perform some of those updates, so the process of keeping up with best practices is greatly simplified. And this becomes even more invaluable when you’re working in teams.

2. Integrates With Large Teams

How long does it take someone to get up and running on your 100,000-line codebase? Days? Weeks? Now how would it feel if it took just hours?

When I started work in a client’s gigantic codebase, I was able to make meaningful edits within an hour. It still took time to become completely familiarized with the codebase because the domain knowledge required was unique, but the process was sped up drastically by the fact that the style and structure of the codebase was the same as every other Ember app I had worked on before, just much larger. So what does this mean for a company? In a lot of cases, Ember can lower the time it takes to train someone new to your organization.

Ember can also speed up the process of moving developers between projects. I know several devs that converted from Backbone to Ember. When using Backbone, the framework did not meet all of their needs, so they built ad-hoc frameworks on top of it and switching between apps involved learning a new, ad-hoc, undocumented framework. After converting to Ember? Technology is no barrier to switching projects — any barriers left are in domain knowledge and understanding the user, where they should be.

By keeping your tech stack consistent and coherent, Ember can help make your organization more agile and better equipped to handle change. By building on the shoulders of giants, Ember helps you tackle more ambitious challenges than your resources would otherwise allow.

3. The Future of the Web, Today

JavaScript is evolving at an astonishingly fast pace, but because of legacy browser support, it can sometimes seem like we’re stuck several generations in the past. Fortunately, tools have cropped up to help bridge that gap — foremost among them is Babel.js

When using Babel, you can write ES6/2015 and ES7/2016, and it will transpile to a version of JavaScript that can be used by IE9 and above (as well as IE8, if you’re willing to forgo a few of the more difficult-to-transpile features). That means no more worrying about browser support percentages — you can use the new features as soon as the spec is ready (and even before, if you update your configuration).

Some of the amazing benefits include reducing scoping errors with fat arrow function declarations, organizing your code with modules, and making more readable dynamic text with template strings. There’s also a huge list of new features over at the Babel website.

So, how do you get all this wonderful future goodness into Ember? Simple — it’s already there. If you’re using ember-cli it comes built in, with zero configuration necessary. Just go to any JavaScript file in your Ember project, use a template string or a fat arrow, and it will just work.

4. Coherent Dev Tooling

Of course, Babel is just one part of the Ember toolchain. When you use ember-cli — the official command line interface for Ember — you gain a host of other productivity-enhancing tools for free.

The first of these is Broccoli.js — a highly efficient build system that can concatenate, transpile, and minify (along with much more) your code. Broccoli’s tree-based incremental rebuild system means that it can have fast (sub-second) compile-times, even on large projects. It also has a syntax that’s more concise and coherent than task-runners-turned-build-systems like Grunt.  Even better, Ember’s integration with Broccoli sets up the most common tasks for you — such as concatenating ES6 modules and transpiling code with Babel — and makes other things — like setting up a css pre-compiler or importing a Bower library — super easy.

Next up is the combo of JSHint, testing, and LiveReload. JSHint and LiveReload integrations succeed by placing the libraries directly into the build process. So when you change a piece of code, it triggers a Broccoli rebuild, which then triggers a browser refresh. Within seconds you can see the result of your work, just by hitting save.

Testing is also built into the ember-cli toolchain, so while you still have to write your tests (sorry, Ember can’t do everything for you, yet), you do get a testing stub with all the default boilerplate generated whenever you generate a file in your app. You also get automatic test runs with LiveReload by visiting the ‘/tests’ route, the ability to switch testing frameworks with just one line, and a set of convenient helper methods — some for acceptance testing, others for various types of unit testing, and the ability to write your own custom helpers.

There’s more wonderful stuff baked into ember-cli, but we’re going to move on to the Ember Inspector. It’s an amazing browser plugin (for both Chrome and Firefox) that lets you explore any Ember app. It’s basically a multi-perspective x-ray into the guts of your running app. And even better, you can change values in the Inspector, along with a button that brings the object you’re inspecting into the console. Once you learn to use the Ember Inspector, you can drastically speed up your feedback cycle in several common situations.

5. Amazing Features

Ember is just as much of a philosophy and an ecosystem as a framework (hence all this talk about best practices, organizational agility, and dev tooling), but it’s still a framework, and that framework is awesome.

One of the things that set Ember apart in the early days was its Router. The early days of the web were all about the URL — linking and sharing specific pieces of content. However, JavaScript-based applications broke all that by putting the entire application under one URL.  Fortunately for us, Ember’s Router allows you to stop breaking the web. You get URLs and a working back button by default with every route you create, and the API is easy to use (and familiar to those with experience in server-side web frameworks).

Another feature that sets Ember apart from other JavaScript is the object system to build on — Ember basically recreated the best parts of Ruby objects, and then built the rest of the framework on top of them. While JavaScript’s prototype system is deemed advanced magic, you can understand the basics of inheritance and mixins in just a couple of minutes. Our object-oriented programming fans will be cheering at that last paragraph, while the functional programming fans may be a bit sad, but don’t worry — we’ve got stuff for you too!

Computed properties might be my favorite piece of Ember tech. You declare a function as a property, give it dependent properties, and use that function to update the property whenever one of the dependent properties changes. One way to think of computed properties is like a more powerful Excel. In an Excel sheet, you can give a cell a function that adds together 10 other cells. Those 10 other cells are the dependent properties, and the result you get from adding them together is the computed property. When you change any of those 10 cells (the dependent properties), the cell with the function (the computed property) changes based on the function. Ember gives you that power, but expands to the whole suite of programming expressions — arrays, object, strings, and more. If you’d like to learn more about how computed properties work, check out the official guides or see them in action.

6. Giant Ecosystem

Of course, just because you can build it from scratch doesn’t mean you want to build it from scratch. That’s why Ember has a huge selection of addons (over 1,500 at the time of this writing), most of which can be installed in one line.

There are the heavy hitters like Ember Data for persisting your state and liquid-fire for animating transitions. These come from core team members and, like ember-cli, are officially considered part of the project even though they’re both optional.

However, addons can be published by anyone, and most are. Some addons handle common instances of internal complexity. Ember-simple-auth helps you manage authentication and authorization, abstracting away common patterns and allowing integration with several other addons, such as torii for OAuth authentication. These are just a small sampling — you can find over a thousand more addons, tagged and categorized at Ember Observer.

7. Stability Without Stagnation

So we’ve seen the amazing things Ember can give you — the productivity benefits, the dev tooling, and the ecosystem, as well as the features in the framework itself. But we’re long-term thinkers, and we want to be able to maintain this application for a long time — we don’t want to be left behind, either by the framework breaking compatibility or by the framework failing to evolve.

So how does Ember stack up? The philosophy of Stability Without Stagnation, first introduced in Ember’s Road to 2.0 RFC, is a clear call to continue the march of progress while also being careful not to leave anyone behind. Instead of just breaking stuff in new major versions, as has been the practice for many frameworks, Ember gives deprecation warnings in earlier minor versions. If you’ve cleared those deprecation warnings in the last version of the 1.x series, then you should be able to transfer to 2.x without incident. So you’re able to upgrade to a major version without anything breaking.

Of course, there are still some problems that crop up. Private APIs are not held by SemVer, and even though the team tries to give a deprecation warning one minor version before changing a private API, sometimes they’ll miss one of the more obscure private APIs that you (or an addon) are using. The core team is working on a way to reduce that, but in the meantime, I’ve created a guide for upgrading Ember to help alleviate any issues.

Lots of Love

By now I’m sure you can see how many reasons there are to love Ember, and you’re starting to get an idea of how it can fit into your own workflow. There are lots of ways to get started using it — I’d recommend this introductory bookfor beginners, or these videos for intermediate developers. And of course you can always check out Code School’s beginner Ember.js tutorial, Try Ember — the first level is free so give it a try! Let me know your thoughts or favorite Ember resources in the comments section below (tip: click “View Discussion)!

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Jeffrey Biles

Jeffrey Biles

Jeffrey is an Ember developer in Austin, Texas. He has a passion for teaching, and splits his time between running Ember Screencasts and consulting. If he ever runs out of things to screencast about, he’s going to make a game that gets kids addicted to math.

Might We Suggest