Awesome Ember Addons
I’ve jumped back into the Ember world after a long hiatus for a client project recently, and I’m really enjoying being back.
Ember shares many similarities with Rails, has a fantastic community of passionate people, and the folks behind the framework are the open source maintainers I’ve come to respect the most.
One of the greatest things I’ve found since coming back to Ember is the staggering number of Ember addons that boast over 4k npm packages.
Back in 2015, I wrote my own small addon. While the number of addons was big back then, it was almost 1/4th of the size it is today. That is damn cool in my opinion.
When I started getting back into the Ember dev environment, I found myself loving a number of new great addons.
This post is a short intro for a few of my personal favorites that I’m sure to use on any of my future projects, and you should use too.
tl;dr : I’m going to give a short intro to these Ember adons and show why they’re awesome:
- ember-decorators — A collection of awesome Ember Specific ES7 decorators.
- ember-cli-prop-types — A library to add awesome runtime prop-type checks to components.
- ember-awesome-macros — A collection of awesome (literally in the name) computed macros.
- ember-truth-helpers — A collection of awesome HTMLBars template helpers to avoid simple computed properties only used in templates.
- ember-route-action-helper — A library to add an awesome
route-actionhelper for bubbling actions to the route without a controller.
How cool is it that you get passed the values for the properties that you’re writing a computed prop around? I love that!
If you’ve never written any React code, React includes a cool way to do runtime property type checking by declaring the property names, typing in the component definition, and then doing assertions against those props in development mode.
Anyway, some smart folks took the React prop-types library and used some glue and duct tape to make it usable on Ember components, which is great thinking.
Here is an example from one of my own projects:
This also serves as some great documentation as well — now our component has a written contract in the code, which is something that I always did via class comments. Less comments, more type checking. Good stuff.
You know all the good stuff in
Ember.computed.*? If you don't, you should. Think of ember-awesome-macros (EAM) as
Ember.computed, but extended and composable. A ton of the trivial operations you would normally write a full computed property for can easily be handled by EAM.
Here are some good examples:
The brevity of these macros is super cool and it saves a good deal in not having to write these abstractions yourself.
How many times have you written a
Ember.computed.or or a
Ember.computed.and because you needed some Boolean logic in a Handlebars template? A bunch right? No more! ember-truth-helpers provides a bunch of simple template helpers that will let you skip over all that. Here is some of the logic you can do easily:
Avoid one off computed properties, go home happy.
A simple one, but a good one. Avoid creating a controller for your base template just to pass actions. Use the
route-action helper to easily bubble your actions to the current route and keep all of your actions in your components and your routes. Here is an example:
These are just a handful of some of the great Ember addons that are out there. One other that I didn’t include, but I hear people rave about for complex apps, is ember-concurrency. Definitely worth checking out if you’re managing a bunch of async tasks in your Ember app.
Share your favorite Ember addons in the comments below!