Complex Applications

All day, everyday

Robots.

What's my goal for this talk?

Look at JavaScript differently.

Important Techniques

Little to no code

Snappy, not sloppy.

Prerequisites

Experience with jQuery

Additional Resources

@carldanley

IRC #javascript on freenode

Benchmarking

Find weaknesses

Benchmarking is super important.

Benchmarking !== Unit Testing

So...

How can you benchmark your code?

Easily create benchmarks

Logs information automatically

Get results fast!

Find tests that...

exemplify what you're looking for

Go forth and benchmark all the things!

Caching

Experience with transients?

Guarantees ROI.

Provides stability.

Faster performance.

Same concept.

Way more important.

Preface

Don't do this. Just an example.

Both server & client side

Skip Caching?

What's the difference then?

Heavier price to pay

Things can break.

Things will be clunky.

Your life will be miserable

Caching is important.

More than once,
cache it.

See a problem here?

<script type='text/javascript'>
// a whole bunch of code
$( '#some-div' ).doStuff();

// 5 lines later
$( '#some-div' ).doMoreStuff();
</script>
			

Let's fix that.

<script type='text/javascript'>
// cache our variable because we know we'll need it later
var $someDiv = $( '#some-div' );

// a whole bunch of code
$someDiv.doStuff();

// 5 lines later
$someDiv.doMoreStuff();
</script>
			

Why the $ prefix?

<script type='text/javascript'>
// cache our variable because we know we'll need it later
var $someDiv = $( '#some-div' );

// a whole bunch of code
$someDiv.doStuff();

// 5 lines later
$someDiv.doMoreStuff();
</script>
			

Immediately think jQuery

Use your natives.

querySelector
querySelectorAll

getElementById
getElementsByTagName

Gain of 15-20%

Recap.

More than once,
cache it.

Use Natives.

jsPerf often

Event Delegation

Event objects & bubbling

1 event, not 50.

Code Example

// setup
var tableElements = document.querySelectorAll( 'table' );
var $tables = $( tableElements );
function someCallback() {
	alert( this.nodeName );
}

// method 1
$tables.on( 'click', 'td', someCallback );

// method 2
$tables.delegate( 'td', 'click', someCallback );
			

Duck Punching

Code Example

function someCallback( event ) {
	var target = event.srcElement || event.target;

	// pseudo-code
	if( target.style.color === 'yellow' &&
	   getSoundMade( target ) === 'quack' ) {

		// this is definitely a duck
		giveDuckAdvilForThePain();

	}
}
			

Questions?