W

E al k
Nt
5 Tips
For Better

@toddanglin

JAVASCRIPT!

<TODO: HAPPY PLACE IMAGE>

JAVASCRIPT.

@toddanglin
Brought to you by @KendoUI

Why
JavaScript?
WHY?!

Its the first?

Its the best?

Its the easiest?

Its the fastest?

Its everywhere.

JavaScript.
No, really.
Brendan Eich.
Netscape.

I am your father.

JS had to 'look like

Java' only less so, be
Javas dumb kid
brother or boy-hostage
sidekick. Plus, I had to
be done in ten days or
something worse than
JS would have
happened

::
:

Aug 1996
Microsoft

Mar 1999
XHR

Firefox
Safari
Chrome
Mobile

//

Sept 1995
Netscape

Aug 2001
IE6
June 1997
ECMAScript
Feb 2005
Ajax

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

Cant Beat em,

Join em.

Modern JavaScript
Faster. Easier. Better.

Attwoods Law:

Any application that can be

written in JavaScript, will
eventually be written in
JavaScript
2007

MOST COMMON
PROBLEMS

1.Slow Execution
2.Memory leaks
3.Poor Code
Organization
4.Lack of Understanding

5(ISH) TIPS

From real
masters:
Jordan
Ivan
Tsvetomir
Atanas
Burke
John
Brandon

TIP #1
jQuery is a friend
that will stab you in the back.

Prove It

P
I
T
B 1
U
S 1.

CACHE OBJECTS
BAD

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

Prove It

P
I
T
B 2
U
S 1.

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

BETTER
arr.forEach(function (i) {i / 2;});
BEST*
var i = 0, len = arr.length;
for (i = 0; i < len; i += 1) {
i / 2;
}
Prove It

TIP #2
Avoid Global Variables
They're slow & rude.

function
function add(num1,
add(num1, num2){
num2){
return
return num1
num1 ++ num2;
num2;
}}
var
var result
result == add(5,
add(5, 10);
10);
01:56:40 PM

Prove It

BAD
var name = "Todd";
function sayHello(){
alert(name);
}
BETTER
function sayHello(){
var name = "Todd";
alert(name);
}

01:56:40 PM

Closures & Module Pattern

BEST(ISH)
var app = (function(){
var _name = "Todd";
return{
sayHello: function(){
alert(_name);
}
}
}());
app.sayHello();
01:56:40 PM

P
I
T
B 1
U
S 2.

SUPER PATTERN
Self-Executing Anonymous Functions + Global
Imports + Prototype

(function(window,$,c){
var _private = "Todd";
function privateClass(){}
function myWidget(){}
myWidget.prototype.doSomething =
function(){}
window.myWidget = myWidget;
}(window,jQuery,console);

Prove It

TIP #3
Bind to Events & Pub/Sub
Just listen.

BAD
<button id="btn"
onclick="sayHello();">
Click Me
</button>
BETTER
$(function(){
$(#btn").on("click",sayHello);
});

01:56:40 PM

BEST
$(document).on("click",
"button", sayHello);

Why?

01:56:40 PM

P
I
T
B 1
U
S 3.

UNBINDING EVENTS

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

BAD
function doSomthing{
...
doSomethingElse();
doOneMoreThing();
}

01:56:40 PM

BETTER
function doSomething{
...
$.trigger("DO_SOMETHING_DONE");
}
$(document).on("DO_SOMETHING_DONE",
function(){
doSomethingElse();
});

01:56:40 PM

ALSO BETTER
function doSomething(){
var dfd = new $.Deferred();
//Do something async, then...
//dfd.resolve();
return dfd.promise();
}
function doSomethingElse(){
$.when(doSomething()).then(//The
next thing);
}
01:56:40 PM

TIP #4
Don't fondle the DOM.
Go with the flow.

My Awesome Page
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.

Copyright Fo'eva

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

01:56:40 PM

BETTER
function doSomething{
...
var $domChunk = $("<ul>");
for(var i = 0; i < 10; i += 1){
$domChunk.append("<li>"+ i +"</li>");
}
$("body").append($domChunk);
}

01:56:40 PM

P
I
T
B 1
U
S 4.

DOM SPEED WITH

STRINGS & INNERHTML

function doSomething{
...
var domString = "<ul>";
for(var i = 0; i < 10; i += 1){
domString += "<li>"+ i +"</li>";
}
domString += "</ul>"
$("body")[0].innerHTML = domString;
}

Prove It

BEST
<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));
Prove It
01:56:40 PM
}

TIP #5
Learn a module pattern.
And use it.

PERFORMANCE

CONVENIENCE

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
});

S
U
N S
O
B TIP

USE JSLINT
Guaranteed to Hurt Your Feelings

MINIFY YOUR JS
Words are for humans.

MASTER BROWSER DEV

TOOLS
Debug JavaScript where it runs.
01:56:40 PM

Debugging

console.log()

Fix IE
<script type="text/javascript">
<!--Console global variable fix for IE->
if (!this.console) {
window.console = {
log: function() {}
};
}
</script>

01:56:40 PM

Resources for Study

Books
JavaScript: The Good Parts (Crockford)
JavaScript: The Definitive Guide
(Flanagan)
JavaScript Patterns (Stefanov)
High Performance JavaScript (Zakas)

01:56:40 PM

console.clear();

JAVASCRIPT, mon.

A&Q
anglin@telerik.com | @toddanglin
www.KendoUI.com