Embed Size (px)
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, 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.
Citation preview
Upgrade your javascript to Drupal 8
Upgrade your JavaScriptto Drupal 8
Théodore 'nod_' Biadala
JS Maintainer for Drupal coreTechnical consultant @ Acquia
DrupalCon, Prague 2013
Few things before starting
Who can write a custom module?
Who knows about render array?
Who knows about #attached?
Who knows about hook_library()?
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'),
));
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'),
));
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 . '/script.js');
return array(
'#theme' => 'item_list',
'#items' => array('one', 'two', 'three'),
);
}
AFTERfunction 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') ) );
}
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',
) ) );
}
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
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, options)
New Features
Responsive tables
Responsive images
Quick edit
Many, many more…
Wait… jQuery 2?
drupal.org/project/ie8
Questions !
Théodore BIADALA
@nod_
Take the survey:
prague2013.drupal.org/session/upgrading-your-js-drupal-8
Pics found on: wtfevolution.tumblr.com
