Bootstrap is an awesome tool, and something I use all the time. The ability to have so much css scaffolding in place for you to use is a huge time-saver and makes building responsive sites attainable in a more reasonable, repeatable and budget-friendly way.
On top of the CSS functionality, Bootstrap comes with a suite of javascript plugins that solve some common requirements for your UI. Including a modal, popover, carousel, tooltip and loader (among other elements), it really is a handy way to get some dynamic functionality out of the box, and get up and running quickly.
But when you're such a large framework, and you encompass so many different areas - that means you're going to be great for some things, and average (or poor) for others. When the parts are taken individually, their flexibility, capability and quality fall short of other tools that are built with only one specific purpose in mind.
When I'm working on a non-Bootstrap project, it's rare that I would reach for a Bootstrap javascript component to complete a task - there are just better tools suited to specific jobs. Even when working on a Bootstrap project specifically - you might find a plugin lacking in some way, and want to try something else.
This is the first in a series about Bootstrap Javascript components, and some high quality alternatives.
First stop, user action feedback.
Starting small
This first comparison is of a small area of Bootstrap functionality, specifically centered around buttons. In Bootstrap, you can manipulate "states" on a button and give it behaviors outside of the standard button click behavior. They use it, for instance, to create buttons that can behave like checkboxes or radio buttons. In addition, they demonstrate behavior where a button can react to the users click, and provide the user feedback in the form of a "loading" state.
For instance, a user could click a button with the text "Loading state", and once clicked the button is disabled and its content changed to "Loading...".
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
Loading state
</button>
$('#myButton').on('click', function () {
var $btn = $(this).button('loading');
setTimeout(function () {
$btn.button('reset')
}, 2000);
})
In our HTML, we've provided a button that has attributes about how to behave when in a "loading" state. data-loading-text provides the value Bootstrap will swap out when we switch to that state, and Bootstrap automatically disabled the button for us until we reset it. We just use the button api to tell it when we want it in a state of "loading", and when done tell it to "reset". Resetting it will bring us back to our original state: an enabled button with the text of "Loading state".
Here's an example of the concept in action:
See the Pen Bootstrap Loader by JP Camara (@jpcamara) on CodePen.
In practice I've used these loading states as an immediate indicator to the user that something has happened. Their action resulted in a process being started. For instance, if the user clicks a button and I make an ajax request, changing the state of the button to loading lets them know that something is going on (rather than sitting their wondering what might be happening, and if something went wrong). Humans can perceive latency in as little as 100 milliseconds (and maybe even less), so giving them that immediate feedback is important.
A more dynamic indication
The ability to add this loading state gives the user immediate feedback, and doesn't leave them guessing about whether their click registered. But it's somewhat of a jarring interaction (the button immediately changes to the loading state), and isn't far beyond what we could do manually ourselves (disabling a button and changing its display text isn't difficult javascript).
I think we can do better.
Ladda UI
Ladda is a UI concept created by Hakim El Hattab that "merges loading indicators into the action that invoked them". In our case, that gels nicely with the concept we've already been promoting by using a "loading" state on our buttons to give the user immediate feedback. But the Ladda concept takes that a step further, and introduces multiple animated feedback mechanisms centered around the button.
Using the Ladda library from Github, the approach we take here looks similar to the Bootstrap states.
<button class="ladda-button btn btn-primary js-expand-right" data-style="expand-right">
<span class="ladda-label">Submit Right</span>
</button>
var $expandRight = $('.js-expand-right').ladda();
$expandRight.on('click', function () {
$expandRight.ladda('start');
setTimeout(function () {
$expandRight.ladda('stop');
}, 2000);
});
Our HTML looks a little different - we're no longer specifying loader text and we now have a new attribute data-style. The data-style attribute specifies how the button will react when Ladda is enabled - in our case we're telling it to "expand-right" when the user clicks it. There are several "styles", including expand-left, expand-right, slide-up, and slide-down, among others (see Hakim's demo page for all styles available).
In addition, we've now split our button and inner text into two pieces: the outer button layer with a class of ladda-button, and the inner span layer with a class of ladda-label.
Our Javascript code is straightforward, and i'm taking advantage of the jQuery plugin Hakim provides to make the setup even simpler. We grab the element using jQuery, apply Ladda to it using the ladda method, and then when clicked simply tell Ladda to start and stop at the appropriate times.
Here is an example in action, also including how to indicate incremental progress as some background action happens.
See the Pen Ladda Loader by JP Camara (@jpcamara) on CodePen.
Perceived Performance
What we're going for with these two approaches is perceived performance. We haven't actually improved the performance of our code or our server by including this, but the user feels like their action is progressing faster. Simply clicking on a button with no feedback (except maybe a loading icon in the tab of your browser) leaves the user feeling like things are moving slowly, or are possibly stuck.
Angular
The examples provided here are based on using standard Bootstrap and Ladda. If you're an angular user and want to try this, here are a couple options
Angular Ladda provides an angular implementation on top of the Ladda plugin from Hakim
This gist provides an example of just creating a directive wrapper you could copy into your own project.
Conclusion
The feedback Ladda offers is more visually appealing and gives a deeper sense of progress than what Bootstrap provides out of the box. Using this approach we can make the user interaction more pleasant and responsive than what we were capable of with Bootstrap alone. I'm interested to know if you agree, or if you have any other alternatives that you've used in your work. Let me know in the comments!
Next up, we're going to take a look at Carousels and what alternatives there are to Bootstrap's native carousel component.