So first of all a disclaimer: as the author of ember-bootstrap, I am certainly a bit biased here! ;)
But I think I have strong arguments in favor of ember-bootstrap, otherwise I wouldn't have invested that ton of work. So the main one is that it follows the programming model of Ember, while using bootstrap.js directly doesn't and would often feel awkward in an Ember app:
- You use components to render things, which in turn render the trivial markup that Bootstrap expects, rather than spreading Bootstrap flavored static markup all over the app
- Components in
ember-bootstrap strictly follow the so called "Data down Actions up" (DDAU) programming model in Ember
- that means through declaratively assigning properties which create data bindings, the state of your app "flows" through your UI, so the rendered DOM is a direct function of your state. This is the "Data down" part, which is different than having to imperatively "call" things to achieve the same effect (like
$('#myModal').modal('show'))
- When the user interacts with your UI, actions are called, which are handled somewhere up the component tree (e.g. in a controller). These transform your state, which is used to update the UI again (unidirectional data flow)
If that sound too abstract, take this simple example of a modal component. In ember-bootstrap you would do something like this:
{{#bs-modal-simple
open=this.showConfirmation
title="Please confirm"
onSubmit=(action "submit")
onHidden=(action "close")
}}
Some {{dynamic}} content.
{{/bs-modal-simple}}
- The necessary Bootstrap markup is rendered automatically. You just use the component and interact with its public API (properties and actions)
- Displaying the modal would happen by setting your
showConfirmation state to true (or even having that computed automatically with a computed property). In bootstrap.js you would somehow have to imperatively call $('#myModal').modal('show')
- the assigned actions are automatically called on your parent (component or controller) when the user initiated events happen. With
bootstrap.js you would have to attach event listeners first in your JavaScript (and later remove them!):
$('#myModal').on('hidden.bs.modal', function (e) { // do something }).
- This also requires manual book keeping, while components have their life cycle hooks, so you can just dispose them at any time (like having them in an
{{#if ...}} block or changing routes).
These are the main points from my point of view, but there are even a few more:
ember-bootstrap plays nicely with Ember's testing layer. With bootstrap.js you will at some point run into issues, for example the code uses setTimeout() calls for handling of transitions, which Ember's testing helpers don't know of, and so don't wait for. But often you have to rely in tests that your app is in a "settled state". ember-bootstrap instead integrates into Ember's so called Run
Loop, so things like await click('#show-modal-button') just work (i.e. the modal will be fully visible when the Promise resolves).bootstrap.js needs jQuery, while ember-bootstrap does not.
And to add one more thing: all of the above applies to Bootstrap components that need JavaScript. For just static components like badges you can just write the appropriate Bootstrap flavored markup. In fact ember-bootstrap intentionally does not provide components for these trivial Bootstrap components to not add any useless overhead.
