Upgrade your javascript to drupal 8

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_

[email protected]

Take the survey:

prague2013.drupal.org/session/upgrading-your-js-drupal-8

Pics found on: wtfevolution.tumblr.com