An overview of the Drupal and JavaScript ecosystem as it relates to themes. JavaScript is loaded via asset libraries, there are a bunch of libraries already in core including jQuery. This tutorial provides a brief orientation to some of the JavaScript included in core.
Whether you're trying to add your own JavaScript to a page, or make use of one of the many popular libraries provided by Drupal core, it's important to understand the asset library system when working with JavaScript in Drupal. By wrapping your JavaScript in an asset library it can be added to every page, selectively included when it's needed, or be easily modified by others.
In addition to the inclusion of third party libraries, Drupal core also contains numerous Drupal-specific JavaScript libraries that make it easier to do things like implement AJAX calls to a Drupal route, localize UI strings, and pass configuration stored in the database to the front-end. Drupal also contains several external projects in core, like jQuery, Backbone, Underscore, and Modernizer.
Example tasks
- Add custom JavaScript to a site
- Utilize the JavaScript libraries that are included in Drupal core
- Customize how JavaScript is loaded on a site to minimize the overall page size
Confidence
The addition of the asset library system in Drupal 8, while new, is quite well established. There may be emerging best practices regarding how to split up and structure your custom libraries, but the overall concepts are unlikely to change.
Drupalize.Me resources
These tutorials cover best practices for integrating JavaScript with Drupal:
- Load JavaScript in Drupal with Drupal.behaviors
- Use Server-Side Settings with drupalSettings
- String Manipulation in JavaScript
- Use Drupal.t() for Translatable Strings in JavaScript
- Use Drupal.theme for HTML Markup in JavaScript
- Wrap Your Custom JavaScript in a Closure
- Standardize Your JavaScript with ESLint
- JavaScript Debugging in PhpStorm
These high level tutorials walk through some of the new JavaScript features and libraries that are available in Drupal 8 core:
- Backbone.js in a Theme or Module
- Underscore.js in a Theme or Module
- Modernizer.js in a Theme or Module
External resources
- JavaScript API overview (drupal.org)
- This is the official documentation on drupal.org for Drupal's JavaScript API.
- Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 module (drupal.org)
- Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme (drupal.org)
- These pages cover the asset library system, and how you can add your CSS and JavaScript files to your custom module and themes.
- Examples project js_example module (cgit.drupalcode.org)
- The Examples module contains well-commented code examples that illustrate how Drupal's various subsystems work. Explore JavaScript with the js_example module included in the Examples download.
- In-depth changes to Drupal 8 JavaScript (slideshare.net)
- This presentation, from one of Drupal's JavaScript maintainers, walks through some of the major changes JavaScript developers need to know about Drupal 8.
- Understanding JavaScript behaviors in Drupal (lullabot.com)
- This blog post, while based on Drupal 7, covers how Drupal's behavior system works and why it's a good idea to make use of it in your custom code.