JavaScript - Make the right choices

JavaScriptmake the right choices

Damian Wielgosik

about me ;-)

ferrante.pl varjs.comhttp://twitter.com/varjs

1. Begin with ECMAScript

ECMAScript

sometimes it’s difficult...

... to speak in a human language

... znaleźć ludzki język Dmitry Soshnikovyour personal ECMAScript teacher

Participate in the future!

Harmony -the next ECMAScript standard

they need your feedback! mail-archive.com/es-discuss@mozilla.org/info.html

mail-archive.com/es-discuss@mozilla.org/info.html

where is your name? mail-archive.com/es-discuss@mozilla.org/info.html

2. Know your tools

Yes, we all know Firebug and Web Inspector

Hurt your feelings with jslint.com

Aardwolf - mobile debugging made easyYes, we all know Firebug and Web Inspector

Memory stats?

WebKit InspectorMemory?

Memory leaks?

Memory leak checker

sIEeve Performance?home.orange.nl/jsrosman/

Memory leaks?people.mozilla.com/~dbaron/leak-screencasts/

Performance?

var start = +new Date();for (var i = 0; i < 100000; i++);console.log("Result is: ", +new Date() - start);

Better?

console.time("My test");for (var i = 0; i < 100000; i++);console.timeEnd("My test");

Still better?

console.profile("My test");runApp();console.profileEnd("My test");

The best?

jsperf.com jsperf.com

jsperf measures operations per second!

Get rid of jQuery if it’s not neccessary - there is http://microjs.com

Hunt on new stuff!

http://js.gd might be a good start!

3. Tips and tricks

it has to be said...

do not optimize prematurely!

JavaScript !== Java do not optimize prematurely!flickr.com/photos/paulmartincampbell/3583176306/sizes/o/in/photostream/

var obj = {}; // not new Object()var arr = []; // not new Array();

forget about your old habits!

do not port bad solutions to JavaScript!(aka I don’t need yet another class system in JS)

otherwise they’re gonna find you! ;-)http://www.fotofaza.pl/podglad_zdjecia,15,ludzie,chuligani.html

4. Real tips and tricks

function calls cost time!

use JS asynchronously when needed

more interesting results

var fn = function() { console.log("a"); fn();};fn();

stack overflow?

let’s write own scheduler

var scheduler;(function() { var events = []; scheduler = { add : function(fn, delay) { for (var i = 0, ilen = events.length; i < ilen; i++) { if (events[i].fn === fn) { throw new Error("The event exists in the main event loop"); } } events.push({ fn : fn, delay: delay }); }, run: function() { for (var i = 0, ilen = events.length; i < ilen; i++) { (function(callback, delay) { var fn = function() { callback(); window.setTimeout(fn, delay); }; window.setTimeout(fn, delay); })(events[i].fn, events[i].delay); } } };})();scheduler.add(function() { console.log("A"); }, 500); // it will call a functionevery 500msscheduler.add(function() { console.log("B"); }, 1000); // like above with 1000msdelayscheduler.run();

one loop to handle similar events

var eventLoop;(function() { var events = {}; eventLoop = { add : function(fn, delay) { if (!(delay in events)) { events[delay] = []; } else { for (var i = 0, ilen = events[delay].length; i < ilen; i++) { if (events[delay][i].fn === fn) { throw new Error("The event exists in the main event loop"); } } } events[delay].push(fn); }, run: function() { for (var delay in events) { (function(stack, delay) { var fn = function() { for (var i = 0, ilen = stack.length; i < ilen; i++) { stack[i](); } window.setTimeout(fn, delay); }; window.setTimeout(fn, delay); })(events[delay], delay); } } };})();eventLoop.add(function() { console.log("A"); }, 500);eventLoop.add(function() { console.log("B"); }, 500);eventLoop.run();

var eventLoop;(function() { we don’t want to end up with big array indexes - var events = {}; we use the object instead of array eventLoop = { add : function(fn, delay) { if (!(delay in events)) { we have never added events for this delay so let’s events[delay] = []; make an array to store them } else { for (var i = 0, ilen = events[delay].length; i < ilen; i++) { if (events[delay][i].fn === fn) { throw new Error("The event exists in the main event loop"); } } } events[delay].push(fn); let’s store a single event by that }, run: function() { for (var delay in events) { (function(stack, delay) { var fn = function() { for (var i = 0, ilen = stack.length; i < ilen; i++) { stack[i](); } window.setTimeout(fn, delay); }; window.setTimeout(fn, delay); })(events[delay], delay); } } };})();eventLoop.add(function() { console.log("A"); }, 500);eventLoop.add(function() { console.log("B"); }, 500);eventLoop.run();

yep, you have to implement stop() method

Timers can be useful with AJAX requests

parseInt(„09”) === 0

JS thinks „09” is an octal number because it starts with 0

parseInt(„09”, 10) === 9

However,parseFloat(„09”) === 9

document.querySelectorAll("div") returns a NodeList not an array

var nodes = document.querySelectorAll("div");nodes = [].slice.apply(nodes);

However:„Whether the slice function can be applied successfully to a host object is implementation-dependent.” - ECMAScript

Speaking of which,how to check if it’s an array?

var arr = [];arr instanceof Array;

Really?

var Array = function() {};var arr = [];arr instanceof Array; // FALSE!

var arr = [];if ("length" in arr) { // we deal with an array}

Really?

var arr = { "length": 2 };if ("length" in arr) { // we deal with an array... wait a moment!}

var arr = [];if (Object.prototype.toString.call(arr) === "[object Array]") { // Houston, we have an array}

Ok, but well, you can still modify a toString fn...

Object.prototype.toString = function() { return "";};

Here we go... ECMAScript 5!

var arr = [];if (Array.isArray(arr)) { // w00t!}

Hey, I can still replace it with my own stuff!

Array.isArray = function() { return false;}

Cache the most important functions at the very beginning!

(function() { var isArray = Array.isArray;})();

Or.. if you can, use ECMAScript 5 again

Object.defineProperty(Array, "isArray", { writable: false, configurable: false, enumerable: false, value: Array.isArray}); // thx to @marcoos

Hey, what is that ECMAScript 5 actually?

Hey, what is that ECMAScript actually?

Hey, we’re on mobile, do you have something for us?

yes, I can! Oh, I do.

Use window.scrollTo(0, 1) to get rid of the browser address bar on iOS!

/mobile/i.test(navigator.userAgent) && !location.hash && setTimeout (function () { if (!pageYOffset) window.scrollTo(0, 1); }, 1000); thanks to amazing work by Remy Sharphttp://remysharp.com/2010/08/05/doing-it-right-skipping- the-iphone-url-bar/

Visit JSNews on Facebook for more awesomeness http://tinyurl.com/jsnewspl

or attend Front-Trends 2012 conference http://front-trends.com http://lanyrd.com/2012/ft2012/

but first of all, be smart and listen to smart people - there is a lot on the web

Thanks! Slides at:http://varjs.com/make-right-choices

http://ferrante.pl	3723
http://a0.twimg.com	19
http://feeds2.feedburner.com	8
http://feeds.feedburner.com	5
http://us-w1.rockmelt.com	3
http://us-w1.rockmelt.com	3
http://www.yatedo.fr	1

JavaScript - Make the right choices

by Functionite on Sep 29, 2011

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 3,762

Statistics

JavaScript - Make the right choices Presentation Transcript