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