5 tips for better javascript

57
5 Tips For Better @toddanglin NEW talk

Upload: todd-anglin

Post on 08-Sep-2014

82 views

Category:

Technology


3 download

DESCRIPTION

Love it or hate it, JavaScript is playing an increasingly important role in the next generation of web and mobile apps. As code continues to move from the server to the client, JavaScript is being used to do more than simple HTML manipulation. Be prepared for this transition and make sure the JavaScript you write is optimized and ready to perform on desktops and devices! In this session, you will learn ten practical tips that you can use today to write faster, more maintainable, memory friendly JavaScript.

TRANSCRIPT

Page 1: 5 Tips for Better JavaScript

5 TipsFor Better

@toddanglin

NEWtal

k

Page 2: 5 Tips for Better JavaScript

JAVASCRIPT!

Page 3: 5 Tips for Better JavaScript

<TODO: HAPPY PLACE IMAGE>

JAVASCRIPT.

Page 4: 5 Tips for Better JavaScript

@toddanglinBrought to you by @KendoUI

Page 5: 5 Tips for Better JavaScript

Why JavaScript?

WHY?!

Page 6: 5 Tips for Better JavaScript

It’s the first?

Page 7: 5 Tips for Better JavaScript

It’s the best?

Page 8: 5 Tips for Better JavaScript

It’s the easiest?

Page 9: 5 Tips for Better JavaScript

It’s the fastest?

Page 10: 5 Tips for Better JavaScript

It’s everywhere.

Page 11: 5 Tips for Better JavaScript

JavaScript.

I am your father.

No, really.Brendan Eich.Netscape.

Page 12: 5 Tips for Better JavaScript

“JS had to 'look like Java' only less so, be

Java’s dumb kid brother or boy-

hostage sidekick. Plus, I had to be done in ten

days or something worse than JS would

have happened”

Page 13: 5 Tips for Better JavaScript

::::

Page 14: 5 Tips for Better JavaScript

Sept 1995Netscape

Aug 1996Microsoft

June 1997ECMAScript

//

Mar 1999XHR

Feb 2005Ajax

Aug 2001IE6

FirefoxSafari

ChromeMobile

Page 15: 5 Tips for Better JavaScript

JavaScript won by default.

If you're the last man left on earth, it doesn't matter how

ugly you are when the women come to re-populate the

planet.Scott Koon

Page 16: 5 Tips for Better JavaScript

Can’t Beat ‘em,Join ‘em.

Page 17: 5 Tips for Better JavaScript

Modern JavaScriptFaster. Easier. Better.

Page 18: 5 Tips for Better JavaScript
Page 19: 5 Tips for Better JavaScript
Page 20: 5 Tips for Better JavaScript

Attwood’s Law:Any application that can be

written in JavaScript, will eventually be written in

JavaScript2007

Page 21: 5 Tips for Better JavaScript

MOST COMMON PROBLEMS

Page 22: 5 Tips for Better JavaScript

1.Slow Execution2.Memory leaks3.Poor Code

Organization4.Lack of Understanding

Page 23: 5 Tips for Better JavaScript

5(ISH) TIPS

Page 24: 5 Tips for Better JavaScript

From real masters:JordanIvan

TsvetomirAtanasBurkeJohn

Brandon

Page 25: 5 Tips for Better JavaScript

TIP #1jQuery is a friend…

…that will stab you in the back.

Prove It

Page 26: 5 Tips for Better JavaScript

SUB-TIP

1.1CACHE OBJECTS

$("#myDiv").css("color","red");$("#myDiv").css("opacity",1);

BAD

$("#myDiv").css("color","red")

.css("opacity",1);

BETTER

var $myDiv = $("#myDiv");$myDiv.css("color","red");$myDiv.css("opacity",1);

BEST*

Prove It

Page 27: 5 Tips for Better JavaScript

SUB-TIP

1.2NATIVE LOOPS

$.each(arr, function (i) {i / 2;});BAD

arr.forEach(function (i) {i / 2;});BETTER

var i = 0, len = arr.length;for (i = 0; i < len; i += 1) {

i / 2;}

BEST*

Prove It

Page 28: 5 Tips for Better JavaScript

TIP #2Avoid Global Variables

They're slow & rude.

Page 29: 5 Tips for Better JavaScript

function add(num1, num2){ return num1 + num2;}

var result = add(5, 10);16:23

Prove It

Page 30: 5 Tips for Better JavaScript

var name = "Todd";function sayHello(){

alert(name);}

function sayHello(){ var name = "Todd";

alert(name);}

16:23

BAD

BETTER

Page 31: 5 Tips for Better JavaScript

Closures & Module Pattern

Page 32: 5 Tips for Better JavaScript

var app = (function(){ var _name = "Todd";

return{ sayHello: function(){

alert(_name); }

}}());

app.sayHello();

16:23

BEST(ISH)

