New JavaScript libraries in Drupal 8

A few new JavaScript libraries have made their way into Drupal 8 core code, the same way jQuery once did. This blog post examines the reasoning behind each inclusion, and explains how they are intended to be used.

Underscore & Backbone

In recent years we have seen a large number of JavaScript frameworks intended to facilitate the creation of web MVC/MVVM applications. You may know some of them: Angular.js, Ember.js, Sammy.js, SproutCore, and of course Backbone.js.

Drupal has its own AJAX framework largely based on jQuery but it has become outdated in relation to the recent AJAX innovations.

The Spark distribution has served as a laboratory for new UI innovations, like Edit, Layout or Gridbuilder, that were candidates to be included in Drupal core. Most of them use Backbone.js as their JavaScript library of choice.

This led to a discussion about including one of these libraries into Drupal core. Backbone was chosen because it currently has the largest community of users, and the most stability.

Underscore is a utility JavaScript library on which Backbone depends, so it has to be included as well.

CKEditor

Arguably the number one feature request for Drupal core has been the inclusion of a WYSIWYG editor. There are a number of options in the contributed modules space, but none of them has risen to become a de-facto standard, so there was no clear choice among the available modules.

Drupal 8 was the version where this issue was going to be taken seriously. Based on the work of the CKEditor module writers and maintainers, the CKEditor library was chosen to be used in core.

This means you no longer have to wonder what editor to use in your projects, since CKEditor will be shipped with and enabled by default in Drupal 8.

jQuery UI Touch Punch

Drupal 8 is intended to be touch compatible, to enable it to be used on mobile and tablet devices. Some UI features use the jQuery UI library and the current version is not touch compatible.

Touch compatibility has been planned for a future version of jQuery UI, so as a temporary measure, jQuery UI Touch Punch plugin has been placed in core.

CKEditor admin interface not touch-compatible (Add jQuery Touch Punch to core)

modernizr

We don't live in a desktop web world anymore. Many different kinds of devices can access our websites, mobile devices with touch interfaces, screen readers, etc.

At the same time we are relying more and more in JavaScript to implement new features in our user interfaces.

The problem is that not all user interface features are available to be used in all devices, and in some case they do more harm than good if you try to use them on an incompatible device.

Modernizr is the tool of the moment to implement device feature detection, allowing you to select what JavaScript files you need to load depending on the device capabilities detected.

Add Modernizr to core

domReady

Any Drupal page requests loads the misc/drupal.js file, which is essential for all JavaScript functionality in core.

The drupal.js file uses jQuery just for a simple $(window).ready() call, and jQuery alone is 90 kb. This is loaded for any Drupal page, even if we are not using it.

Domready is used for jQuery's same ready method, but it only includes that functionality, which makes this library just 740 bytes.

By making drupal.js use domReady instead of jQuery, Drupal 8 drastically reduces the amount of code required for a page load.

See the issue discussion for more details.

Introduce domReady to remove jQuery dependency from drupal.js and clean it up.

html5shiv & classList

The HTML markup produced by Drupal 8 is HTML5, but we still want to make Drupal websites look and behave reasonably well for users running browsers without HTML5 support.

These two libraries provide some compatibility for HTML5 in older browsers.