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.

1. UpgradeyourjavascripttoDrupal8

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

5. Javascript changes
(search&replace)
Drupal.settings
↓
drupalSettings

6. Javascript changes
(search&replace)
Drupal.theme.prototype
↓
Drupal.theme

7. Javascript changes
(search&replace)
Drupal.ajax.prototype.commands
↓
Drupal.AjaxCommands.prototype

8. PHP changes
drupal_add_js()
scripts[] =

9. PHP changes
drupal_add_js()
scripts[] =DON'T

10. PHP changes
#attached
hook_library_info()DO

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 ?

22. Drupal 7
problems

23. D7 problems
jQuery 1.4.4
jQuery + drupal.js on all pages
Core JS breaks easily
Contrib JS is not great

24. Drupal 8 Solutions

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

28. New libraries
jQuery 2
Underscore
Backbone
Modernizr
CKEditor
Joyride

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?

32. drupal.org/project/ie8

35. 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