Jun. 25, 2015
Here’s our next entry under our Ticketfly Tech label, where we’ll be posting regular news from our engineering team that takes you behind the scenes of the technical world at the fly. This post comes from Jiangyue Zhu, one of the ‘fly’s Software Engineers.
One of the best components of Ember is the concept of Ember addon, which allows developers to share code among separate Ember applications without tedious and unnecessary copy-pastes. Our frontend teams starting work on new projects use “Bootstrap” for prototyping purposes, and we could take advantage of Ember addon to share reusable modules. I was motivated to create this simple Ember addon component: ember-bootstrap-colorpicker (Github repo), which is based on the original Bootstrap color picker project.
How I did It
This was the first time I’ve written an Ember addon. It needed a bit of elbow grease, but fortunately there are lots of well-written examples out there for newbies, especially for Ember component addons. Thanks to Ember CLI, it was very easy to create an Ember addon project via command. Simply enter:
The above command was all I needed to create a standard Ember CLI project specifically for an Ember addon, including some basic project folders:
- app/ — Its contents will be merged into the consuming applications namespace
- addon/ — The place to put my real component implementation code
- package.json — Needed for installing and publishing an npm package. The key is to put ’ember-addon’ under the ‘keywords’ attribute, which tells Ember CLI this is an addon npm package.
As you can see, this Ember addon needs a dependency, which is the original color picker library. We needed to make sure the dependency had been installed for the consuming app. Luckily, the Ember addon lets you do this using blueprints. All I needed to do was create a directory: blueprints/ember-bootstrap-colorpicker/ under the root directory. Then, I created an index.js file and used a function called addBowerPackageToProject under the afterInstall hook, which guaranteed that after the Ember addon got installed, the bower dependency would be put into the consuming app’s bower.json file and installed correctly.
How to install it
Since our frontend guild is using Ember CLI to set up our Ember projects, installation was simple. Ember addons are actually npm packages, so you can use the following:
The first command will install ember-bootstrap-colorpicker and put it into the consuming app’s package.json. The second command will generate the files following what has been defined in blueprints. In our case, it will install the bower dependency.
How to use it
Once the installation finishes without errors, we’re good to go. I can now use this component in our Ember projects. The addon component is accessible under the app’s namespace, which means it can be used directly in our template, just like any other component. For example, in your template, you could do:
As you can see, you are able to bind the component’s color property to your Ember model. Alternatively, you can manually set a color for this colorpicker:
You can find more options in the original documentation, including color and format.
There’s also the freedom to easily extend this addon component with customization. Create your own component, extend the addon, and override the default implementations. For example, in your own component file, you could try:
Love live music and code? Join our team! Check out careers at Ticketfly.