49
In-depth changes to Drupal 8 javascript Théodore 'nod_' Biadala JS Maintainer for Drupal core Technical consultant @ Acquia DrupalCamp, Vienna 2013

In-depth changes to Drupal 8 javascript

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. 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

Page 1: In-depth changes to Drupal 8 javascript

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

Who had problems with core JS ?With contrib JS ?

Who knows about AMD/CommonJS ?

Page 3: In-depth changes to Drupal 8 javascript

TL ; DR

Page 4: In-depth changes to Drupal 8 javascript

Javascript changes(search & replace)

Drupal.settings

↓drupalSettings

Page 5: In-depth changes to Drupal 8 javascript

Javascript changes(search & replace)

Drupal.theme.prototype

↓Drupal.theme

Page 6: In-depth changes to Drupal 8 javascript

Javascript changes(search & replace)

Drupal.ajax.prototype.commands

↓Drupal.AjaxCommands.prototype

Page 7: In-depth changes to Drupal 8 javascript

PHP changes

drupal_add_js()

scripts[] =

Page 8: In-depth changes to Drupal 8 javascript

PHP changes

drupal_add_js()

scripts[] =DON'T

Page 9: In-depth changes to Drupal 8 javascript

PHP changes

#attached

hook_library_info()DO

Page 10: In-depth changes to Drupal 8 javascript

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

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

Example

Page 13: In-depth changes to Drupal 8 javascript

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

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

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

DONE !

Page 17: In-depth changes to Drupal 8 javascript

Why ?

Page 18: In-depth changes to Drupal 8 javascript

Drupal 7 problems

Page 19: In-depth changes to Drupal 8 javascript

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

Drupal 8 Solutions

Page 21: In-depth changes to Drupal 8 javascript

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

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

Declare all script dependencies

(AMD anyone ?)

Page 24: In-depth changes to Drupal 8 javascript

system/jquerysystem/underscoresystem/Backbonesystem/drupalsystem/drupalSettings

Page 25: In-depth changes to Drupal 8 javascript

Script Dependencies

Only load what you use

Dependency graph!

Better aggregation, and...

HTTP2 ready!

Page 26: In-depth changes to Drupal 8 javascript

JSHint

{} required

=== or !==

new MyConstructor()

hasOwnProperty()

“use strict”;

var

Page 27: In-depth changes to Drupal 8 javascript
Page 28: In-depth changes to Drupal 8 javascript

New

Page 29: In-depth changes to Drupal 8 javascript

New libraries

jQuery 2

Underscore

Backbone

Modernizr

CKEditor

Joyride

Page 30: In-depth changes to Drupal 8 javascript

Wait… jQuery 2?

Page 31: In-depth changes to Drupal 8 javascript

drupal.org/project/ie8

Page 32: In-depth changes to Drupal 8 javascript

New libraries

jQuery 2

Underscore

Backbone

Modernizr

CKEditor

Joyride

Page 33: In-depth changes to Drupal 8 javascript

Backboned

Toolbar

Contextual

Edit

CKEditor admin

Page 34: In-depth changes to Drupal 8 javascript

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

New Features

Responsive tables

Responsive images

Quick edit

Many more…

Page 36: In-depth changes to Drupal 8 javascript

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

REST

Page 38: In-depth changes to Drupal 8 javascript

Rest, edit & backbone(Expected)

RESTPOST

GET

Page 39: In-depth changes to Drupal 8 javascript

Rest, edit & backbone(Reality)

Drupal

Get field edit form Submit

Ajax form

Hide & ajaxifyform

Page 40: In-depth changes to Drupal 8 javascript

EditorView.js

Drupal.edit.util.form.load()Drupal.edit.util.form.ajaxifySaving()fillAndSubmitForm()removeHiddenForm()

Page 41: In-depth changes to Drupal 8 javascript
Page 42: In-depth changes to Drupal 8 javascript

Assets handling

Page 43: In-depth changes to Drupal 8 javascript

Bonus

Page 44: In-depth changes to Drupal 8 javascript

Overlay

Page 45: In-depth changes to Drupal 8 javascript

Overlay

Page 46: In-depth changes to Drupal 8 javascript
Page 47: In-depth changes to Drupal 8 javascript
Page 48: In-depth changes to Drupal 8 javascript
Page 49: In-depth changes to Drupal 8 javascript

Questions !

Théodore BIADALA

@nod_

[email protected]

Pics found on: wtfevolution.tumblr.com