Slideshow Transcript

1. Slide 1: Practical Parallels: From Development on the Java™ Platform to Development With the JavaScript™ Programming Language Dave Johnson CTO and Co-founder Nitobi www.nitobi.com Session 9624 2007 JavaOneSM Conference | Session TS-9624 |
2. Slide 2: Goal Learn about the tools and techniques for testing, debugging, and deploying JavaScript™ programming languages applications. 2 2007 JavaOneSM Conference | Session TS-9624 |
3. Slide 3: Agenda Who I Am JavaScript Programming Language Testing Unit Testing Functional Testing Regression Testing JavaScript Programming Language Debugging JavaScript Programming Language Deployment Summary 3 2007 JavaOneSM Conference | Session TS-9624 |
4. Slide 4: Who I Am • Nitobi Enterprise Ajax Podcast • Enterprise Ajax book (Addison Wesley) • blogs.nitobi.com/dave 4 2007 JavaOneSM Conference | Session TS-9624 |
5. Slide 5: What Do I Do? • Nitobi co-founder • Located in Vancouver, Canada • Ajax user-interface components for the enterprise 5 2007 JavaOneSM Conference | Session TS-9624 |
6. Slide 6: 6 2007 JavaOneSM Conference | Session TS-9624 |
7. Slide 7: Clients 7 2007 JavaOneSM Conference | Session TS-9624 |
8. Slide 8: Agenda Who I Am JavaScript Programming Language Testing Unit Testing Functional Testing Regression Testing JavaScript Programming Language Debugging JavaScript Programming Language Deployment Summary 8 2007 JavaOneSM Conference | Session TS-9624 |
9. Slide 9: http://www.flickr.com/photos/magtravels/85630949/ 9 2007 JavaOne Conference | Session TS-9624 | SM
10. Slide 10: Quality Assurance • Widely introduced during WWII • Munitions industry demanded better quality and more reliable “products” • Quality systems evolved to ISO 9001 “Rely on prevention rather than cure” 10 2007 JavaOneSM Conference | Session TS-9624 |
11. Slide 11: It’s About the Bugs • Testing is about finding bugs • Added bonus! Now with code coverage! 11 2007 JavaOneSM Conference | Session TS-9624 |
12. Slide 12: Not All About Bugs • Performance (later) • Usability (some other time) • Accessibility (read the book) 12 2007 JavaOneSM Conference | Session TS-9624 |
13. Slide 13: Development Philosophy • Lots of development philosophies • Waterfall • Iterative • Agile / Extreme • <!-- insert cool new technique here --> 13 2007 JavaOneSM Conference | Session TS-9624 |
14. Slide 14: The Many Faces of Testing • Requirements • Design • Test Planning • Test Development • Test Execution • Test Reporting 14 2007 JavaOneSM Conference | Session TS-9624 |
15. Slide 15: Development Testing Requirements http://www.flickr.com/photos/49503191155@N01/17975738/ 15 2007 JavaOne Conference | Session TS-9624 | SM
16. Slide 16: Agenda Who I Am JavaScript Programming Language Testing Unit Testing Functional Testing Regression Testing JavaScript Programming Language Debugging JavaScript Programming Language Deployment Summary 16 2007 JavaOneSM Conference | Session TS-9624 |
17. Slide 17: http://www.flickr.com/photos/thomashawk/85441961/ 17 2007 JavaOne Conference | Session TS-9624 | SM
18. Slide 18: Testing Tools • JSUnit • JSMock • HTTPUnit 18 2007 JavaOneSM Conference | Session TS-9624 |
19. Slide 19: JSUnit function setUpPage() { setUpPageStatus = 'complete'; } function setUp() { //… } function testDoSomething() { assertEquals(“a”, ”b”); } 19 2007 JavaOneSM Conference | Session TS-9624 |
20. Slide 20: JSUnit Method Overview • setUpPage() • setUp() • tearDown() • warn(message, [value]) • inform(message, [value]) • debug(message, [value]) • addTestSuite(filename) 20 2007 JavaOneSM Conference | Session TS-9624 |
21. Slide 21: 21 2007 JavaOneSM Conference | Session TS-9624 |
22. Slide 22: 22 2007 JavaOneSM Conference | Session TS-9624 |
23. Slide 23: Agenda Who I Am JavaScript Programming Language Testing Unit Testing Functional Testing Regression Testing JavaScript Programming Language Debugging JavaScript Programming Language Deployment Summary 23 2007 JavaOneSM Conference | Session TS-9624 |
24. Slide 24: 24 2007 JavaOneSM Conference | Session TS-9624 |
25. Slide 25: Functional Testing • Test the software according to the specification • Functional testing steps: • Identification of functions that the software is expected to perform • Creation of test data that will exercise those functions 25 2007 JavaOneSM Conference | Session TS-9624 |
26. Slide 26: Functional Testing Tools • Selenium • Core • IDE • Remote Control • Watir • jWebUnit 26 2007 JavaOneSM Conference | Session TS-9624 |
27. Slide 27: 27 2007 JavaOneSM Conference | Session TS-9624 |
28. Slide 28: 28 2007 JavaOneSM Conference | Session TS-9624 |
29. Slide 29: This is a Test <table> <tr><td>setVariable</td><td>username</td><td>'user'+(new Date()).getTime()</td></tr> <tr><td>open</td><td>./selenium_ft_tool/setup?user=${username}</td><td></td></tr> <tr><td>setVariable</td><td>base_url</td><td>'http://www.example.com:8080/'</td></tr> <tr><td>open</td><td>${base_url}</td><td></td></tr> <tr><td>type</td><td>__ac_name</td><td>${username}</td></tr> <tr><td>type</td><td>__ac_password</td><td>${username}</td></tr> <tr><td>click</td><td>submit</td><td></td></tr> <tr><td>verifyTextPresent</td><td>Welcome! You are now logged in</td><td></td></tr> <tr><td>setVariable</td><td>myfolder_url</td><td>'${base_url}/${username}/folder'</td></tr> <tr><td>click</td><td>//a[@href='${myfolder_url}']</td><td></td></tr> <tr><td>verifyTextPresent</td><td>${username}</td><td></td></tr> <tr><td>setVariable</td><td>homepage_url</td><td>'${base_url}/${username}/index/view'</td></tr> <tr><td>click</td><td>//a[@href='${homepage_url}']</td><td></td></tr> <table> 29 2007 JavaOneSM Conference | Session TS-9624 |
30. Slide 30: DEMO Selenium IDE 2007 JavaOneSM Conference | Session TS-9624 | 30
31. Slide 31: Agenda Who I Am JavaScript Programming Language Testing Unit Testing Functional Testing Regression Testing JavaScript Programming Language Debugging JavaScript Programming Language Deployment Summary 31 2007 JavaOneSM Conference | Session TS-9624 |
32. Slide 32: http://www.flickr.com/photos/rbos/91474426/ 32 2007 JavaOne Conference | Session TS-9624 | SM
33. Slide 33: Why Regression Test? • With many people working the same code regression bugs are inevitable • This can be painful 33 2007 JavaOneSM Conference | Session TS-9624 |
34. Slide 34: Manual Testing • Don’t underestimate its value • Introduces randomness • We are good at noticing oddities • We are bad at checking precise results 34 2007 JavaOneSM Conference | Session TS-9624 |
35. Slide 35: Automated Testing • This can be expensive • The sooner you automate the greater value • Automated test value is in untargeted bugs it finds—completely unrelated to the specific purpose for which it was written 35 2007 JavaOneSM Conference | Session TS-9624 |
36. Slide 36: The Good and the Bad Comparing aspects of automated testing Good Bad Easy X Misses important bugs X Find regression bugs X Fragile X Run with the build X Ignore functionality X 36 2007 JavaOneSM Conference | Session TS-9624 |
37. Slide 37: The Value Proposition 1. The more bugs you have the higher cost of automation 2. The more automation you have the fewer bugs you find 3. The more testing infrastructure you already have the better 37 2007 JavaOneSM Conference | Session TS-9624 |
38. Slide 38: Golden Rule NB  AT TC TI 38 2007 JavaOneSM Conference | Session TS-9624 |
39. Slide 39: Questions to Ask • Do they test the right things? • How many bugs do you know about? • How long will tests be relevant? • What is the value of the tests? 39 2007 JavaOneSM Conference | Session TS-9624 |
40. Slide 40: First Steps • Have few automated tests that coarsely cover the software—Smoke Test • If the smoke test succeeds, the product is testable and a “good build” • Pluses • Configuration changes are easily observed • Gross regressions are caught preemptively • Keeps emphasis on manual testing 40 2007 JavaOneSM Conference | Session TS-9624 |
41. Slide 41: Test Automation Tools • Selenium server • JSUnit server • CruiseControl • AntHill • Ant / NAnt 41 2007 JavaOneSM Conference | Session TS-9624 |
42. Slide 42: JSUnit Server 2007 JavaOneSM Conference | Session TS-9624 | 42
43. Slide 43: Selenium Server 2007 JavaOneSM Conference | Session TS-9624 | 43
44. Slide 44: 44 2007 JavaOneSM Conference | Session TS-9624 |
45. Slide 45: 45 2007 JavaOneSM Conference | Session TS-9624 |
46. Slide 46: Agenda Who I Am JavaScript Programming Language Testing Unit Testing Functional Testing Regression Testing JavaScript Programming Language Debugging JavaScript Programming Language Deployment Summary 46 2007 JavaOneSM Conference | Session TS-9624 |
47. Slide 47: Finally • Once the tests are written (and hopefully all fail) we can actually write some code • There’s only one problem… creating bugs 47 2007 JavaOneSM Conference | Session TS-9624 |
48. Slide 48: 48 2007 JavaOneSM Conference | Session TS-9624 |
49. Slide 49: http://www.flickr.com/photos/esther17/86558129/ 49 2007 JavaOne Conference | Session TS-9624 | SM
50. Slide 50: 50 2007 JavaOneSM Conference | Session TS-9624 |
51. Slide 51: Ground Rules • Namespaces • nitobi.$ • Asynchronous programming • Watch out for IE • Inheritance, interfaces etc • Global variables • _this = this • Closures • Frameworks • Documentation 51 2007 JavaOneSM Conference | Session TS-9624 |
52. Slide 52: 52 2007 JavaOneSM Conference | Session TS-9624 |
53. Slide 53: Debugging Tools • Firebug (Mozilla) • Developer Toolbar (IE) • Fiddler (IE) • WebKit (Safari) 53 2007 JavaOneSM Conference | Session TS-9624 |
54. Slide 54: Firebug • console.log('width: %d height: %d', w, h); • Write arrays, elements, whatever • Debug, info, warn, error • console.trace • console.time / timeEnd 54 2007 JavaOneSM Conference | Session TS-9624 |
55. Slide 55: DEMO Firebug 2007 JavaOneSM Conference | Session TS-9624 | 55
56. Slide 56: Most Important JavaScript Programming Language Keyword debugger 56 2007 JavaOneSM Conference | Session TS-9624 |
57. Slide 57: Agenda Who I Am JavaScript Programming Language Testing Unit Testing Functional Testing Regression Testing JavaScript Programming Language Debugging JavaScript Programming Language Deployment Summary 57 2007 JavaOneSM Conference | Session TS-9624 |
58. Slide 58: http://www.flickr.com/photos/pulpolux/192587812/ 58 2007 JavaOne Conference | Session TS-9624 | SM
59. Slide 59: Deployment Guidelines • Be aware of your audience • Ask questions first, optimize later 59 2007 JavaOneSM Conference | Session TS-9624 |
60. Slide 60: Optimization • Situation dependent • How much data? • What type of data? • How many server hits? • What are the common workflows? • What browsers are you targeting? • What is the existing infrastructure? 60 2007 JavaOneSM Conference | Session TS-9624 |
61. Slide 61: HTML XML JSON 61 2007 JavaOneSM Conference | Session TS-9624 |
62. Slide 62: Firefox 62 2007 JavaOneSM Conference | Session TS-9624 |
63. Slide 63: Internet Explorer 63 2007 JavaOneSM Conference | Session TS-9624 |
64. Slide 64: Internet Explorer Firefox http://www.jamesward.org/census/ 64 2007 JavaOneSM Conference | Session TS-9624 |
65. Slide 65: XSLT Cross Browser Performance 45 40 Firefox 1.5 35 IE 6 30 Time (ms) 25 20 15 10 5 0 0 100 200 300 400 500 Table Cells 65 2007 JavaOneSM Conference | Session TS-9624 |
66. Slide 66: Time (ms) ge 0 100 200 300 400 500 600 700 800 tO f fs et To p Big Picture ge tB ox se tC la s sN am e ge tS ty le s he e t se tB ac kg ro u nd C ol or ge tS ty le 2007 JavaOneSM Conference | Session TS-9624 | ge tC la 66 s sN am e
67. Slide 67: Most Wanted • innerHTML • offsetTop / Left • getBoundingClientRect / getBoxObjectFor • Stylesheets • Consider HTML tags, styles, events 67 2007 JavaOneSM Conference | Session TS-9624 |
68. Slide 68: Documentation • JSDoc @constructor Class constructor @class Class name @param Method or function @extends Parent class arguments @type The function return type of field / property type @see Linking across classes and (number, string etc) methods 68 2007 JavaOneSM Conference | Session TS-9624 |
69. Slide 69: JSDoc Markup /** * Creates a new SimpleDataTable instance * @class Simple class for storing record based data from the server. * @constructor * @extends entAjax.DataModel */ entAjax.SimpleDataTable = function(data) { /** * Contains the data rendered in the DataTable * @private * @type {Array} * @see entAjax.DataModel#get */ this.m_data = data; } /** * @return Returns data from the server. * @param {String} url The URL of the location of the data on the server * @type */ entAjax.SimpleDataTable.prototype.get = function(url) {} 69 2007 JavaOneSM Conference | Session TS-9624 |
70. Slide 70: JavaScript Compression • Removing comments • Removing whitespace • Removing new-line characters • Replacing variables with shorter names 70 2007 JavaOneSM Conference | Session TS-9624 |
71. Slide 71: Simple Example /** * @private */ var _calcAverage = function(aNumber) { var nTotal = 0; var iLength = aNumber.length; for (var iIndex = 0; i<iLength; i++) { nTotal += aNumber[iIndex]; } return nTotal/iLength; } /** * Calculates the average of an array of numbers. * @param {Array} Array of numbers to average. */ var calcAverage = _calcAverage; var _a = function(a){var b=0;var c=a.length;for(var d=0;d<c;d++){b+=a[d];}return b/c;}var calcAverage=_a; 71 2007 JavaOneSM Conference | Session TS-9624 |
72. Slide 72: Ant Based Minification / Obfuscation <target name=\"obfuscateJS\" description=\"compress and obfuscate code\"> <java classname=\"org.mozilla.javascript.tools.shell.Main“ dir=\"${basedir}\\build\\rhino\\bin\\“ fork=\"true“ output=\"${basedir}\\output\\src_obfuscated.js\"> <arg line=\"-c ${basedir}\\output\\src.js\" /> <classpath> <pathelement path=\"${basedir}\\build\\rhino\\bin\\js.jar\"/> </classpath> </java> </target> 72 2007 JavaOneSM Conference | Session TS-9624 |
73. Slide 73: Compression • Request • Accept-Encoding: gzip,deflate • Response • Content-Encoding: gzip || deflate • IIS and Apache dynamically GZip / Deflate content and cache it • All modern browsers support compressed content • Internet Explorer 6 SP1 had some problems • IE, Firefox, Opera accept compressed content _without_ Content-Encoding header 73 2007 JavaOneSM Conference | Session TS-9624 |
74. Slide 74: Apache Config # Compress everything unless excluded below. SetOutputFilter DEFLATE SetInputFilter DEFLATE SetEnvIfNoCase Request_URI \\.(?:gif|jpe?g|png)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \\.(?:exe|t?gz|zip|bz2|rar)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \\.(?:pdf|avi|mov|mp3|rm)$ no-gzip dont-vary # Explicity compress certain file types AddOutputFilterByType DEFLATE text/html text/plain text/xml 74 2007 JavaOneSM Conference | Session TS-9624 |
75. Slide 75: How Small is It? Expected Results for JavaScript Compression Size (Kb) Original 9.3 Minify 3.9 GZip / Deflate 2.8 Minify + GZip / Deflate 1.3 Size Reduction 86% 75 2007 JavaOneSM Conference | Session TS-9624 |
76. Slide 76: Content Merging • Reduce download overhead by merging resources • JavaScript • Cascading Stylesheets • Images • Careful with caching though! 76 2007 JavaOneSM Conference | Session TS-9624 |
77. Slide 77: Image Merging 77 2007 JavaOneSM Conference | Session TS-9624 |
78. Slide 78: Image Merging <html> <head> <style type=\"text/css\" media=\"screen\"> .colour {clip: rect(0px 135px 125px 0px);} .grayscale { left:-135px; clip: rect(0px 135px 125px 0px); clip: rect(0px 270px 125px 135px); } .grayscale, .colour { clip: rect(0px 270px 125px 135px); position:absolute; width: 270px;height: 125px; background: url(images/nitobi.jpg); } .container { background: url(images/nitobi.jpg); height:125px;width:135px; position:relative; } </style> </head> <body> <div class=\"container\"><div class=\"colour\"></div></div> <div class=\"container\"><div class=\"grayscale\"></div></div> </body> </html> 78 2007 JavaOne Conference | Session TS-9624 | SM
79. Slide 79: Agenda Who I Am JavaScript Programming Language Testing Unit Testing Functional Testing Regression Testing JavaScript Programming Language Debugging JavaScript Programming Language Deployment Summary 79 2007 JavaOneSM Conference | Session TS-9624 |
80. Slide 80: Summary • Assuring quality is an expensive task • There is value in testing • Don’t test too much • Use all the tools at your disposal • Optimize with care 80 2007 JavaOneSM Conference | Session TS-9624 |
81. Slide 81: Q&A 2007 JavaOneSM Conference | Session TS-9624 | 81