In-depth changes to Drupal 8 javascript
-
Upload
theodore-biadala -
Category
Technology
-
view
4.423 -
download
4
description
Transcript of In-depth changes to Drupal 8 javascript
![Page 1: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/3.jpg)
TL ; DR
![Page 4: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/12.jpg)
Example
![Page 13: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/16.jpg)
DONE !
![Page 17: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/17.jpg)
Why ?
![Page 18: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/18.jpg)
Drupal 7 problems
![Page 19: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/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.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/20.jpg)
Drupal 8 Solutions
![Page 21: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/27.jpg)
![Page 28: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/28.jpg)
New
![Page 29: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/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.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/30.jpg)
Wait… jQuery 2?
![Page 31: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/31.jpg)
drupal.org/project/ie8
![Page 32: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/37.jpg)
REST
![Page 38: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/41.jpg)
![Page 42: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/42.jpg)
Assets handling
![Page 43: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/43.jpg)
Bonus
![Page 44: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/44.jpg)
Overlay
![Page 45: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/45.jpg)
Overlay
![Page 46: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/46.jpg)
![Page 47: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/47.jpg)
![Page 48: In-depth changes to Drupal 8 javascript](https://reader031.fdocuments.in/reader031/viewer/2022020206/549320a3ac7959042e8b47e9/html5/thumbnails/48.jpg)