Pragmatic Parallels: Java and JavaScript

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites & 1 Group

    Pragmatic Parallels: Java and JavaScript - Presentation Transcript

    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. Goal
        • Learn about the tools and techniques for testing, debugging, and deploying JavaScript™ programming languages applications.
    3. Agenda
      • Who I Am
      • JavaScript Programming Language Testing
        • Unit Testing
        • Functional Testing
        • Regression Testing
      • JavaScript Programming Language Debugging
      • JavaScript Programming Language Deployment
      • Summary
    4. Who I Am
      • Nitobi Enterprise Ajax Podcast
      • Enterprise Ajax book (Addison Wesley)
      • blogs.nitobi.com/dave
    5. What Do I Do?
      • Nitobi co-founder
      • Located in Vancouver, Canada
      • Ajax user-interface components for the enterprise
    6.  
    7. Clients
    8. Agenda
      • Who I Am
      • JavaScript Programming Language Testing
        • Unit Testing
        • Functional Testing
        • Regression Testing
      • JavaScript Programming Language Debugging
      • JavaScript Programming Language Deployment
      • Summary
    9. http://www.flickr.com/photos/magtravels/85630949/
    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”
    11. It’s About the Bugs
      • Testing is about finding bugs
      • Added bonus!
      Now with code coverage!
    12. Not All About Bugs
      • Performance (later)
      • Usability (some other time)
      • Accessibility (read the book)
    13. Development Philosophy
      • Lots of development philosophies
        • Waterfall
        • Iterative
        • Agile / Extreme
        • <!-- insert cool new technique here -->
    14. The Many Faces of Testing
      • Requirements
      • Design
      • Test Planning
      • Test Development
      • Test Execution
      • Test Reporting
    15. http://www.flickr.com/photos/49503191155@N01/17975738/ Testing Development Requirements
    16. Agenda
      • Who I Am
      • JavaScript Programming Language Testing
        • Unit Testing
        • Functional Testing
        • Regression Testing
      • JavaScript Programming Language Debugging
      • JavaScript Programming Language Deployment
      • Summary
    17. http://www.flickr.com/photos/thomashawk/85441961/
    18. Testing Tools
      • JSUnit
      • JSMock
      • HTTPUnit
    19. JSUnit
      • function setUpPage() {
      • setUpPageStatus = 'complete';
      • }
      • function setUp() {
      • //…
      • }
      • function testDoSomething() {
      • assertEquals(“a”, ”b”);
      • }
    20. JSUnit Method Overview
      • setUpPage()
      • setUp()
      • tearDown()
      • warn(message, [value])
      • inform(message, [value])
      • debug(message, [value])
      • addTestSuite(filename)
    21.  
    22.  
    23. Agenda
      • Who I Am
      • JavaScript Programming Language Testing
        • Unit Testing
        • Functional Testing
        • Regression Testing
      • JavaScript Programming Language Debugging
      • JavaScript Programming Language Deployment
      • Summary
    24.  
    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
    26. Functional Testing Tools
      • Selenium
        • Core
        • IDE
        • Remote Control
      • Watir
      • jWebUnit
    27.  
    28.  
    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>
    30. DEMO
      • Selenium IDE
    31. Agenda
      • Who I Am
      • JavaScript Programming Language Testing
        • Unit Testing
        • Functional Testing
        • Regression Testing
      • JavaScript Programming Language Debugging
      • JavaScript Programming Language Deployment
      • Summary
    32. http://www.flickr.com/photos/rbos/91474426/
    33. Why Regression Test?
      • With many people working the same code regression bugs are inevitable
      • This can be painful
    34. Manual Testing
      • Don’t underestimate its value
      • Introduces randomness
      • We are good at noticing oddities
      • We are bad at checking precise results
    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
    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
    37. The Value Proposition
      • The more bugs you have the higher cost of automation
      • The more automation you have the fewer bugs you find
      • The more testing infrastructure you already have the better
    38. Golden Rule
    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?
    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
    41. Test Automation Tools
      • Selenium server
      • JSUnit server
      • CruiseControl
      • AntHill
      • Ant / NAnt
    42. JSUnit Server
    43. Selenium Server
    44.  
    45.  
    46. Agenda
      • Who I Am
      • JavaScript Programming Language Testing
        • Unit Testing
        • Functional Testing
        • Regression Testing
      • JavaScript Programming Language Debugging
      • JavaScript Programming Language Deployment
      • Summary
    47. Finally
      • Once the tests are written (and hopefully all fail) we can actually write some code
      • There’s only one problem… creating bugs
    48.  
    49. http://www.flickr.com/photos/esther17/86558129/
    50.  
    51. Ground Rules
      • Namespaces
        • nitobi.$
      • Asynchronous programming
        • Watch out for IE
      • Inheritance, interfaces etc
      • Global variables
        • _this = this
      • Closures
      • Frameworks
      • Documentation
    52.  
    53. Debugging Tools
      • Firebug (Mozilla)
      • Developer Toolbar (IE)
      • Fiddler (IE)
      • WebKit (Safari)
    54. Firebug
      • console.log('width: %d height: %d', w, h);
      • Write arrays, elements, whatever
      • Debug, info, warn, error
      • console.trace
      • console.time / timeEnd
    55. DEMO
      • Firebug
    56. Most Important JavaScript Programming Language Keyword
      • debugger
    57. Agenda
      • Who I Am
      • JavaScript Programming Language Testing
        • Unit Testing
        • Functional Testing
        • Regression Testing
      • JavaScript Programming Language Debugging
      • JavaScript Programming Language Deployment
      • Summary
    58. http://www.flickr.com/photos/pulpolux/192587812/
    59. Deployment Guidelines
      • Be aware of your audience
      • Ask questions first, optimize later
    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?
    61. HTML XML JSON
    62. Firefox
    63. Internet Explorer
    64. http://www.jamesward.org/census/ Firefox Internet Explorer
    65. XSLT Cross Browser Performance
    66. Big Picture
    67. Most Wanted
      • innerHTML
      • offsetTop / Left
      • getBoundingClientRect / getBoxObjectFor
      • Stylesheets
      • Consider HTML tags, styles, events
    68. Documentation
      • JSDoc
      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
    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) {}
    70. JavaScript Compression
      • Removing comments
      • Removing whitespace
      • Removing new-line characters
      • Replacing variables with shorter names
    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;
    72. Ant Based Minification / Obfuscation
      • <target
      • name=&quot;obfuscateJS&quot;
      • description=&quot;compress and obfuscate code&quot;>
      • <java
      • classname=&quot;org.mozilla.javascript.tools.shell.Main“
      • dir=&quot;${basedir}uild hinoin“
      • fork=&quot;true“
      • output=&quot;${basedir}outputsrc_obfuscated.js&quot;>
      • <arg line=&quot;-c ${basedir}outputsrc.js &quot; />
      • <classpath>
      • <pathelement path=&quot;${basedir}uild hinoinjs.jar&quot; />
      • </classpath>
      • </java>
      • </target>
    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
    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
    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
    76. Content Merging
      • Reduce download overhead by merging resources
        • JavaScript
        • Cascading Stylesheets
        • Images
      • Careful with caching though!
    77. Image Merging
    78. Image Merging
      • <html>
      • <head>
      • <style type=&quot;text/css&quot; media=&quot;screen&quot;>
      • .colour {clip: rect(0px 135px 125px 0px);}
      • .grayscale {
      • left:-135px;
      • clip: rect(0px 270px 125px 135px);
      • }
      • .grayscale, .colour {
      • position:absolute;
      • width: 270px;height: 125px;
      • background: url(images/nitobi.jpg);
      • }
      • .container {
      • height:125px;width:135px;
      • position:relative;
      • }
      • </style>
      • </head>
      • <body>
      • <div class=&quot;container&quot;><div class=&quot;colour&quot;></div></div>
      • <div class=&quot;container&quot;><div class=&quot;grayscale&quot;></div></div>
      • </body>
      • </html>
      clip: rect(0px 135px 125px 0px); clip: rect(0px 270px 125px 135px); background: url(images/nitobi.jpg);
    79. Agenda
      • Who I Am
      • JavaScript Programming Language Testing
        • Unit Testing
        • Functional Testing
        • Regression Testing
      • JavaScript Programming Language Debugging
      • JavaScript Programming Language Deployment
      • Summary
    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
    81. Q&A

    + davejohnsondavejohnson, 3 years ago

    custom

    3197 views, 3 favs, 1 embeds more stats

    JavaOne presentation looking at the different tools more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 3197
      • 3188 on SlideShare
      • 9 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 162
    Most viewed embeds
    • 9 views on http://blogs.nitobi.com

    more

    All embeds
    • 9 views on http://blogs.nitobi.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Groups / Events