Your SlideShare is downloading. ×
JavaScript Secrets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

JavaScript Secrets

1,824
views

Published on

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

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
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,824
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
75
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. EXT JS 4.0What’s new and hot!
    • 2. About me• CTO, Modus Create. • RIA UI/UX design • High-end consulting • Training / workshops • Architectural guidance • Application architecture • Specialize in Sencha technologies.
    • 3. My books
    • 4. AGENDA• Discuss some of the secrets behind JavaScript
    • 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. 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. It’s a JavaScript world!
    • 8. Arithmetic Operators
    • 9. Arithmetic• Arithmetic operators•+ (add/concatenate)•- (subtract)•* (multiplication)•/ (division)•% (modulus/remainder)
    • 10. Arithmetic
    • 11. Remember• The + operator has a dual purpose • Addition and concatenation
    • 12. Operator coercion• For -, *, / operators, • JavaScript will try to convert strings into numbers.
    • 13. •When at all possible, try to performmath using numbers instead ofstrings.•Thiswill help reduce the chance oferrors.
    • 14. Comparison Operators
    • 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. Take the following....
    • 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. Seriously?
    • 19. Takeaway: == and != are EVILDo not use them!
    • 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. Fight the evil.All are false!
    • 22. Hoisting
    • 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. How a function really isinterpreted at execution time
    • 25. How a function really isinterpreted at execution time
    • 26. Interpretation case 2
    • 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. Function statement vs. expression
    • 29. Function statement hoisting
    • 30. Function statement hoisting
    • 31. This should be impossible
    • 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. Avoid function statements!
    • 34. JS optimizations
    • 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. 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. Minification
    • 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. A simple JS File• 183 Bytes
    • 40. Minified• 103 Bytes• 44% savings
    • 41. A better JS file• 184 Bytes Why is it better!?!?
    • 42. ‘Better code’ === ‘more savings’• 95 Bytes• 49% Savings
    • 43. Loops
    • 44. LoopsMinifier cantclaim space Namespace lookups costly
    • 45. Faster loops Minifier friendlyNo initializer Faster Lookup
    • 46. Better reference usage
    • 47. Less than optimal lookups
    • 48. Less than optimal lookups
    • 49. Optimal lookups
    • 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. Recap• Minify your code when possible • Develop “Minifier-friendly” code• Create optimized loops• Reduce namespace lookups by using local references
    • 52. Thanks!!! Questions? Twitter: @_jdg Mobile: 301-785-3030 Web: moduscreate.comEmail: jay@moduscreate.com