Upgrade your javascript to drupal 8
4 likes4,443 views
The document discusses the necessary changes for upgrading JavaScript to Drupal 8, highlighting important functions and features including custom modules, render arrays, and dependencies. It outlines revisions in JavaScript handling, the transition from Drupal 7 to Drupal 8, and introduces new APIs and libraries. The speaker's contact information and a survey link are provided for further engagement.
![PHP changes
drupal_add_js()
scripts[] =](https://image.slidesharecdn.com/updatejs-130925092404-phpapp01/85/Upgrade-your-javascript-to-drupal-8-8-320.jpg)
![PHP changes
drupal_add_js()
scripts[] =DON'T](https://image.slidesharecdn.com/updatejs-130925092404-phpapp01/85/Upgrade-your-javascript-to-drupal-8-9-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/updatejs-130925092404-phpapp01/85/Upgrade-your-javascript-to-drupal-8-11-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/updatejs-130925092404-phpapp01/85/Upgrade-your-javascript-to-drupal-8-12-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/updatejs-130925092404-phpapp01/85/Upgrade-your-javascript-to-drupal-8-13-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/updatejs-130925092404-phpapp01/85/Upgrade-your-javascript-to-drupal-8-14-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/updatejs-130925092404-phpapp01/85/Upgrade-your-javascript-to-drupal-8-15-320.jpg)
![AFTER
function my_module_library_info () {
$libraries['myscript'] = array(
'js' => array($module_path . '/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/updatejs-130925092404-phpapp01/85/Upgrade-your-javascript-to-drupal-8-18-320.jpg)
Upgrade your javascript to drupal 8
- 2. Upgrade your JavaScript to Drupal 8 Théodore'nod_'Biadala JS Maintainer for Drupal core Technical consultant @ Acquia DrupalCon, Prague 2013
- 3. Few things before starting Who can write a custom module? Who knows about render array? Who knows about #attached? Who knows about hook_library()?
- 4. TL ; DR
- 7. Javascript changes (search&replace) Drupal.ajax.prototype.commands ↓ Drupal.AjaxCommands.prototype
- 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. 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'), ));
- 13. 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'), ));
- 14. 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'), ));
- 15. 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'), ));
- 16. Example
- 17. BEFORE function my_page() { drupal_add_js($module_path.'/script.js'); return array( '#theme' => 'item_list', '#items' => array('one', 'two', 'three'), ); }
- 18. AFTER function my_module_library_info () { $libraries['myscript'] = array( 'js' => array($module_path . '/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')) ); }
- 19. Maybe if patch #1996238 gets in my_module.library.yml: myscript: js: - { file: script.js } dependencies: - system/jquery - system/drupal - system/drupalSettings - system/jquery.once my_module.module: function my_page() { return array( '#theme' => 'item_list', '#items' => array( /* … */ ), '#attach'=>array( 'library'=>array( 'my_module/myscript', )) ); }
- 20. DONE !
- 21. Why ?
- 23. D7 problems jQuery 1.4.4 jQuery + drupal.js on all pages Core JS breaks easily Contrib JS is not great
- 25. D8 solutions Update all third party JS libraries Declare all script dependencies Strict mode & JSHint Coding standards
- 26. D8 solutions Update all third party JS libraries Declareallscriptdependencies Strict mode & JSHint Coding standards
- 27. New
- 29. New APIs Drupal.announce(text, priority) Drupal.displace(broadcast) Drupal.debounce(func, wait) Drupal.dialog(element, options)
- 30. New Features Responsive tables Responsive images Quick edit Many, many more…
- 31. Wait… jQuery 2?
- 35. Questions ! Théodore BIADALA @nod_ [email protected] Take the survey: prague2013.drupal.org/session/upgrading-your-js-drupal-8 Pics found on: wtfevolution.tumblr.com