Ticketfly Tech: Ember addon – Bootstrap color picker

Ticketfly

Jun. 25, 2015

Ember-logo

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.

 

At the beginning of this year, our frontend engineering team made the decision to choose Ember.js as our frontend JavaScript framework. We believed this would help maintain our codebase and boost productivity over the long term. After learning, researching, and experimenting with the framework, we were impressed with the features — such as Ember Data, Component, and Ember CLI — and convinced this was the right move for us.

 

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:

ember1

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:

ember2

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:

ember3

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:

ember4

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:

ember5

That’s how we successfully implemented Ember addons at Ticketfly, and proves just how easily code can be shared among separate Ember applications, eliminating the need for repetitive work. Our frontend engineering team has made great strides with Ember.js as our frontend JavaScript framework, and the team has had a lot of fun diving head first into the challenge of learning, writing, and executing new code.

 

Love live music and code? Join our team! Check out careers at Ticketfly.

Previous Post

View All Posts

Next Post