In-depth changes to Drupal 8 javascript

6,541 views

Published on

Drupal 8 introduces a lot of changes for javascript: how to add a JS file to a page, how Drupal process the aggregation of JS files, what are the new javascript APIs. We'll be looking into the reasons for those changes.

After a quick recap of the changes you need to make to port your JS to Drupal 8, we'll dig into the changes you should embrace as a module maintainer or site developer to make your life, and the web, better.

But it's not all pretty, when you want to use some more advanced D8 features with your JS, you have to use messy workarounds. We'll look at a few examples of what happens when Backbone, Drupal and fancy functionalities meet in core and what it'd take to fix the mess.

Published in: Technology

In-depth changes to Drupal 8 javascript

  1. 1. In-depth changes to Drupal 8 javascript Théodore 'nod_' Biadala JS Maintainer for Drupal core Technical consultant @ Acquia DrupalCamp, Vienna 2013
  2. 2. Who had problems with core JS ? With contrib JS ? Who knows about AMD/CommonJS ?
  3. 3. TL ; DR
  4. 4. Javascript changes (search & replace) Drupal.settings ↓ drupalSettings
  5. 5. Javascript changes (search & replace) Drupal.theme.prototype ↓ Drupal.theme
  6. 6. Javascript changes (search & replace) Drupal.ajax.prototype.commands ↓ Drupal.AjaxCommands.prototype
  7. 7. PHP changes drupal_add_js() scripts[] =
  8. 8. PHP changes 'T N O D drupal_add_js() scripts[] =
  9. 9. PHP changes O D #attached hook_library_info()
  10. 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. 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. 12. Example
  13. 13. BEFORE function my_page() { drupal_add_ js($module_path . '/js/script.js'); return array( '#theme' => 'item_list', '#items' => array('one', 'two', 'three'), ); }
  14. 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. 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. 16. DONE !
  17. 17. Why ?
  18. 18. Drupal 7 problems
  19. 19. D7 problems jQuery 1.4.4 jQuery + drupal.js on all pages Core JS breaks easily Contrib JS is not great
  20. 20. Drupal 8 Solutions
  21. 21. D8 solutions Update all third party JS libraries Declare all script dependencies Strict mode & JSHint Coding standards
  22. 22. D8 solutions Update all third party JS libraries Declare all script dependencies Strict mode & JSHint Coding standards
  23. 23. Declare all script dependencies (AMD anyone ?)
  24. 24. system/jquery system/underscore system/Backbone system/drupal system/drupalSettings
  25. 25. Script Dependencies Only load what you use Dependency graph! Better aggregation, and... HTTP2 ready!
  26. 26. JSHint {} required === or !== new MyConstructor() hasOwnProperty() “use strict”; var
  27. 27. New
  28. 28. New libraries jQuery 2 Modernizr Underscore CKEditor Backbone Joyride
  29. 29. Wait… jQuery 2?
  30. 30. drupal.org/project/ie8
  31. 31. New libraries jQuery 2 Modernizr Underscore CKEditor Backbone Joyride
  32. 32. Backboned Toolbar Edit Contextual CKEditor admin
  33. 33. New APIs Drupal.announce(text, priority) Drupal.displace(broadcast) Drupal.debounce(func, wait) Drupal.dialog(element, options)
  34. 34. New Features Responsive tables Responsive images Quick edit Many more…
  35. 35. Same old stuff No documentation on api.d.o No testing No performance measurements ajax.js Drupal.behaviors
  36. 36. REST
  37. 37. Rest, edit & backbone (Expected) REST POST GET
  38. 38. Rest, edit & backbone (Reality) Get field edit form Hide & ajaxify form Drupal Submit Ajax form
  39. 39. EditorView.js Drupal.edit.util.form.load() Drupal.edit.util.form.ajaxifySaving() fillAndSubmitForm() removeHiddenForm()
  40. 40. Assets handling
  41. 41. Bonus
  42. 42. Overlay
  43. 43. Overlay
  44. 44. Questions ! Théodore BIADALA @nod_ theodore.biadala@acquia.com Pics found on: wtfevolution.tumblr.com

×