Dec 23, 2019 – By Jared Galanis

This is the 23rd in our DecEmber series–"Countdown to The New Year: 31 Days of Ember Addons". We plan to highlight a new addon each day until the new year, and we hope you'll join us for the fun!

Day 23

For the 23rd edition of Countdown to The New Year we're going to take a look at two great design library addons, ember-bootstrap and ember-paper

Ember Bootstrap - What It Does

The ember-bootstrap addon is for using the Bootstrap design library in Ember applications. This addon provides a native Ember component library for some of the more commonly used Bootstrap components.

The ember-bootstrap addon can help you can integrate Bootstrap into your application quickly, and in an idiomatic Ember manner.

There are many related Ember addons that integrate with Ember Bootstrap to provide additional features on top of Ember Bootstrap, such as form validation and changesets.

Ember Bootstrap - Why I Like It

If you're looking to add Bootstrap to an Ember application, ember-bootstrap makes doing so incredibly straight-foward.

The ember-bootstrap addon's clean API's and native Ember components also provide an ergonomic way to use Bootstrap in your Ember application, and all without using Bootstrap's JavaScript.

Writing forms or modals with these components is a very enjoyable experience and has streamlined the code in several of my projects.

Also, recent versions of ember-bootstrap have added additional support for improving accessibility by using ember-focus-trap to implement focus trap for modals and keyboard navigation of dropdowns. ember-bootstrap has even added ember a11y tests to the addon's test suite!

It gets better, too- ember-bootstrap is Octane ready and has refactored it's own components internally to use native classes and angle bracket syntax.

The ember-bootstrap addon has excellent documentation, which you can read up on here to learn more about how to use the addon.

Ember Paper - What It Does

If you're looking for a solution to add Google's Material design library to an Ember application you can use ember-paper to do so! ember-paper aims to encapsulate everything possible in Material in Ember components.

The ember-paper addon provides an extensive library of components, from buttons and sliders to selects and modal dialogs.

All of ember-paper's components are written in a modular and elegant Ember way.

The ember-paper addon is also extensible and its component coverage is widened by a set of addons that can be used in combination with ember-paper to extend the library's reach (a notable example includes a modal manager).

Ember Paper - Why I Like It

Sometimes you really need an Ember focused solution for Material design and ember-paper provides a super easy-to-use and well built set of Ember components to get you up and running right away.

I've used ember-paper in at least one project my experience was a very smooth one. Components are written with adopted Ember design patterns in mind and they are built to fit into your work flow.

The component API's provide thoughtful touches and I've been able to build out an entire UI without knowing much about Material design because of them.

You can write most components in block-form so it's effortless to wrap what you need with the solutions that ember-paper provides.

Octane support is something that is slated for the future, but is not yet complete as of today.

In keeping with many widely used Ember addons, ember-paper provides a great documentation site that covers the usage and API's for all of its components. You can read up on the details here.

Do you use these addons? Or any like them? We'd love to hear about Ember addons that bring you joy!