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.
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
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
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
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
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
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
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
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
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
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
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