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.

1. JAVASCRIPT
SECRETS
Cleaner Code/ Faster Apps
Wednesday, March 30, 2011

2. About me
• CTO, Modus Create.
• RIA UI/UX design
• High-end consulting
• Training / workshops
• Architectural guidance
• Application architecture
• Specialize in Sencha technologies.
Wednesday, March 30, 2011

3. Wednesday, March 30, 2011

4. Wednesday, March 30, 2011

5. Wednesday, March 30, 2011

6. My books
Wednesday, March 30, 2011

7. AGENDA
• Discuss some of the secrets behind JavaScript
Wednesday, March 30, 2011

8. 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
Wednesday, March 30, 2011

9. 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
Wednesday, March 30, 2011

10. It’s a JavaScript world!
Wednesday, March 30, 2011

11. Arithmetic Operators
Wednesday, March 30, 2011

12. Arithmetic
• Arithmetic operators
•+ (add/concatenate)
•- (subtract)
•* (multiplication)
•/ (division)
•% (modulus/remainder)
Wednesday, March 30, 2011

13. Arithmetic
Wednesday, March 30, 2011

14. Remember
• The + operator has a dual purpose
• Addition and concatenation
Wednesday, March 30, 2011

15. Operator coercion
• For -, *, / operators,
• JavaScript will try to convert strings into numbers.
Wednesday, March 30, 2011

16. •When at all possible, try to perform
math using numbers instead of
strings.
•This will help reduce the chance of
errors.
Wednesday, March 30, 2011

17. Comparison Operators
Wednesday, March 30, 2011

18. 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
Wednesday, March 30, 2011

19. Take the following....
Wednesday, March 30, 2011

20. 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.
Wednesday, March 30, 2011

21. Seriously?
Wednesday, March 30, 2011

22. Takeaway:
== and !=
are EVIL
Do not use them!
Wednesday, March 30, 2011

23. Instead...
• Use === and !==
• They are not evil :)
• Get expected results every time
• both === and !== test for value and data type
• No coercion takes place
Wednesday, March 30, 2011

24. Fight the evil.
All are false!
Wednesday, March 30, 2011

25. Hoisting
Wednesday, March 30, 2011

26. Hoisting
•A mechanism for setting and creating things in a function
when 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.
Wednesday, March 30, 2011

27. How a function really is
interpreted at execution time
Wednesday, March 30, 2011

28. How a function really is
interpreted at execution time
Wednesday, March 30, 2011

29. Interpretation case 2
Wednesday, March 30, 2011

30. More on hoisting
• Due to hoisting,
• function expressions
• have their reference name created first and are
assigned at execution time.
• function statements
• have their reference name created and are assigned
before execution time
Wednesday, March 30, 2011

31. Function statement vs. expression
Wednesday, March 30, 2011

32. Function statement hoisting
Wednesday, March 30, 2011

33. Function statement hoisting
Wednesday, March 30, 2011

34. This should be impossible
Wednesday, March 30, 2011

35. Know hoisting....
• According to 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
Wednesday, March 30, 2011

36. Avoid function statements!
Wednesday, March 30, 2011

37. JS optimizations
Wednesday, March 30, 2011

38. 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
Wednesday, March 30, 2011

39. 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 :(
Wednesday, March 30, 2011

40. Minification
Wednesday, March 30, 2011

41. 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
Wednesday, March 30, 2011

42. A simple JS File
• 183 Bytes
Wednesday, March 30, 2011

43. Minified
• 103 Bytes
• 44% savings
Wednesday, March 30, 2011

44. A better JS file
• 184 Bytes
Why is it better!?!?
Wednesday, March 30, 2011

45. ‘Better code’ === ‘more savings’
• 95 Bytes
• 49% Savings
Wednesday, March 30, 2011

46. Loops
Wednesday, March 30, 2011

47. Loops
Minifier can't
claim space
Namespace
lookups costly
Wednesday, March 30, 2011

48. Faster loops
Minifier friendly
No initializer Faster Lookup
Wednesday, March 30, 2011

49. Better reference usage
Wednesday, March 30, 2011

50. Less than optimal lookups
Wednesday, March 30, 2011

51. Less than optimal lookups
Wednesday, March 30, 2011

52. Optimal lookups
Wednesday, March 30, 2011

53. 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
Wednesday, March 30, 2011

54. Recap
• Minify your code when possible
• Develop “Minifier-friendly” code
• Create optimized loops
• Reduce namespace lookups by using local references
Wednesday, March 30, 2011

55. Thanks!!!
Questions?
Twitter: @_jdg
Mobile: 301-785-3030
Web: moduscreate.com
Email: jay@moduscreate.com
Wednesday, March 30, 2011