Practical Parallels: From Development on the Java™ Platform to Development With the JavaScript™ Programming Language Dave ...
Goal <ul><ul><li>Learn about the tools and techniques  for testing, debugging, and deploying JavaScript™ programming langu...
Agenda <ul><li>Who I Am </li></ul><ul><li>JavaScript Programming Language Testing </li></ul><ul><ul><li>Unit Testing </li>...
Who I Am <ul><li>Nitobi Enterprise Ajax Podcast </li></ul><ul><li>Enterprise Ajax book (Addison Wesley) </li></ul><ul><li>...
What Do I Do? <ul><li>Nitobi co-founder </li></ul><ul><li>Located in Vancouver, Canada </li></ul><ul><li>Ajax user-interfa...
 
Clients
Agenda <ul><li>Who I Am </li></ul><ul><li>JavaScript Programming Language Testing </li></ul><ul><ul><li>Unit Testing </li>...
http://www.flickr.com/photos/magtravels/85630949/
Quality Assurance <ul><li>Widely introduced during WWII </li></ul><ul><li>Munitions industry demanded better quality  and ...
It’s About the Bugs <ul><li>Testing is about  finding bugs </li></ul><ul><li>Added bonus! </li></ul>Now with code coverage!
Not All About Bugs <ul><li>Performance (later) </li></ul><ul><li>Usability (some other time) </li></ul><ul><li>Accessibili...
Development Philosophy <ul><li>Lots of development philosophies </li></ul><ul><ul><li>Waterfall </li></ul></ul><ul><ul><li...
The Many Faces of Testing <ul><li>Requirements </li></ul><ul><li>Design </li></ul><ul><li>Test Planning </li></ul><ul><li>...
http://www.flickr.com/photos/49503191155@N01/17975738/ Testing Development Requirements
Agenda <ul><li>Who I Am </li></ul><ul><li>JavaScript Programming Language Testing </li></ul><ul><ul><li>Unit Testing </li>...
http://www.flickr.com/photos/thomashawk/85441961/
Testing Tools <ul><li>JSUnit </li></ul><ul><li>JSMock </li></ul><ul><li>HTTPUnit </li></ul>
JSUnit <ul><li>function  setUpPage() { </li></ul><ul><li>setUpPageStatus = 'complete'; </li></ul><ul><li>} </li></ul><ul><...
JSUnit Method Overview <ul><li>setUpPage() </li></ul><ul><li>setUp() </li></ul><ul><li>tearDown() </li></ul><ul><li>warn(m...
 
 
Agenda <ul><li>Who I Am </li></ul><ul><li>JavaScript Programming Language Testing </li></ul><ul><ul><li>Unit Testing </li>...
 
Functional Testing <ul><li>Test the software according to the specification </li></ul><ul><li>Functional testing steps: </...
Functional Testing Tools <ul><li>Selenium </li></ul><ul><ul><li>Core </li></ul></ul><ul><ul><li>IDE </li></ul></ul><ul><ul...
 
 
This is a Test <ul><li><table> </li></ul><ul><li><tr><td> setVariable </td><td> username </td><td> 'user'+(new Date()).get...
DEMO <ul><li>Selenium IDE </li></ul>
Agenda <ul><li>Who I Am </li></ul><ul><li>JavaScript Programming Language Testing </li></ul><ul><ul><li>Unit Testing </li>...
http://www.flickr.com/photos/rbos/91474426/
Why Regression Test? <ul><li>With many people working the same code regression bugs are inevitable </li></ul><ul><li>This ...
Manual Testing <ul><li>Don’t underestimate its value </li></ul><ul><li>Introduces randomness </li></ul><ul><li>We are  goo...
Automated Testing <ul><li>This can be expensive </li></ul><ul><li>The sooner you automate the greater value </li></ul><ul>...
The Good and the Bad Good Bad Easy   X Misses important bugs   X Find regression bugs   X Fragile   X Run with the build  ...
The Value Proposition <ul><li>The more bugs you have the higher cost of automation </li></ul><ul><li>The more automation y...
Golden Rule
Questions to Ask <ul><li>Do they test the right things? </li></ul><ul><li>How many bugs do you know about? </li></ul><ul><...
First Steps <ul><li>Have few automated tests that  coarsely  cover the software—Smoke Test </li></ul><ul><li>If the smoke ...
Test Automation Tools <ul><li>Selenium server </li></ul><ul><li>JSUnit server </li></ul><ul><li>CruiseControl </li></ul><u...
JSUnit Server
Selenium Server
 
 
Agenda <ul><li>Who I Am </li></ul><ul><li>JavaScript Programming Language Testing </li></ul><ul><ul><li>Unit Testing </li>...
Finally <ul><li>Once the tests are written (and hopefully all fail) we can actually write some code </li></ul><ul><li>Ther...
 
http://www.flickr.com/photos/esther17/86558129/
 
Ground Rules <ul><li>Namespaces </li></ul><ul><ul><li>nitobi.$ </li></ul></ul><ul><li>Asynchronous programming </li></ul><...
 
Debugging Tools <ul><li>Firebug (Mozilla) </li></ul><ul><li>Developer Toolbar (IE) </li></ul><ul><li>Fiddler (IE) </li></u...
Firebug <ul><li>console.log('width: %d height: %d', w, h); </li></ul><ul><li>Write arrays, elements, whatever </li></ul><u...
DEMO <ul><li>Firebug </li></ul>
Most Important JavaScript Programming Language Keyword <ul><li>debugger </li></ul>
Agenda <ul><li>Who I Am </li></ul><ul><li>JavaScript Programming Language Testing </li></ul><ul><ul><li>Unit Testing </li>...
http://www.flickr.com/photos/pulpolux/192587812/
Deployment Guidelines <ul><li>Be aware of your audience </li></ul><ul><li>Ask questions first, optimize later </li></ul>
Optimization <ul><li>Situation dependent </li></ul><ul><li>How much data? </li></ul><ul><li>What type of data? </li></ul><...
HTML XML JSON
Firefox
Internet Explorer
http://www.jamesward.org/census/ Firefox Internet Explorer
XSLT Cross Browser Performance
Big Picture
Most Wanted <ul><li>innerHTML </li></ul><ul><li>offsetTop / Left </li></ul><ul><li>getBoundingClientRect / getBoxObjectFor...
Documentation <ul><li>JSDoc </li></ul>Linking across classes and methods @see The function return type of field / property...
JSDoc Markup <ul><li>/** </li></ul><ul><li>* Creates a new SimpleDataTable instance </li></ul><ul><li>* @class Simple clas...
JavaScript Compression <ul><li>Removing comments </li></ul><ul><li>Removing whitespace </li></ul><ul><li>Removing new-line...
Simple Example 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   c...
Ant Based Minification / Obfuscation <ul><li><target  </li></ul><ul><li>name=&quot;obfuscateJS&quot;  </li></ul><ul><li>de...
Compression <ul><li>Request </li></ul><ul><ul><li>Accept-Encoding: gzip,deflate </li></ul></ul><ul><li>Response </li></ul>...
Apache Config <ul><li># Compress everything unless excluded below. </li></ul><ul><li>SetOutputFilter DEFLATE </li></ul><ul...
How Small is It? Size (Kb) Original   9.3 Minify   3.9   GZip / Deflate   2.8 Minify + GZip / Deflate   1.3   Size Reducti...
Content Merging <ul><li>Reduce download overhead by merging resources </li></ul><ul><ul><li>JavaScript </li></ul></ul><ul>...
Image Merging
Image Merging <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot; media=&quot;scree...
Agenda <ul><li>Who I Am </li></ul><ul><li>JavaScript Programming Language Testing </li></ul><ul><ul><li>Unit Testing </li>...
Summary <ul><li>Assuring quality is an expensive task </li></ul><ul><li>There is value in testing </li></ul><ul><li>Don’t ...
Q&A
Upcoming SlideShare
Loading in...5
×

Pragmatic Parallels: Java and JavaScript

4,116

Published on

JavaOne presentation looking at the different tools available to JavaScript developers for debugging, performance and deployment

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

No Downloads
Views
Total Views
4,116
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
184
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Pragmatic Parallels: Java and JavaScript

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

    Clipping is a handy way to collect important slides you want to go back to later.

×