upgrade your javascript to drupal 8
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.TRANSCRIPT
![Page 1: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/1.jpg)
Upgrade your javascript to Drupal 8
![Page 2: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/2.jpg)
Upgrade your JavaScriptto Drupal 8
Théodore 'nod_' Biadala
JS Maintainer for Drupal coreTechnical consultant @ Acquia
DrupalCon, Prague 2013
![Page 3: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/3.jpg)
Few things before starting
Who can write a custom module?
Who knows about render array?
Who knows about #attached?
Who knows about hook_library()?
![Page 4: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/4.jpg)
TL ; DR
![Page 5: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/5.jpg)
Javascript changes(search & replace)
Drupal.settings
↓drupalSettings
![Page 6: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/6.jpg)
Javascript changes(search & replace)
Drupal.theme.prototype
↓Drupal.theme
![Page 7: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/7.jpg)
Javascript changes(search & replace)
Drupal.ajax.prototype.commands
↓Drupal.AjaxCommands.prototype
![Page 8: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/8.jpg)
PHP changes
drupal_add_js()
scripts[] =
![Page 9: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/9.jpg)
PHP changes
drupal_add_js()
scripts[] =DON'T
![Page 10: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/10.jpg)
PHP changes
#attached
hook_library_info()DO
![Page 11: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/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: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/12.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 13: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/13.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 14: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/14.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 15: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/15.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 16: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/16.jpg)
Example
![Page 17: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/17.jpg)
BEFORE
function my_page() {
drupal_add_ js($module_path . '/script.js');
return array(
'#theme' => 'item_list',
'#items' => array('one', 'two', 'three'),
);
}
![Page 18: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/18.jpg)
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') ) );
}
![Page 19: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/19.jpg)
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',
) ) );
}
![Page 20: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/20.jpg)
DONE !
![Page 21: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/21.jpg)
Why ?
![Page 22: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/22.jpg)
Drupal 7 problems
![Page 23: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/23.jpg)
D7 problems
jQuery 1.4.4
jQuery + drupal.js on all pages
Core JS breaks easily
Contrib JS is not great
![Page 24: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/24.jpg)
Drupal 8 Solutions
![Page 25: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/25.jpg)
D8 solutions
Update all third party JS libraries
Declare all script dependencies
Strict mode & JSHint
Coding standards
![Page 26: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/26.jpg)
D8 solutions
Update all third party JS libraries
Declare all script dependenciesStrict mode & JSHint
Coding standards
![Page 27: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/27.jpg)
New
![Page 28: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/28.jpg)
New libraries
jQuery 2
Underscore
Backbone
Modernizr
CKEditor
Joyride
![Page 29: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/29.jpg)
New APIs
Drupal.announce(text, priority)
Drupal.displace(broadcast)
Drupal.debounce(func, wait)
Drupal.dialog(element, options)
![Page 30: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/30.jpg)
New Features
Responsive tables
Responsive images
Quick edit
Many, many more…
![Page 31: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/31.jpg)
Wait… jQuery 2?
![Page 32: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/32.jpg)
drupal.org/project/ie8
![Page 33: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/33.jpg)
![Page 34: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/34.jpg)
![Page 35: Upgrade your javascript to drupal 8](https://reader033.vdocuments.net/reader033/viewer/2022052410/554f3685b4c905cd048b4d95/html5/thumbnails/35.jpg)
Questions !
Théodore BIADALA
@nod_
Take the survey:
prague2013.drupal.org/session/upgrading-your-js-drupal-8
Pics found on: wtfevolution.tumblr.com