View
4.444
Download
4
Category
Preview:
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.
Citation preview
In-depth changesto Drupal 8javascript
Théodore 'nod_' Biadala
JS Maintainer for Drupal coreTechnical consultant @ Acquia
DrupalCamp, Vienna 2013
Who had problems with core JS ?With contrib JS ?
Who knows about AMD/CommonJS ?
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', 'jquery'),
array('system', 'drupal'),
array('system', 'drupalSettings'),
array('system', 'jquery.once'),
));
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'),
));
Example
BEFORE
function my_page() {
drupal_add_ js($module_path . '/js/script.js');
return array(
'#theme' => 'item_list',
'#items' => array('one', 'two', 'three'),
);
}
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') ) );
}
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',
) ) );
}
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
Declare all script dependenciesStrict mode & JSHint
Coding standards
Declare all script dependencies
(AMD anyone ?)
system/jquerysystem/underscoresystem/Backbonesystem/drupalsystem/drupalSettings
Script Dependencies
Only load what you use
Dependency graph!
Better aggregation, and...
HTTP2 ready!
JSHint
{} required
=== or !==
new MyConstructor()
hasOwnProperty()
“use strict”;
var
New
New libraries
jQuery 2
Underscore
Backbone
Modernizr
CKEditor
Joyride
Wait… jQuery 2?
drupal.org/project/ie8
New libraries
jQuery 2
Underscore
Backbone
Modernizr
CKEditor
Joyride
Backboned
Toolbar
Contextual
Edit
CKEditor admin
New APIs
Drupal.announce(text, priority)
Drupal.displace(broadcast)
Drupal.debounce(func, wait)
Drupal.dialog(element, options)
New Features
Responsive tables
Responsive images
Quick edit
Many more…
Same old stuff
No documentation on api.d.o
No testing
No performance measurements
ajax.js
Drupal.behaviors
REST
Rest, edit & backbone(Expected)
RESTPOST
GET
Rest, edit & backbone(Reality)
Drupal
Get field edit form Submit
Ajax form
Hide & ajaxifyform
EditorView.js
Drupal.edit.util.form.load()Drupal.edit.util.form.ajaxifySaving()fillAndSubmitForm()removeHiddenForm()
Assets handling
Bonus
Overlay
Overlay
Questions !
Théodore BIADALA
@nod_
theodore.biadala@acquia.com
Pics found on: wtfevolution.tumblr.com
Recommended