+ Follow

5 Tips for Better JavaScript

by Todd Anglin on Aug 29, 2012

57,240 views

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.

Accessibility

View text version

Upload Details

Uploaded via SlideShare as Microsoft PowerPoint

Usage Rights

File a copyright complaint

31 Embeds 1,624

http://www.cs.uoregon.edu	982
https://twitter.com	128
http://cit-web-dev.blogspot.com	124
http://clusterexample.tf.etondigital.com	110
http://www.scoop.it	54
http://blogdefegb.blogspot.com	54
http://localhost	42
http://www.mobileigniter.com	24
http://nicolechung.github.com	19
http://muziekstudioapeldoorn.nl	16
https://si0.twimg.com	15
http://www.ayhankuru.com	12
http://emcblog.nl	9
http://twitter.com	5
http://class2go.auca.kg	5
http://blogdefegb.blogspot.com.es	3
http://mobileigniter.com	2
http://beta.jolicloud.co	2
http://jolidev10-jolicloud.dotcloud.com	2
http://trunk.devenvbkgrl	2
https://twimg0-a.akamaihd.net	2
https://it.twitter.com	2
http://pinterest.com	2
http://www.twylah.com	1
http://nicolechung.github.io	1
http://www.linkedin.com	1
http://www.zendistro.com	1
http://cit-web-dev.blogspot.ru	1
http://www.acumensofttech.com	1
http://b.hatena.ne.jp	1
http://bottlenose.com	1

More...

Statistics

Likes: 81
Downloads: 287
Comments: 10
Embed Views: 1,624
Views on SlideShare: 55,616
Total Views: 57,240

5 Tips for Better JavaScript Presentation Transcript

5 TipsFor Better @toddanglin

<TODO: HAPPY PLACE IMAGE>

@toddanglin Brought to you by @KendoUI

WhyJavaScript?WHY?!

It‟s the first?

It‟s the best?

It‟s the easiest?

It‟s the fastest?

It‟s everywhere.

No, really.Brendan Eich.Netscape.

“JS had to look like Java only less so, be Java‟sdumb kid brother or boy- hostage sidekick. Plus, I had to be done in tendays or something worse than JS would have happened”

::::

Aug 1996 Microsoft Mar 1999 Firefox XHR Safari Chrome Mobile //Sept 1995Netscape Aug 2001 IE6 June 1997 ECMAScript Feb 2005 Ajax

JavaScript won by default. If youre the last man left on earth, it doesnt matter how uglyyou are when the women come to re-populate the planet. Scott Koon

Can‟t Beat „em,Join „em.

Modern JavaScript Faster. Easier. Better.

Attwood‟s Law:Any application that can be written in JavaScript, will eventually be written in JavaScript 2007

MOST COMMON PROBLEMS

1. Slow Execution2. Memory leaks3. Poor Code Organization4. Lack of Understanding

5(ISH) TIPS

From realmasters: Jordan IvanTsvetomir Atanas Burke John Brandon

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

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

NATIVE LOOPS BAD$.each(arr, function (i) {i / 2;}); BETTERarr.forEach(function (i) {i / 2;}); BEST*var i = 0, len = arr.length;for (i = 0; i < len; i += 1) { i / 2;} Prove It

TIP #2Avoid Global Variables Theyre slow & rude.

function add(num1, num2){ return num1 + num2; } var result = add(5, 10); Prove It16:39

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

Closures & Module Pattern

BEST(ISH) var app = (function(){ var _name = "Todd"; return{ sayHello: function(){ alert(_name); } } }()); app.sayHello();16:39

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 #3Bind to Events & Pub/Sub Just listen.

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

BEST $(document).on("click", "button", sayHello); Why?16:39

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

BAD function doSomthing{ ... doSomethingElse(); doOneMoreThing(); }16:39

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

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); }16:39

TIP #4Dont 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 Foeva

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

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

DOM 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

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)); }16:39 Prove It

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

PERFORMANCE CONVENIENCE

