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