Leveraging Ember Addons to Distribute Reusable Blocks of Code
Developers often run into situations where they find themselves reusing similar sections of code. These can range from complex libraries of components to small utility functions that help with common tasks. Whether these portions of code solve the same problem, or are tweaked to fit the current needs, it can be very beneficial to generalize these solutions to meet each problem’s criteria. In this article, we’ll take a look at how Ember addons provide a simple way to isolate and distribute these reusable chunks of code. We’ll also explore some tips for planning, creating, and publishing these addons.
What are JavaScript Packages
Before we talk about addons, we should take a glance at JavaScript packages. Packages are open-source solutions to problems that developers face on a daily basis. When developing, you might run into a specific complex problem and think to yourself, “Do I really need to re-invent the wheel here?” More often than not, the answer is no! For example, manipulating and parsing dates can be a real headache. Thanks to the wonderful world of open-source software, JavaScript has a package named “Luxon.js” that provides a tremendous amount of functionality for working with dates. Packages like this one can be found at npmjs.com.
Ember Addons vs. Packages
So what exactly are Ember addons? Well, they’re really just JavaScript packages designed to be used within the Ember.js framework. They provide the same benefits as packages – organizing logically connected code, providing a simple way to re-distribute code, separating reusable code, and more. Despite their similarities to packages, addons have some additional features. Ember provides a handful of command-line tools and guides that help with creating addons. Addons are also published to the Ember Observer (as opposed to packages’ NPM home), a community site that displays every Ember addon. Furthermore, addons are hooked directly into Ember’s build process. This allows addons to modify the build of parent applications.
Why Ember Addons are Useful
First, let’s have a look at the benefits of the code encapsulation that addons provide. As projects get larger the complexity of the code tends to increase. This may cause serious problems when seemingly easy fixes become frustrating battles. One small change may lead to cascading issues throughout the application. A solution to this problem is code isolation. The more you plan to decouple features from each-other, letting each encapsulated section do one job (and do it well), the less time you’ll spend dealing with these cascading issues. A hidden benefit of encapsulation will be noticeable when writing tests, as each logically grouped code section becomes testable as a standalone item.
Addons allow developers to isolate the functionality they need from code in its own environment. In addition, externally maintained addons allow multiple developers to work synchronously without one’s changes affecting the others. This can help the team coordinate and plan ahead.
Addons also provide a straightforward way of sharing functionality. When code is exported to its own addon it becomes incredibly easy to import into different projects. This speeds-up development as common problems are often solved once, and solutions reused. Addons can also provide a common ground for developers to reference. When teams are using the same addons it becomes easier to discuss, improve, and make changes to code that everyone will use.
At this point we have enough evidence as to why addons are useful and important. Now we can dive deeper into how addons come to life and are published for the community to use.
Creating and Publishing Ember Addons
A lot of times you notice that you’ve solved the same problem repeatedly in different projects or you’ve created something that you feel might help others. You could also be developing a complex feature within a project and feel the need to isolate its code for future export. Any of these situations provide a solid reason for creating an addon.
But before getting to work on building the addon, you should check if there’s an existing addon which implements what you’re trying to do. If there is, then adding it to a project is as easy as running “ember install (addon name)” from inside an Ember application. If an addon doesn’t quite do what you need you can always submit a pull request with your suggested functionality. It’s a great way to give back to the Ember community.
If you don’t find an existing addon then congrats – you’re going to make a brand new one! You should start by planning out its functionality. The planning of an addon’s structure and “what it should do” can be very helpful. A lot of questions should be reviewed before starting development. Who will be using this addon? How will these people want to use it? It’s important that these considerations are reflected upon early so you can create something that meets the requirements of those using it. Additionally, it’s typically a good idea to plan on generalizing the functionality of the addon so others can easily mold it to meet their specific needs.
After you’ve set up an overall plan it’s time to get to work by setting up the addon. Ember’s command-line tools allow us to run “ember addon (addon-name)” from any directory. This creates the base file structure for the addon. We then make sure the code works and attempt to generate at least one or two different examples using the addon’s functionality. Once we have a working prototype, we try to optimize, clean up, and make general improvements to the code. Writing clean, concise, and well-documented code allows you to more easily improve and fix the addon in the future and makes it easier for others to contribute. After cleaning things up and checking over the work, our team reviews the code to provide constructive feedback and prevent any missed issues. Finally, it’s time to publish the addon to the open-source world and allow others to benefit from (and hopefully contribute to) our hard work!
Final Thoughts
We took a small glance at the open-source software world and how the Ember.js community has provided a convenient tool for contributing to that world. Addons provide a smart and useful way for developers to share solutions to common problems. At Gavant, we take all of the above into consideration when putting time into researching and creating addons. From developers to upper management, we have an understanding of the importance of open-source development and the impact it can have on improving development efficiency.
For a more technical reference on addons in Ember.js, check out https://cli.emberjs.com/release/writing-addons/.
For a deeper dive into the impressive addons the Ember community has created, check out https://emberobserver.com/.
If you’re interested in some of the cool published addons we’ve made at Gavant, check out https://github.com/Gavant.