Exploring Drupal 8 Notes - Core JavaScript Libraries

When I started with Drupal 7, I just dove right into site building, customization and theming.  I didn’t dissect Drupal into its components.  For Drupal 8, I am getting to know all aspects of the framework so I am never distracted by unfamiliar components when building or developing.

CKEditor (http://ckeditor.com/)

CKEditor was a contributed module in previous versions of Drupal but, as one of the most installed modules and the most popular WYSIWYG editor, it has always been one of those contrib modules you install on nearly every site you build.  Personally, I have often been annoyed at having to install and configure this one in Drupal 7 so thankfully, it’s now in Core for Drupal 8.

classList.js (https://github.com/eligrey/classList.js)

Written and maintained by Eli Grey, classList is a JavaScript shim that provides an alternative method of accessing an element's list of classes. This shim implements the HTML5 element.classList read-only property for older browsers without HTML5 support.  Drupal Core uses it in several places.  Modernizer loads it conditionally.

domReady (https://github.com/ded/domready)

The domReady JavaScript library was added to Drupal 8 to avoid loading jQuery on pages where it’s not needed.  The effect is faster overall page load times.

Farbtastic (https://github.com/mattfarina/farbtastic)

Farbtastic is a widely used jQuery color wheel color picke plug-in that has been around for nearly as long as jQuery itself.  In add to it being used in Drupal 8 as a way to change colors in the Bartik core theme.  Twitter and WordPress also incorporate it.

HTML5Shiv (https://github.com/afarkas/html5shiv)

HTML5 added several new elements that are not recognized by versions of Internet Explorer older than IE9.  Dating back to 2009, HTML5Shiv is a JavaScript workaround that uses the createElement method of HTML DOM to make HTML5 elements styleable by older versions of Internet Explorer.  If Drupal 8 doesn't support versions of Internet Explorer older than IE9, why was it included?  From what I have been able to gather, there are 2 reasons for this.  Dropping support for older versions of Internet Explorer in Drupal 8 means for the administrative pages only; not the content pages.  The other reason is that since HTML5Shiv is conditionally loaded, it won't hurt performance and, at the time of Drupal 8's release, there are a lot of people that still use IE8.

jQuery (https://jquery.com/)

This ubiquitous library needs no introduction.  It was added to Drupal in version 5.  For Drupal 8, one thing to note is that jQuery 2 drops support for versions of IE older than 9.

jquery.cookie (https://plugins.jquery.com/cookie/)

The jquery.cookie plugin is a simple, lightweight library for managing cookies.  Since localStorage is supported by all modern browsers (even IE8) for client side storage and because cookies have mostly been replaced with localStorage or other alternatives for Drupal 8, there was some discussion about whether or not to include jquery.cookie in Drupal 8 Core.  In the end, the community decided to include this plugin.  A few system libraries still depend on it.

jQuery UI (https://jqueryui.com/)

Nearly as ubiquitous as jQuery, the latest stable version of this collection of front-end widgets is included in Drupal 8 core.

jQuery Form Plugin (http://malsup.com/jquery/form/)

This jQuery plug-in provides methods to allow for easy AJAX enablement of forms.  I have not researched its usage in Drupal 8 but suspect the Forms API uses it to allow developers to easily AJAX enable forms without the need to write JavaScript.

jQuery Joyride (https://github.com/zurb/joyride)

Created by ZURB, the Joyride jQuery plugin provides an easy way for visitors to create context-sensitive on-page tours.  Drupal 8 Core comes with a module called Tour that incorporates the Joyride plugin for easy creation of tours by adding a YAML file to your module's config folder.  For an example of its use in Drupal, enable the Tour module, open a View in edit mode and then click on the Tour button that appears on the top right-hand corner.  A series of tooltips should appear that guide you through the View workflow.

jQuery Once (http://github.com/robloach/jquery-once)

This jQuery plugin was added for Drupal 7 mostly to reduce boilerplate code.  The once() method makes sure that a function is only applied to an element once.

jQuery UI Touch Punch (http://github.com/robloach/jquery-once)

As part of its effort to be mobile friendly, it's important that Drupal 8 be touch compatible but, the version of jQuery UI that ships with Drupal 8 does not support touch devices.  The Drupal community decided to include this small hack as a stop gap until touch device support is included in jQuery UI.  It allows for the use of jQuery UI widgets such as Draggable, Sortable, Slider and others on touch devices

matchMedia.js (https://github.com/paulirish/matchMedia.js)

matchMedia is a polyfill for Internet Explorer 9 since IE9 supports media queries but doesn't implement the window.matchMedia function.  With this polyfill, you can add an event listener to a media query that will execute a JavaScript function whenever a breakpoint has been tripped.

Modernizr (http://www.modernizr.com)

Modernizr is a JavaScript library that uses feature detection (as opposed to checking the browser's property) to detect supported HTML5 and CSS3 features of a user's browser.  It is not a polyfill library.  Its purpose is to allow front end developers to easily test for features and then create fallbacks such as polyfill loading for unsupported features.  The version included in Drupal 8 is a minimal build of Modernizr.

normalize.css (https://github.com/necolas/normalize.css)

This is not a JavaScript library but is found in the same folder as the core JavaScript libraries so I’m including it.  Normalize.css is a small, customisable CSS file that exists to make browsers render HTML5 elements consistently.  It differs from traditional CSS reset files in that it tries to normalize styles across browsers as opposed to remove all default HTML elements styles.

Picturefill (https://github.com/scottjehl/picturefill)

Picturefill is a JavaScript polyfill that enables support for the HTML5 <picture> element along with the <img> srcset and sizes attributes to browsers that do not support them.  The new <picture> element and <img> attributes allow you to list more than one source images and specify the most appropriate image size to be displayed depending on viewport size and display density.