Your SlideShare is downloading. ×
0
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

In-depth changes to Drupal 8 javascript

4,897

Published 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. We'll be looking into the reasons …

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.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,897
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
0
Likes
6
Embeds 0
No embeds

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. In-depth changes to Drupal 8 javascript Théodore 'nod_' Biadala JS Maintainer for Drupal core Technical consultant @ Acquia DrupalCamp, Vienna 2013
  • 2. Who had problems with core JS ? With contrib JS ? Who knows about AMD/CommonJS ?
  • 3. TL ; DR
  • 4. Javascript changes (search & replace) Drupal.settings ↓ drupalSettings
  • 5. Javascript changes (search & replace) Drupal.theme.prototype ↓ Drupal.theme
  • 6. Javascript changes (search & replace) Drupal.ajax.prototype.commands ↓ Drupal.AjaxCommands.prototype
  • 7. PHP changes drupal_add_js() scripts[] =
  • 8. PHP changes 'T N O D drupal_add_js() scripts[] =
  • 9. PHP changes O D #attached hook_library_info()
  • 10. 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'), ));
  • 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. Example
  • 13. BEFORE function my_page() { drupal_add_ js($module_path . '/js/script.js'); return array( '#theme' => 'item_list', '#items' => array('one', 'two', 'three'), ); }
  • 14. AFTER function 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') ) ); }
  • 15. Maybe if patch #1996238 gets in my_module.library.yml: my_module.module: myscript: function my_page() { js: return array( - { file: js/script.js } '#theme' => 'item_list', dependencies: '#items' => array( /* … */ ), - system/jquery '#attach' => array( - system/drupal 'library' => array( - system/drupalSettings 'my_module/myscript', - system/jquery.once ) ) ); }
  • 16. DONE !
  • 17. Why ?
  • 18. Drupal 7 problems
  • 19. D7 problems jQuery 1.4.4 jQuery + drupal.js on all pages Core JS breaks easily Contrib JS is not great
  • 20. Drupal 8 Solutions
  • 21. D8 solutions Update all third party JS libraries Declare all script dependencies Strict mode & JSHint Coding standards
  • 22. D8 solutions Update all third party JS libraries Declare all script dependencies Strict mode & JSHint Coding standards
  • 23. Declare all script dependencies (AMD anyone ?)
  • 24. system/jquery system/underscore system/Backbone system/drupal system/drupalSettings
  • 25. Script Dependencies Only load what you use Dependency graph! Better aggregation, and... HTTP2 ready!
  • 26. JSHint {} required === or !== new MyConstructor() hasOwnProperty() “use strict”; var
  • 27. New
  • 28. New libraries jQuery 2 Modernizr Underscore CKEditor Backbone Joyride
  • 29. Wait… jQuery 2?
  • 30. drupal.org/project/ie8
  • 31. New libraries jQuery 2 Modernizr Underscore CKEditor Backbone Joyride
  • 32. Backboned Toolbar Edit Contextual CKEditor admin
  • 33. New APIs Drupal.announce(text, priority) Drupal.displace(broadcast) Drupal.debounce(func, wait) Drupal.dialog(element, options)
  • 34. New Features Responsive tables Responsive images Quick edit Many more…
  • 35. Same old stuff No documentation on api.d.o No testing No performance measurements ajax.js Drupal.behaviors
  • 36. REST
  • 37. Rest, edit & backbone (Expected) REST POST GET
  • 38. Rest, edit & backbone (Reality) Get field edit form Hide & ajaxify form Drupal Submit Ajax form
  • 39. EditorView.js Drupal.edit.util.form.load() Drupal.edit.util.form.ajaxifySaving() fillAndSubmitForm() removeHiddenForm()
  • 40. Assets handling
  • 41. Bonus
  • 42. Overlay
  • 43. Overlay
  • 44. Questions ! Théodore BIADALA @nod_ theodore.biadala@acquia.com Pics found on: wtfevolution.tumblr.com

×