UpgradeyourjavascripttoDrupal8
Upgrade your JavaScript
to Drupal 8
Théodore'nod_'Biadala
JS Maintainer for Drupal core
Technical consultant @ Acquia
Drup...
Few things before starting
Who can write a custom module?
Who knows about render array?
Who knows about #attached?
Who kno...
TL ; DR
Javascript changes
(search&replace)
Drupal.settings
↓
drupalSettings
Javascript changes
(search&replace)
Drupal.theme.prototype
↓
Drupal.theme
Javascript changes
(search&replace)
Drupal.ajax.prototype.commands
↓
Drupal.AjaxCommands.prototype
PHP changes
drupal_add_js()
scripts[] =
PHP changes
drupal_add_js()
scripts[] =DON'T
PHP changes
#attached
hook_library_info()DO
hook_library_info ?
$libraries['myscript'] = array(
'js' => array('script.js'),
'dependencies' => array(
array('system', '...
hook_library_info ?
$libraries['myscript'] = array(
'js' => array('script.js'),
'dependencies' => array(
array('system', '...
hook_library_info ?
$libraries['myscript'] = array(
'js' => array('script.js'),
'dependencies' => array(
array('system', '...
hook_library_info ?
$libraries['myscript'] = array(
'js' => array('script.js'),
'dependencies' => array(
array('system', '...
hook_library_info ?
$libraries['myscript'] = array(
'js' => array('script.js'),
'dependencies' => array(
array('system', '...
Example
BEFORE
function my_page() {
drupal_add_js($module_path.'/script.js');
return array(
'#theme' => 'item_list',
'#items' => a...
AFTER
function my_module_library_info () {
$libraries['myscript'] = array(
'js' => array($module_path . '/script.js'),
'de...
Maybe if patch #1996238 gets in
my_module.library.yml:
myscript:
js:
- { file: script.js }
dependencies:
- system/jquery
-...
DONE !
Why ?
Drupal 7
problems
D7 problems
jQuery 1.4.4
jQuery + drupal.js on all pages
Core JS breaks easily
Contrib JS is not great
Drupal 8 Solutions
D8 solutions
Update all third party JS libraries
Declare all script dependencies
Strict mode & JSHint
Coding standards
D8 solutions
Update all third party JS libraries
Declareallscriptdependencies
Strict mode & JSHint
Coding standards
New
New libraries
jQuery 2
Underscore
Backbone
Modernizr
CKEditor
Joyride
New APIs
Drupal.announce(text, priority)
Drupal.displace(broadcast)
Drupal.debounce(func, wait)
Drupal.dialog(element, opt...
New Features
Responsive tables
Responsive images
Quick edit
Many, many more…
Wait… jQuery 2?
drupal.org/project/ie8
Questions !
Théodore BIADALA
@nod_
theodore.biadala@acquia.com
Take the survey:
prague2013.drupal.org/session/upgrading-yo...
Upgrade your javascript to drupal 8
Upgrade your javascript to drupal 8
Upcoming SlideShare
Loading in...5
×

Upgrade your javascript to drupal 8

2,642

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,642
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×