Javascript development done right

JAVASCRIPT DEVELOPMENT DONE RIGHT
CONFITURA 2014
Created by
Paweł Szulc
/ /
http://rabbitonweb.com @paulszulc paul.szulc@gmail.com
var microphone = {
testing: function(oneTwoThree) {
console.log("testing, testing " + oneTwoThree);
}
}

PEACEFUL JAVA
Understandable object oriented language
Vast and rich ecosystem of frameworks, tools and
technologies
Static code analysis, well-known conventions and best
practices
Testable, clean and readable code

JAVASCRIPT
Strange, bizarre and non deterministic language
Coding like its 1996 all over again
Not a single unit test, no static code analysis

$ GIT CLONE GIT://GITHUB.COM/YOU/YOUR-PROJECT.
GIT

“JAVASCRIPT IS
TO JAVA AS
HAMBURGER IS
TO HAM.”

KEY DIFFERENCES
Language nature: object vs functional
Different concepts (e.g function vs method, scope definitions)
Different set of operators and key words (===, undefined)
Different nature of operators and key words (e.g this)

IMPORTANT
“TO USE THE LANGUAGE
PROPERLY, UNDERLYING
CONCEPTS UNDERSTAND YOU
MUST”

FUNCTIONS ARE FIRST CLASS CITIZENS
They can be assigned to variables, arrays and properties of
other objects
They can be passed as arguments to functions
They can be returned as values from functions
The only difference between a function and an object, is that
functions can be invoked

EXAMPLES
function () {
}
// ?
function problemSolver() {
}
problemSolver();
problemSolver("I have a problem, please do solve it");
function problemSolver(problem, hint) {
}
problemSolver(problem, hint);
problemSolver(problem);
problemSolver();
problemSolver(problem, hint, "some other parameter out of nowhere");
function problemSolver(problem, hint) {
return 42;
}

THIS
THE THIS PARAMETER REFERS TO AN OBJECT
THAT’S IMPLICITLY ASSOCIATED WITH THE
FUNCTION INVOCATION.

IF IT QUACKS LIKE A DUCK, IT MUST BE A ...
var duck = {};
duck.name = "Donald Duck";
var dog = {};
dog.name = "Pluto";
duck.say = function() {
console.log("Quack quack, call me " + this.name);
} dog.say = function() {
console.log("Bark bark, call me " + this.name);
}
duck.say();
dog.say();
Quack quack, call me Donald Duck
Bark bark, call me Pluto
duck.say.call(dog);
Quack quack, call me Pluto

WHAT THE QUACK?
}
duck.say.call(dog);

FUNCTION INVOCATION
THERE ARE FOUR DIFFERENT WAYS FOR
FUNCTION TO BE INVOKED
1. as function
2. as method
3. as constructor
4. by apply() or call()

AS FUNCTION
function timestamp() {
this.stamp = new Date();
};
timestamp();
console.log(window.stamp)
Fri Apr 11 2014 01:56:07 GMT+0200 (Central European Daylight Time)

AS METHOD
var problemSolver = {};
problemSolver.timestamp = function() {
this.stamp = new Date();
};
problemSolver.timestamp();
console.log(problemSolver.stamp)
Fri Apr 11 2014 01:56:07 GMT+0200 (Central European Daylight Time)

AS CONSTRUCTOR
function person(name) {
this.name = name;
return this;
};
var p1 = new person('Captain Bomba');
console.log(p1.name)
Captain Bomba

BY APPLY() OR CALL()
var duck = {};
duck.name = "Donald Duck";
var dog = {};
dog.name = "Pluto";
}
duck.say.call(dog);

IN MOST C-LIKE LANGUAGES BLOCK CREATES
A SCOPE
// java
if(true) {
Engine engine = new Engine();
} engine.start(); // compilation error

IN JAVASCRIPT FUNCTION CREATES A SCOPE
function pkp(where) {
if(where === 'Szczecin') {
var announcment = 'Sorry, taki mamy klimat';
}
return announcment; // ok, in scope
} assert(announcment === undefined); // out of scope

JAVASCRIPT KILLER
var a = 1;
function b() {
a = 10;
return;
function a() {}
} b();
console.log(a); // ?

HOISTING
FUNCTION DECLARATIONS AND VARIABLE DECLARATIONS ARE
ALWAYS MOVED (“HOISTED”) INVISIBLY TO THE TOP OF THEIR
CONTAINING SCOPE BY THE JAVASCRIPT INTERPRETER.
function foo() {
bar();
var x = 1;
function bar() { }
}
function foo() {
function bar() { }
var x;
bar();
x = 1;
}

HOISTING
function foo() {
bar(); // exception!
var bar = function() {}
}
function foo() {
var bar;
bar();
bar = function() { }
}

CLOSURES
function outer() {
var name = "Bob";
function inner() {
return "Somewhere out there, there's a guy called " + name;
}
console.log(inner());
}
outer();
Somewhere out there, there's a guy called Bob

CLOSURES
function outer() {
var name = "Bob";
function inner() {
return "Somewhere out there, there's a guy called " + name;
}
return inner;
}
var ref = outer();
console.log(ref());
Somewhere out there, there's a guy called Bob

OBJECTS
Everything is an object (even function)
No such thing as class
Everything is a map

OBJECTS
var person = {};
var person = {};
person.name = "John";
person.eat = function(food) { ... };
var person = {};
person["name"] = "John";
person["eat"] = function(food) { ... };
var person = {
name: "John",
eat: function(food) { ... };
};

THERE IS NO SUCH THING
AS 'PRIVATE'

MODULES
CLOSURE TO THE RESCUE!
var JDBC = (function() {
function connection() { ... }
function runSQL(sql) {
var c = connection();
c.execute(sql);
}
return {
runSQL: runSQL
};
})();

TOOLS
Testing: Jasmine, Mocha, much much more...
Static code analysis: JSLint
Dependency injection: require.js

THE END
BY PAWEŁ SZULC / RABBITONWEB.COM
email: paul.szulc@gmailcom / twitter: @paulszulc

Javascript development done right

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Javascript development done right (20)

More from Pawel Szulc (20)

Recently uploaded (20)

Javascript development done right