JavaScript Secrets

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


My books


AGENDA •Discuss some of the secrets behind JavaScript


• 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


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


It’s a JavaScript world!


Arithmetic Operators


Arithmetic

• Arithmetic operators

• + (add/concatenate)

• - (subtract)

• * (multiplication)

• / (division)

• % (modulus/remainder)


Arithmetic


Remember • The + operator has a dual purpose

• Addition and concatenation


Operator coercion• For -, *, / operators,

• JavaScript will try to convert strings into numbers.


•When at all possible, try to perform math using numbers instead of strings.

•This will help reduce the chance of errors.


Comparison Operators


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


Take the following....


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.


Seriously?


== and !=are EVIL

Do not use them!

Do not use them!

Takeaway:


Instead...

• Use === and !==

• They are not evil :)

• Get expected results every time

• both === and !== test for value and data type

•No coercion takes place


Fight the evil.

All are false!Wednesday, March 30, 2011

Hoisting


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.


How a function really is interpreted at execution time


Interpretation case 2


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


Function statement vs. expression


Function statement hoisting


This should be impossible


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


Avoid function statements!


JS optimizations


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


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 :(


Minification


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


A simple JS File

• 183 Bytes


Minified

• 103 Bytes

• 44% savings


A better JS file

• 184 Bytes

Why is it better!?!?Wednesday, March 30, 2011

‘Better code’ === ‘more savings’

• 95 Bytes

• 49% Savings


Loops


Loops

Minifier can't claim space

Namespace lookups costly


Faster loops

Minifier friendly

Faster LookupNo initializer


Better reference usage


Less than optimal lookups


Optimal lookups


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


Recap

•Minify your code when possible

•Develop “Minifier-friendly” code

• Create optimized loops

• Reduce namespace lookups by using local references


Thanks!!!Questions?

Twitter : @_jdgMobile: 301-785-3030

Web: moduscreate.comEmail: [email protected]


http://moduscreate.com

http://moduscreate.com

mailto:[email protected]

mailto:[email protected]

JavaScript Secrets

Technology

Transcript of JavaScript Secrets