AngularJS and Bootstrap

Concerns about Bootstrap in AngularJS seem to come up a lot lately (especially on Google+) that I feel are causing problems.

We have 2 projects: the AngularUI Bootstrap project which is recreating everything in pure AngularJS code, and removes the Bootstrap.js dependency. Then we have the new Angular-Strap which simply wraps the existing Bootstrap.js creating additional dependencies and imposing a fairly opinionated templating scheme.

If you go with AngularUI's version, then you are using a project that won't break if Bootstrap's API changes, that doesn't have additional JS dependencies, and is tightly integrated into AngularJS (meaning triggering events from controllers, etc is more seamless). On the flip side, if you end up including the bootstrap.js regardless, you don't see any real benefits. All of the components may not work as perfectly / smoothly and you will have to wait (or contribute) until the project gets up to speed.

If you go with Angular-Strap, you are essentially getting a few directives that are not necessarily specific to bootstrap, and some bootstrap plugins wrapped in a AngularUI-Passthrough pattern with very specific configurations. This means you MUST have bootstrap.js, and if their API changes, the lib may break. In addition, any option that hasn't specifically been coded for is completely inaccessible. But this starts to run parallel to the AngularUI's version of waiting for the features to be developed. Overall, since the existing plugins are simply being wrapped, it becomes easy to push out new versions or components when he decides to add wrappers.

Personally, I have reservations about either approach. I believe it's better to provide the basic building blocks and have developers create their own DSL and internal directives/templates (instead of creating a template around a template around a template).

To prove how simple this is, I've put together this gist and plunker which demonstrates how easy it is to implement just about every bootstrap JS component without creating any new JS or custom directives. Unlike Angular-Strap, the code is 100% transparent and you have complete access to all options, 0 API breakage, and 0 template opinion. It's true that you lose the ability to call methods programmatically, but if we focusing on enhancing the pass-thru (or if you don't want to wait and decide to roll a proprietary directive) then this becomes irrelevant.

You should bookmark the original GIST as I will try to continue it as I flesh out more Bootstrap functionality and features over time.

Conclusions

If you want an Angular-Bootstrap project to streamline a few things for you, go with AngularUI's Bootstrap.

If you don't mind a tiny bit of elbow grease, just use Bootstrap.js natively and AngularUI's Passthrough to grease the wheels when you get stuck.

Comments