Manual (index.html)A.js <script src="B.js"></script> <script src="A.js"></script> <script src="main.js"></script> Module Loader (main.js)B.js require(["A","B"], function(){ //Dependencies are loaded });

USE JSLINT Guaranteed to Hurt Your Feelings™ MINIFY YOUR JS Words are for humans. MASTER BROWSER DEV TOOLS Debug JavaScript where it runs.16:39

Debugging

console.log()

Fix IE <script type="text/javascript">  if (!this.console) { window.console = { log: function() {} }; } </script>16:39

Resources for Study• Books – JavaScript: The Good Parts (Crockford) – JavaScript: The Definitive Guide (Flanagan) – JavaScript Patterns (Stefanov) – High Performance JavaScript (Zakas)16:39

console.clear();

A&Qanglin@telerik.com | @toddanglin www.KendoUI.com

Šime Vidas, JavaScript programmer @toddanglin1 No problem. I enjoyed writing the comment :) 8 months ago

Are you sure you want to

Todd Anglin, VP Html5 Web & Mobile Tools at Telerik @Šime- First, I'm glad you spent a long time studying these slides! Your feedback is probably better for a blog than a comment, but I will say that some of the things you highlight are discussed in the actual 'live' session (what these slides were developed for). There are in fact intentional errors in the code that get discussed in the context of JSLint. :) Either way, thanks for reviewing the deck and for taking time to share feedback. 8 months ago

Šime Vidas, JavaScript programmer ★★★ SLIDE 26 ★★★ The 'best' solution can be further improved. Instead of invoking the css() method two times in a row (to set two CSS properties), you can just invoke it once and pass an object literal: $myDiv.css({ color: 'red', opacity: 1 }); ★★★ SLIDE 27 ★★★ I don't agree with this slide. The Array iteration methods should be used instead of the for loop when possible. They perform slightly worse (as expected), but they are higher-level, which makes the code more readable. So, .forEach() is a better solution than the for loop. ★★★ SLIDE 28 ★★★ 'They're slow and rude.' No, you're missing the point. Performance is not the reason why the use of global variables should be minimized. The actual reason are name collisions. The global namespace in browsers contains hundreds of built-in names (e.g. window, top, location, setTimeout). If a JavaScript program creates additional global variables, that can lead to name collisions, which can cause either the program or the browser's built-in API to behave unexpectedly. ★★★ SLIDE 30 ★★★ If those examples are global code, than neither example is good (since the use of global functions should be minimized). If those examples are not global code, then which solution is better really depends on what the scope of the 'name' variable should be. If only one function needs this value, it can be declared as a local variable. However, if multiple functions need access to that value, then it makes sense to declare it in an outer scope. So, the 'BAD' example doesn't have to be bad at all. It just depends on the context. ★★★ SLIDE 36 ★★★ Delegating all the way back to the document? Why? It should be enough to delegate to the root element of the web-app or module. Those last few jumps (... -> body -> html -> document) don't provide additional value (at least not for a button click). ★★★ TYPOS ★★★ Slide 33 - a right paren is missing on the last line. Slides 38, 39, 43-45 - the function is missing its header parens Also, you are missing semi-colons on a bunch of lines. ASI takes care of that, but your code is inconsistent. 8 months ago

Todd Anglin, VP HTML5 Web & Mobile Tools at Telerik @dsfernandes Unfortunately, no. At least, not yet. First iteration was not recorded, but I'll definitely be presenting it again in the future. I'll try to get one of the conference recordings on YouTube. Or maybe I should just do a webcast for all? 8 months ago

dsfernandes Is the actual talk available somewhere? I really liked the slides, but it would be best if I could also listen to the speaker :) 8 months ago

Anil Kumar Krishnashetty, Front End Web Developer at SAP @David: Accessing DOM every time is expensive , that's why we prefer to cache. 8 months ago

Todd Anglin, VP HTML5 Web & Mobile Tools at Telerik @Tamás- True, I do use a lot of jQuery for the examples, primarily because it's the most popular JavaScript library. You'll also note, though, that part of the presentation calls-out some of the performance weaknesses associated with jQuery. In general, though, the tips do not depend on jQuery (and in some cases actually recommend away from jQuery). Hope that helps. 8 months ago

Tamás Kővári, Senior Programozó at Docler you're talking about javascript, but only jQuery I can see. 8 months ago

Todd Anglin, VP Html5 Web & Mobile Tools at Telerik @David- In this case, 'best' is marked as such because in 'real world code' it's often better to just cache your selector up-front to avoid the temptation to do multiple DOM queries. Perf wise, they should be very similar. 8 months ago

davidcorbacho Great slides Todd! In the slide 26, I don't see any difference respect 'Better' and 'Best' Blue and Violet colors in the chart: http://jsperf.com/caching-jquery-objects-perf 8 months ago