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
-
- Introduction to JavaScript in Drupal 8. Start here to get an introduction to all the various ways that JavaScript is used in Drupal and how to implement your own custom JavaScript code.
What Are Libraries?, Define an Asset Library, and Attach a Library
- Learn about Drupal's asset library system and how JavaScript files get included on the page.
- 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 tutorials walk through some of the specifics of Drupal's internal JavaScript API. Specifically, the
Drupal.behaviorsconstruct and some string manipulation techniques and utilities. Additionally, there are tutorials that cover why you might want to make use of closures and ESLint as well as how PhpStorm can help you debug your JavaScript code.
- These tutorials walk through some of the specifics of Drupal's internal JavaScript API. Specifically, the
- Backbone.js in a Theme or Module, Underscore.js in a Theme or Module, and Modernizer.js in a Theme or Module
- These high level tutorials walk through some of the new JavaScript features and libraries that are available in Drupal 8 core.
- What's New in Drupal 8: Theming
- Shows some of the differences between Drupal 7 and Drupal 8's use of JavaScript.
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.