JAVASCRIPT, TESTING, AND DRUPAL

Transcription

1 JAVASCRIPT, TESTING, AND DRUPAL Rob 1

2 JS, TESTING, AND DRUPAL What is the current state of JS in Drupal 7? JavaScript testing Drupal 8 2

3 ABOUT ME I work for Aten Design Group in Denver, Colorado I am a developer. I like code. 3

4 DRUPAL 7 4

5 DRUPAL 7 Drupal is a platform Unlike other systems, you get many tools out-of-the-box What does this include? 5

6 jquery Drupal jquery drupal.js Plugins: Once, Cookie, Form form.js jquery UI ajax.js 6

7 JQUERY Drupal comes with: jquery (2 years old) Newest version: jquery (1 month old) Core stability, interaction with other modules other JS May miss out on new functionality (e.g,.on()) 7

8 THERE S A MODULE FOR THAT 8

9 jquery Update module will provide you with updates jquery is in the dev version 9

10 USING JS 10

11 HOW TO ADD JS Theme Layer Module Libraries 11

12 THEME JS General UX code Code that helps with the site s appearance Anything that ties heavily to your site s HTML 12

13 <script> 13

14 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

15 MODULES AND LIBRARIES Relates to your module s functionality Use the Libraries module for 3rd party JS 15

16 MODULES AND LIBRARIES Use drupal_add_js() 16

17 DRUPAL_ADD_JS Don t do this. It will include your JS everywhere... even if your module isn t being used 17

18 DRUPAL_ADD_JS Don t do this. It will include your JS everywhere... even if your module isn t being used 17

19 DRUPAL_ADD_JS! This will only include the JS when your hook is going to run. This is a good thing. 18

20 DRUPAL_ADD_JS! This will only include the JS when your hook is going to run. This is a good thing. 18

21 DON T BUILD JS Don t build your JS within your module 19

22 DON T BUILD JS Don t build your JS within your module 19

23 MODULES AND LIBRARIES Put JS in a separate file! Use Drupal.settings to get at values from your module into JS 20

24 USING drupal.settings 21

25 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

26 drupal.behaviors EXAMPLE Use the jquery.once() plugin if you only want the code to execute on DOM load 23

27 USING JQUERY You can also use jquery directly still May be easier if you re used to it You can use $.ajaxcomplete() 24

28 TESTING 25

29 TESTING We ve added our JS What about making sure this code works, though? 26

30 27

31 TESTING Testing is good JS testing is important because: Front end code can change any stage in your project Browsers 28

32 29

33 QUNIT MODULE 30

34 TEST SWARM Automated testing with QUnit 31

35 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

36 TESTING Implement hook_testswarm_tests() Create a list of tests for your module/js Tests are written in QUnit 33

37 SO GO TEST YOUR CODE! 34

38 DRUPAL 8 35

39 DRUPAL 8 Testing: Don t use drupal_add_js: New libraries: Lots of other changes: AMD, jquery dependencies 36

40 DRUPAL 8 The future is coming along fast Many of the changes look to create some good practices Smaller JS profiles 37

41 DRUPAL 8 Get involved, find a way to contribute Voice an opinion Feature freeze is coming up! 38

42 JAVASCRIPT, TESTING, AND DRUPAL Rob 39