Page 33: 5 Tips for Better JavaScript

SUB-TIP

2.1SUPER PATTERN

(function(window,$,c){ var _private = "Todd";

function privateClass(){}

function myWidget(){} myWidget.prototype.doSomething = function(){}

window.myWidget = myWidget;}(window,jQuery,console);

Self-Executing Anonymous Functions + Global Imports + Prototype

Prove It

Page 34: 5 Tips for Better JavaScript

TIP #3Bind to Events & Pub/Sub

Just listen.

Page 35: 5 Tips for Better JavaScript

<button id="btn" onclick="sayHello();">Click Me</button>

$(function(){$(“#btn").on("click",sayHello);

});

16:23

BAD

BETTER

Page 36: 5 Tips for Better JavaScript

$(document).on("click","button",

sayHello);

16:23

BEST

Why?

Page 37: 5 Tips for Better JavaScript

SUB-TIP

3.1UNBINDING EVENTS

$(document).off("click","button");

$(document).remove("button");

OR

Page 38: 5 Tips for Better JavaScript

function doSomthing{...doSomethingElse();

doOneMoreThing();}

16:23

BAD

Page 39: 5 Tips for Better JavaScript

function doSomething{...$.trigger("DO_SOMETHING_DONE");

}

$(document).on("DO_SOMETHING_DONE", function(){

doSomethingElse();});

16:23

BETTER

Page 40: 5 Tips for Better JavaScript

function doSomething(){var dfd = new $.Deferred();

//Do something async, then...//dfd.resolve();

return dfd.promise();}

function doSomethingElse(){$.when(doSomething()).then(//The

next thing);}

16:23

ALSO BETTER

Page 41: 5 Tips for Better JavaScript

TIP #4Don't fondle the DOM.

Go with the flow.

Page 42: 5 Tips for Better JavaScript

My Awesome Page

Copyright Fo'eva

Lorem ipsumy samplish jibber jabbish text only meant to serve as a placeholder, and much like Pi, should never repeat or be read much beyond the first few characters.

Page 43: 5 Tips for Better JavaScript

function doSomething{...var $list = $("body").append("<ul>");for(var i = 0; i < 10; i++){

$list.append("<li>"+ i +"</li>") }}

16:23

BAD

Page 44: 5 Tips for Better JavaScript

function doSomething{...var $domChunk = $("<ul>");for(var i = 0; i < 10; i += 1){

$domChunk.append("<li>"+ i +"</li>"); }

$("body").append($domChunk);}

16:23

BETTER

Page 45: 5 Tips for Better JavaScript

SUB-TIP

4.1DOM SPEED WITH

STRINGS & INNERHTMLfunction doSomething{

...var domString = "<ul>";for(var i = 0; i < 10; i += 1){

domString += "<li>"+ i +"</li>"; }

domString += "</ul>"$("body")[0].innerHTML = domString;

} Prove It

Page 46: 5 Tips for Better JavaScript

<script type="text/x-kendo-template" id="tmp">

<ul> #for(var i = 0; i < data.length; i

+= 1){# <li>#= data[i] #</li>

#}#</ul>

</script>

function doSomething(){var myData = [1,..,10];var template = kendo.template($

("#tmp").html());$("body").append(template(myData));

}16:23

BEST

Prove It

Page 47: 5 Tips for Better JavaScript

TIP #5Learn a module pattern.

And use it.

Page 48: 5 Tips for Better JavaScript

PERFORMANCE CONVENIENCE

Page 49: 5 Tips for Better JavaScript

A.js

B.js

Manual (index.html)<script src="B.js"></script><script src="A.js"></script><script src="main.js"></script>

Module Loader (main.js)require(["A","B"], function(){

//Dependencies are loaded});

Page 50: 5 Tips for Better JavaScript

USE JSLINTGuaranteed to Hurt Your Feelings™

16:23

BONUS

TIPS

MINIFY YOUR JSWords are for humans.

MASTER BROWSER DEV TOOLS

Debug JavaScript where it runs.

Page 51: 5 Tips for Better JavaScript

Debugging

Page 52: 5 Tips for Better JavaScript

console.log()

Page 53: 5 Tips for Better JavaScript

Fix IE<script type="text/javascript">

<!--Console global variable fix for IE-->

if (!this.console) { window.console = {

log: function() {} };}

</script>

16:23

Page 54: 5 Tips for Better JavaScript

Resources for Study• Books– JavaScript: The Good Parts (Crockford)– JavaScript: The Definitive Guide

(Flanagan)– JavaScript Patterns (Stefanov)– High Performance JavaScript (Zakas)

16:23

Page 55: 5 Tips for Better JavaScript

console.clear();

Page 56: 5 Tips for Better JavaScript

JAVASCRIPT, mon.

Page 57: 5 Tips for Better JavaScript

A&Q

[email protected] | @toddanglinwww.KendoUI.com