JAVASCRIPT, TESTING, AND DRUPAL Rob Ballou @rob_ballou 1
JS, TESTING, AND DRUPAL What is the current state of JS in Drupal 7? JavaScript testing Drupal 8 2
ABOUT ME I work for Aten Design Group in Denver, Colorado I am a developer. I like code. 3
DRUPAL 7 4
DRUPAL 7 Drupal is a platform Unlike other systems, you get many tools out-of-the-box What does this include? 5
jquery Drupal jquery drupal.js Plugins: Once, Cookie, Form form.js jquery UI ajax.js 6
JQUERY Drupal comes with: jquery 1.4.4 (2 years old) Newest version: jquery 1.8.2 (1 month old) Core stability, interaction with other modules other JS May miss out on new functionality (e.g,.on()) 7
THERE S A MODULE FOR THAT 8
jquery Update module will provide you with updates jquery 1.8.2 is in the dev version http://drupal.org/project/jquery_update 9
USING JS 10
HOW TO ADD JS Theme Layer Module Libraries 11
THEME JS General UX code Code that helps with the site s appearance Anything that ties heavily to your site s HTML 12
<script> 13
THEME JS Drop the JS file into your theme folder Add the JS to your theme info file scripts[] = js/main.js You can also add via your html.tpl.php file (but you shouldn t) 14
MODULES AND LIBRARIES Relates to your module s functionality Use the Libraries module for 3rd party JS 15
MODULES AND LIBRARIES Use drupal_add_js() http://is.gd/drupal_add_js 16
DRUPAL_ADD_JS Don t do this. It will include your JS everywhere... even if your module isn t being used 17
DRUPAL_ADD_JS Don t do this. It will include your JS everywhere... even if your module isn t being used 17
DRUPAL_ADD_JS! This will only include the JS when your hook is going to run. This is a good thing. 18
DRUPAL_ADD_JS! This will only include the JS when your hook is going to run. This is a good thing. 18
DON T BUILD JS Don t build your JS within your module 19
DON T BUILD JS Don t build your JS within your module 19
MODULES AND LIBRARIES Put JS in a separate file! Use Drupal.settings to get at values from your module into JS 20
USING drupal.settings 21
DRUPAL BEHAVIORS drupal.behaviors allows you to run code when DOM is loaded It also ties into AJAX completion This is simple to implement. Kinda. 22
drupal.behaviors EXAMPLE Use the jquery.once() plugin if you only want the code to execute on DOM load 23
USING JQUERY You can also use jquery directly still May be easier if you re used to it You can use $.ajaxcomplete() 24
TESTING 25
TESTING We ve added our JS What about making sure this code works, though? 26
27
TESTING Testing is good JS testing is important because: Front end code can change any stage in your project Browsers 28
29
QUNIT MODULE 30
TEST SWARM Automated testing with QUnit 31
TESTING Test Swarm is an active project It s involved in the getting tests available in D8 And... it allows you to create your own tests 32
TESTING Implement hook_testswarm_tests() Create a list of tests for your module/js Tests are written in QUnit 33
SO GO TEST YOUR CODE! 34
DRUPAL 8 35
DRUPAL 8 Testing: http://drupal.org/node/237566 Don t use drupal_add_js: http://drupal.org/node/1737148 New libraries: http://drupal.org/node/1149866 Lots of other changes: http://groups.drupal.org/node/226738 AMD, jquery dependencies 36
DRUPAL 8 The future is coming along fast Many of the changes look to create some good practices Smaller JS profiles 37
DRUPAL 8 Get involved, find a way to contribute Voice an opinion Feature freeze is coming up! 38
JAVASCRIPT, TESTING, AND DRUPAL Rob Ballou @rob_ballou 39