JavaScript Secrets

2,204 views

Published on

Modus CTO, Jay Garcia's presentation at the Time, Inc. Watecooler Series March 30, 2011.

JavaScript has come a long way since the 90's and has been proven to be the programming language with the most investment today.

With all the attention to the language, there are many resources on the web that promote less than optimal development patterns, which can hurt performance and maintainability.

In this discussion, Jay Garcia will reveal secrets behind the best JavaScript development techniques that will help your web pages scream.

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

No Downloads
Views
Total views
2,204
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
87
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • JavaScript Secrets

    1. 1. EXT JS 4.0What’s new and hot!
    2. 2. About me• CTO, Modus Create. • RIA UI/UX design • High-end consulting • Training / workshops • Architectural guidance • Application architecture • Specialize in Sencha technologies.
    3. 3. My books
    4. 4. AGENDA• Discuss some of the secrets behind JavaScript
    5. 5. 1995-2005• Advance use of JavaScript was limited until ~ 2005 • Field validation • Mouse cursor trails • Right click preventers • Popup storms• Lots of books written • Many taught bad practices
    6. 6. Today?• JavaScript frameworks in use more • Do more, quicker!• Way better debug tools • Firebug • Webkit inspector • IE8 JS debug console (IE9 is a little better)• HTML5 is gaining popularity • Flash is (somewhat) threatened
    7. 7. It’s a JavaScript world!
    8. 8. Arithmetic Operators
    9. 9. Arithmetic• Arithmetic operators•+ (add/concatenate)•- (subtract)•* (multiplication)•/ (division)•% (modulus/remainder)
    10. 10. Arithmetic
    11. 11. Remember• The + operator has a dual purpose • Addition and concatenation
    12. 12. Operator coercion• For -, *, / operators, • JavaScript will try to convert strings into numbers.
    13. 13. •When at all possible, try to performmath using numbers instead ofstrings.•Thiswill help reduce the chance oferrors.
    14. 14. Comparison Operators
    15. 15. Comparison operators with if/then• Most of us use if and then to control logic branches.• There is a hidden danger with == and != • Sometimes the result of an expression test can lead to unexpected code behavior
    16. 16. Take the following....
    17. 17. Meet “Falsy” and “Truthy”• Because JavaScript tries to coerce values, expressions using • == and !=• Expressions are boiled down to “Falsy” and “Truthy” • There should be no room for “Falsy” and “Truthy” in your code.
    18. 18. Seriously?
    19. 19. Takeaway: == and != are EVILDo not use them!
    20. 20. Instead...• Use === and !== • They are not evil :)• Get expected results every time• both === and !== test for value and data type • No coercion takes place
    21. 21. Fight the evil.All are false!
    22. 22. Hoisting
    23. 23. Hoisting•A mechanism for setting and creating things in a functionwhen that function is executed. • When a function is executed, two passes are actually made on the function by the JavaScript interpreter. • It can lead to much pain when dealing with function statements.
    24. 24. How a function really isinterpreted at execution time
    25. 25. How a function really isinterpreted at execution time
    26. 26. Interpretation case 2
    27. 27. More on hoisting• Due to hoisting, • function expressions their reference name created first and are • have assigned at execution time. • function statements their reference name created and are assigned • have before execution time
    28. 28. Function statement vs. expression
    29. 29. Function statement hoisting
    30. 30. Function statement hoisting
    31. 31. This should be impossible
    32. 32. Know hoisting....• Accordingto the hoisting rules, the second jump function should have been created • Firefox actually honors the conditional statement - what?!• Some browsers follow these rules and some don’t• This is because the language definition doesn’t really tell you what it’s supposed to do, so there are different implementations.• Coding this way can lead to unpredictable behavior of your
    33. 33. Avoid function statements!
    34. 34. JS optimizations
    35. 35. Asynchronous script tags• For HTML5 enabled browsers • Set async=‘async’ in your script tags. • <script type=‘text/javascript’ src=’/myfile.js’ async=‘async’></script> • Will allow JavaScript files to be non-blocking
    36. 36. Deferred execution• Set defer=‘defer’ in your script tags. • <script type=‘text/javascript’ src=’/myfile.js’ defer=‘defer’></script>• Will allow JavaScript code in those files to execute after the page has loaded.• Does not work in all browsers :(
    37. 37. Minification
    38. 38. Facts about minification• Reduce file size sent to the browser• Increase interpretation speed of JS files by the browser• Some Tools: • Yui-Compressor • Google Closure • Packer
    39. 39. A simple JS File• 183 Bytes
    40. 40. Minified• 103 Bytes• 44% savings
    41. 41. A better JS file• 184 Bytes Why is it better!?!?
    42. 42. ‘Better code’ === ‘more savings’• 95 Bytes• 49% Savings
    43. 43. Loops
    44. 44. LoopsMinifier cantclaim space Namespace lookups costly
    45. 45. Faster loops Minifier friendlyNo initializer Faster Lookup
    46. 46. Better reference usage
    47. 47. Less than optimal lookups
    48. 48. Less than optimal lookups
    49. 49. Optimal lookups
    50. 50. Recap•+ operators will concatenate strings, while -, *, / will coerce values• Avoid “Truthy” and “Falsy” by using === and !==• Use async and defer enabled Script tags when possible.• Use function expressions
    51. 51. Recap• Minify your code when possible • Develop “Minifier-friendly” code• Create optimized loops• Reduce namespace lookups by using local references
    52. 52. Thanks!!! Questions? Twitter: @_jdg Mobile: 301-785-3030 Web: moduscreate.comEmail: jay@moduscreate.com

    ×