Upgrade your javascript to drupal 8

2,965
-1

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, what do we mean by mobile-first.

This session will focus on showing Drupal developers how to update their javascript from Drupal 7 to 8 by taking an example module and going through all the relevant changes.

By the end you'll know what fancy new features Drupal 8 provides you to build rich applications on top of Drupal while keeping mobile devices in mind.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,965
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Upgrade your javascript to drupal 8

  1. 1. UpgradeyourjavascripttoDrupal8
  2. 2. Upgrade your JavaScript to Drupal 8 Théodore'nod_'Biadala JS Maintainer for Drupal core Technical consultant @ Acquia DrupalCon, Prague 2013
  3. 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. 4. TL ; DR
  5. 5. Javascript changes (search&replace) Drupal.settings ↓ drupalSettings
  6. 6. Javascript changes (search&replace) Drupal.theme.prototype ↓ Drupal.theme
  7. 7. Javascript changes (search&replace) Drupal.ajax.prototype.commands ↓ Drupal.AjaxCommands.prototype
  8. 8. PHP changes drupal_add_js() scripts[] =
  9. 9. PHP changes drupal_add_js() scripts[] =DON'T
  10. 10. PHP changes #attached hook_library_info()DO
  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. 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. 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. 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. 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. 16. Example
  17. 17. BEFORE function my_page() { drupal_add_js($module_path.'/script.js'); return array( '#theme' => 'item_list', '#items' => array('one', 'two', 'three'), ); }
  18. 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. 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. 20. DONE !
  21. 21. Why ?
  22. 22. Drupal 7 problems
  23. 23. D7 problems jQuery 1.4.4 jQuery + drupal.js on all pages Core JS breaks easily Contrib JS is not great
  24. 24. Drupal 8 Solutions
  25. 25. D8 solutions Update all third party JS libraries Declare all script dependencies Strict mode & JSHint Coding standards
  26. 26. D8 solutions Update all third party JS libraries Declareallscriptdependencies Strict mode & JSHint Coding standards
  27. 27. New
  28. 28. New libraries jQuery 2 Underscore Backbone Modernizr CKEditor Joyride
  29. 29. New APIs Drupal.announce(text, priority) Drupal.displace(broadcast) Drupal.debounce(func, wait) Drupal.dialog(element, options)
  30. 30. New Features Responsive tables Responsive images Quick edit Many, many more…
  31. 31. Wait… jQuery 2?
  32. 32. drupal.org/project/ie8
  33. 33. Questions ! Théodore BIADALA @nod_ theodore.biadala@acquia.com Take the survey: prague2013.drupal.org/session/upgrading-your-js-drupal-8 Pics found on: wtfevolution.tumblr.com

×