Post on 21-Oct-2014
description
JAVASCRIPT SECRETS
Cleaner Code/ Faster Apps
Wednesday, March 30, 2011
• CTO, Modus Create.
• RIA UI/UX design
• High-end consulting
• Training / workshops
• Architectural guidance
• Application architecture
• Specialize in Sencha technologies.
About me
Wednesday, March 30, 2011
Wednesday, March 30, 2011
Wednesday, March 30, 2011
Wednesday, March 30, 2011
My books
Wednesday, March 30, 2011
AGENDA •Discuss some of the secrets behind JavaScript
Wednesday, March 30, 2011
• 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
1995-2005
Wednesday, March 30, 2011
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
It’s a JavaScript world!
Wednesday, March 30, 2011
Arithmetic Operators
Wednesday, March 30, 2011
Arithmetic
• Arithmetic operators
• + (add/concatenate)
• - (subtract)
• * (multiplication)
• / (division)
• % (modulus/remainder)
Wednesday, March 30, 2011
Arithmetic
Wednesday, March 30, 2011
Remember • The + operator has a dual purpose
• Addition and concatenation
Wednesday, March 30, 2011
Operator coercion• For -, *, / operators,
• JavaScript will try to convert strings into numbers.
Wednesday, March 30, 2011
•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
Comparison Operators
Wednesday, March 30, 2011
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
Take the following....
Wednesday, March 30, 2011
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
Seriously?
Wednesday, March 30, 2011
== and !=are EVIL
Do not use them!
Do not use them!
Takeaway:
Wednesday, March 30, 2011
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
Fight the evil.
All are false!Wednesday, March 30, 2011
Hoisting
Wednesday, March 30, 2011
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
How a function really is interpreted at execution time
Wednesday, March 30, 2011
How a function really is interpreted at execution time
Wednesday, March 30, 2011
Interpretation case 2
Wednesday, March 30, 2011
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
Function statement vs. expression
Wednesday, March 30, 2011
Function statement hoisting
Wednesday, March 30, 2011
Function statement hoisting
Wednesday, March 30, 2011
This should be impossible
Wednesday, March 30, 2011
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
Avoid function statements!
Wednesday, March 30, 2011
JS optimizations
Wednesday, March 30, 2011
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
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
Minification
Wednesday, March 30, 2011
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
A simple JS File
• 183 Bytes
Wednesday, March 30, 2011
Minified
• 103 Bytes
• 44% savings
Wednesday, March 30, 2011
A better JS file
• 184 Bytes
Why is it better!?!?Wednesday, March 30, 2011
‘Better code’ === ‘more savings’
• 95 Bytes
• 49% Savings
Wednesday, March 30, 2011
Loops
Wednesday, March 30, 2011
Loops
Minifier can't claim space
Namespace lookups costly
Wednesday, March 30, 2011
Faster loops
Minifier friendly
Faster LookupNo initializer
Wednesday, March 30, 2011
Better reference usage
Wednesday, March 30, 2011
Less than optimal lookups
Wednesday, March 30, 2011
Less than optimal lookups
Wednesday, March 30, 2011
Optimal lookups
Wednesday, March 30, 2011
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
Recap
•Minify your code when possible
•Develop “Minifier-friendly” code
• Create optimized loops
• Reduce namespace lookups by using local references
Wednesday, March 30, 2011
Thanks!!!Questions?
Twitter : @_jdgMobile: 301-785-3030
Web: moduscreate.comEmail: jay@moduscreate.com
Wednesday, March 30, 2011