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.

1. In-depth changes
to Drupal 8
javascript
Théodore 'nod_' Biadala
JS Maintainer for Drupal core
Technical consultant @ Acquia
DrupalCamp, Vienna 2013

2. Who had problems with core JS ?
With contrib JS ?
Who knows about AMD/CommonJS ?

3. TL ; DR

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

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

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

7. PHP changes
drupal_add_js()
scripts[] =

8. PHP changes
'T
N
O
D
drupal_add_js()
scripts[] =

9. PHP changes
O
D
#attached
hook_library_info()

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

13. BEFORE
function my_page() {
drupal_add_ js($module_path . '/js/script.js');
return array(
'#theme' => 'item_list',
'#items' => array('one', 'two', 'three'),
);
}

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. 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. DONE !

17. Why ?

18. Drupal 7
problems

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

20. Drupal 8
Solutions

21. D8 solutions
Update all third party JS libraries
Declare all script dependencies
Strict mode & JSHint
Coding standards

22. D8 solutions
Update all third party JS libraries
Declare all script dependencies
Strict mode & JSHint
Coding standards

23. Declare all script
dependencies
(AMD anyone ?)

24. system/jquery
system/underscore
system/Backbone
system/drupal
system/drupalSettings

25. Script Dependencies
Only load what you use
Dependency graph!
Better aggregation, and...
HTTP2 ready!

26. JSHint
{} required
=== or !==
new MyConstructor()
hasOwnProperty()
“use strict”;
var

28. New

29. New libraries
jQuery 2
Modernizr
Underscore
CKEditor
Backbone
Joyride

30. Wait… jQuery 2?

31. drupal.org/project/ie8

32. New libraries
jQuery 2
Modernizr
Underscore
CKEditor
Backbone
Joyride

33. Backboned
Toolbar
Edit
Contextual
CKEditor admin

34. New APIs
Drupal.announce(text, priority)
Drupal.displace(broadcast)
Drupal.debounce(func, wait)
Drupal.dialog(element, options)

35. New Features
Responsive tables
Responsive images
Quick edit
Many more…

36. Same old stuff
No documentation on api.d.o
No testing
No performance measurements
ajax.js
Drupal.behaviors

37. REST

38. Rest, edit & backbone
(Expected)
REST
POST
GET

39. Rest, edit & backbone
(Reality)
Get field
edit form
Hide &
ajaxify
form
Drupal
Submit
Ajax form

40. EditorView.js
Drupal.edit.util.form.load()
Drupal.edit.util.form.ajaxifySaving()
fillAndSubmitForm()
removeHiddenForm()

42. Assets handling

43. Bonus

44. Overlay

45. Overlay

49. Questions !
Théodore BIADALA
@nod_
theodore.biadala@acquia.com
Pics found on: wtfevolution.tumblr.com