Upgrade your javascript to drupal 8
Upcoming SlideShare
Loading in...5
×
 

Upgrade your javascript to drupal 8

on

  • 2,200 views

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

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.

Statistics

Views

Total Views
2,200
Views on SlideShare
2,149
Embed Views
51

Actions

Likes
2
Downloads
7
Comments
0

3 Embeds 51

http://librosweb.es 30
https://twitter.com 20
http://librosweb.dev 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Upgrade your javascript to drupal 8 Upgrade your javascript to drupal 8 Presentation Transcript

  • UpgradeyourjavascripttoDrupal8
  • Upgrade your JavaScript to Drupal 8 Théodore'nod_'Biadala JS Maintainer for Drupal core Technical 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'), ); }
  • AFTER function 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 Declareallscriptdependencies Strict 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_ theodore.biadala@acquia.com Take the survey: prague2013.drupal.org/session/upgrading-your-js-drupal-8 Pics found on: wtfevolution.tumblr.com