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

Like this? Share it with your network

Share

Upgrade your javascript to drupal 8

  • 2,612 views
Uploaded on

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,612
On Slideshare
2,560
From Embeds
52
Number of Embeds
3

Actions

Shares
Downloads
7
Comments
0
Likes
2

Embeds 52

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. UpgradeyourjavascripttoDrupal8
  • 2. Upgrade your JavaScript to Drupal 8 Théodore'nod_'Biadala JS Maintainer for Drupal core Technical consultant @ Acquia DrupalCon, Prague 2013
  • 3. Few things before starting Who can write a custom module? Who knows about render array? Who knows about #attached? Who knows about hook_library()?
  • 4. TL ; DR
  • 5. Javascript changes (search&replace) Drupal.settings ↓ drupalSettings
  • 6. Javascript changes (search&replace) Drupal.theme.prototype ↓ Drupal.theme
  • 7. Javascript changes (search&replace) Drupal.ajax.prototype.commands ↓ Drupal.AjaxCommands.prototype
  • 8. PHP changes drupal_add_js() scripts[] =
  • 9. PHP changes drupal_add_js() scripts[] =DON'T
  • 10. PHP changes #attached hook_library_info()DO
  • 11. 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'), ));
  • 12. 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'), ));
  • 13. 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'), ));
  • 14. 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'), ));
  • 15. 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'), ));
  • 16. Example
  • 17. BEFORE function my_page() { drupal_add_js($module_path.'/script.js'); return array( '#theme' => 'item_list', '#items' => array('one', 'two', 'three'), ); }
  • 18. 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')) ); }
  • 19. 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', )) ); }
  • 20. DONE !
  • 21. Why ?
  • 22. Drupal 7 problems
  • 23. D7 problems jQuery 1.4.4 jQuery + drupal.js on all pages Core JS breaks easily Contrib JS is not great
  • 24. Drupal 8 Solutions
  • 25. D8 solutions Update all third party JS libraries Declare all script dependencies Strict mode & JSHint Coding standards
  • 26. D8 solutions Update all third party JS libraries Declareallscriptdependencies Strict mode & JSHint Coding standards
  • 27. New
  • 28. New libraries jQuery 2 Underscore Backbone Modernizr CKEditor Joyride
  • 29. New APIs Drupal.announce(text, priority) Drupal.displace(broadcast) Drupal.debounce(func, wait) Drupal.dialog(element, options)
  • 30. New Features Responsive tables Responsive images Quick edit Many, many more…
  • 31. Wait… jQuery 2?
  • 32. drupal.org/project/ie8
  • 33. 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