In-depth changes to Drupal 8 javascript
7 likes7,553 views
The document provides an overview of significant changes to JavaScript in Drupal 8, including updates to the way scripts are added and dependencies are managed. It outlines the transition from Drupal 7 to Drupal 8, addressing issues with core JS and third-party libraries, while emphasizing improvements like strict mode and better aggregation. Additionally, it highlights new APIs and features that enhance functionality and responsiveness in the platform.
![PHP changes
drupal_add_js()
scripts[] =](https://image.slidesharecdn.com/javascript-changes-2013-131123064222-phpapp02/85/In-depth-changes-to-Drupal-8-javascript-7-320.jpg)
![PHP changes
'T
N
O
D
drupal_add_js()
scripts[] =](https://image.slidesharecdn.com/javascript-changes-2013-131123064222-phpapp02/85/In-depth-changes-to-Drupal-8-javascript-8-320.jpg)
![hook_library_info ?
$libraries['myscript'] = array(
'js' => array('script.js'),
'dependencies' => array(
array('system', 'jquery'),
array('system', 'drupal'),
array('system', 'drupalSettings'),
array('system', 'jquery.once'),
));](https://image.slidesharecdn.com/javascript-changes-2013-131123064222-phpapp02/85/In-depth-changes-to-Drupal-8-javascript-10-320.jpg)
![hook_library_info ?
$libraries['myscript'] = array(
'js' => array('script.js'),
'dependencies' => array(
array('system', 'jquery'),
array('system', 'drupal'),
array('system', 'drupalSettings'),
array('system', 'jquery.once'),
));](https://image.slidesharecdn.com/javascript-changes-2013-131123064222-phpapp02/85/In-depth-changes-to-Drupal-8-javascript-11-320.jpg)
![AFTER
function my_module_library_info () {
$libraries['myscript'] = array(
'js' => array($module_path . '/js/script.js'),
'dependencies' => array( /* … */ ) );
return $libraries;
}
function my_page() {
return array( '#theme' => 'item_list',
'#items' => array('one', 'two', 'three'),
'#attach' => array( 'library' => array( array('my_module', 'myscript') ) );
}](https://image.slidesharecdn.com/javascript-changes-2013-131123064222-phpapp02/85/In-depth-changes-to-Drupal-8-javascript-14-320.jpg)
More Related Content
![[Srijan Wednesday Webinars] Ruling Drupal 8 with #d8rules](https://cdn.slidesharecdn.com/ss_thumbnails/d8rulessrijanwebinarapril2016-160421035926-thumbnail.jpg?width=560&fit=bounds)
![[Coscup 2012] JavascriptMVC](https://cdn.slidesharecdn.com/ss_thumbnails/coscupjavascriptmvc-120818115356-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![From Curiosity to ROI — Cost-Benefit Analysis of Agentic Automation [3/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-3-250903141006-a3917e1a-thumbnail.jpg?width=560&fit=bounds)
![Strategic Picks — Prioritising the Right Agentic Use Cases [2/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-2-250902135931-4c97717a-thumbnail.jpg?width=560&fit=bounds)
In-depth changes to Drupal 8 javascript
- 1. In-depth changes to Drupal 8 javascript Théodore 'nod_' Biadala JS Maintainer for Drupal core Technical consultant @ Acquia DrupalCamp, Vienna 2013
- 2. Who had problems with core JS ? With contrib JS ? Who knows about AMD/CommonJS ?
- 3. TL ; DR
- 4. Javascript changes (search & replace) Drupal.settings ↓ drupalSettings
- 5. Javascript changes (search & replace) Drupal.theme.prototype ↓ Drupal.theme
- 6. Javascript changes (search & replace) Drupal.ajax.prototype.commands ↓ Drupal.AjaxCommands.prototype
- 10. hook_library_info ? $libraries['myscript'] = array( 'js' => array('script.js'), 'dependencies' => array( array('system', 'jquery'), array('system', 'drupal'), array('system', 'drupalSettings'), array('system', 'jquery.once'), ));
- 11. hook_library_info ? $libraries['myscript'] = array( 'js' => array('script.js'), 'dependencies' => array( array('system', 'jquery'), array('system', 'drupal'), array('system', 'drupalSettings'), array('system', 'jquery.once'), ));
- 12. Example
- 13. BEFORE function my_page() { drupal_add_ js($module_path . '/js/script.js'); return array( '#theme' => 'item_list', '#items' => array('one', 'two', 'three'), ); }
- 14. AFTER function my_module_library_info () { $libraries['myscript'] = array( 'js' => array($module_path . '/js/script.js'), 'dependencies' => array( /* … */ ) ); return $libraries; } function my_page() { return array( '#theme' => 'item_list', '#items' => array('one', 'two', 'three'), '#attach' => array( 'library' => array( array('my_module', 'myscript') ) ); }
- 15. Maybe if patch #1996238 gets in my_module.library.yml: my_module.module: myscript: function my_page() { js: return array( - { file: js/script.js } '#theme' => 'item_list', dependencies: '#items' => array( /* … */ ), - system/jquery '#attach' => array( - system/drupal 'library' => array( - system/drupalSettings 'my_module/myscript', - system/jquery.once ) ) ); }
- 16. DONE !
- 17. Why ?
- 19. D7 problems jQuery 1.4.4 jQuery + drupal.js on all pages Core JS breaks easily Contrib JS is not great
- 21. D8 solutions Update all third party JS libraries Declare all script dependencies Strict mode & JSHint Coding standards
- 22. D8 solutions Update all third party JS libraries Declare all script dependencies Strict mode & JSHint Coding standards
- 23. Declare all script dependencies (AMD anyone ?)
- 25. Script Dependencies Only load what you use Dependency graph! Better aggregation, and... HTTP2 ready!
- 26. JSHint {} required === or !== new MyConstructor() hasOwnProperty() “use strict”; var
- 28. New
- 30. Wait… jQuery 2?
- 34. New APIs Drupal.announce(text, priority) Drupal.displace(broadcast) Drupal.debounce(func, wait) Drupal.dialog(element, options)
- 35. New Features Responsive tables Responsive images Quick edit Many more…
- 36. Same old stuff No documentation on api.d.o No testing No performance measurements ajax.js Drupal.behaviors
- 37. REST
- 38. Rest, edit & backbone (Expected) REST POST GET
- 39. Rest, edit & backbone (Reality) Get field edit form Hide & ajaxify form Drupal Submit Ajax form
- 42. Assets handling
- 43. Bonus
- 44. Overlay
- 45. Overlay
- 49. Questions ! Théodore BIADALA @nod_ [email protected] Pics found on: wtfevolution.tumblr.com