JAVASCRIPT DEVELOPMENT DONE RIGHTCONFITURA 2014

Created by / /

Paweł Szulchttp://rabbitonweb.com @paulszulc paul.szulc@gmail.com

var microphone = { testing: function(oneTwoThree) { console.log("testing, testing " + oneTwoThree); }}

PEACEFUL JAVAUnderstandable object oriented languageVast and rich ecosystem of frameworks, tools andtechnologiesStatic code analysis, well-known conventions and bestpracticesTestable, clean and readable code

MORDOR SCRIPT

JAVASCRIPTStrange, bizarre and non deterministic languageCoding like its 1996 all over againNot a single unit test, no static code analysis

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

JAVA VS JAVASCRIPT

“JAVASCRIPT ISTO JAVA AS

HAMBURGER ISTO HAM.”

KEY DIFFERENCESLanguage nature: object vs functionalDifferent 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 LANGUAGEPROPERLY, UNDERLYING

CONCEPTS UNDERSTAND YOUMUST”

FUNCTIONS

FUNCTIONS ARE FIRST CLASS CITIZENSThey can be assigned to variables, arrays and properties ofother objectsThey can be passed as arguments to functionsThey can be returned as values from functionsThe only difference between a function and an object, is thatfunctions can be invoked

EXAMPLESfunction () { }

// ?

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

THISTHE THIS PARAMETER REFERS TO AN OBJECTTHAT’S IMPLICITLY ASSOCIATED WITH THE

FUNCTION INVOCATION.

THIS = CONTEXT

THIS = CONTEXT

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 DuckBark bark, call me Pluto

duck.say.call(dog);

Quack quack, call me Pluto

WHAT THE QUACK?duck.say = function() { console.log("Quack quack, call me " + this.name); }dog.say = function() { console.log("Bark bark, call me " + this.name); }

duck.say.call(dog);

Quack quack, call me Pluto

FUNCTION INVOCATIONTHERE ARE FOUR DIFFERENT WAYS FOR

FUNCTION TO BE INVOKED1. as function2. as method3. as constructor4. by apply() or call()

AS FUNCTIONfunction timestamp() { this.stamp = new Date();};

timestamp();

console.log(window.stamp)

Fri Apr 11 2014 01:56:07 GMT+0200 (Central European Daylight Time)

AS METHODvar 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 CONSTRUCTORfunction 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 = function() { console.log("Quack quack, call me " + this.name); }dog.say = function() { console.log("Bark bark, call me " + this.name); }

duck.say.call(dog);

Quack quack, call me Pluto

SCOPE EXTRAVAGANZA

IN MOST C-LIKE LANGUAGES BLOCK CREATESA SCOPE

// javaif(true) {Engine engine = new Engine();}engine.start(); // compilation error

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

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

HOISTINGFUNCTION DECLARATIONS AND VARIABLE DECLARATIONS AREALWAYS 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;}

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

function foo() { var bar; bar(); bar = function() { }}

CLOSURESfunction 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

CLOSURESfunction 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

OBJECTSEverything is an object (even function)No such thing as classEverything is a map

OBJECTSvar 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) { ... };};

MODULES

THERE IS NO SUCH THINGAS 'PRIVATE'

MODULESCLOSURE TO THE RESCUE!

var JDBC = (function() {

function connection() { ... }

function runSQL(sql) { var c = connection(); c.execute(sql); } return { runSQL: runSQL };

})();

TOOLSTesting: Jasmine, Mocha, much much more...Static code analysis: JSLintDependency injection: require.js

THE ENDBY PAWEŁ SZULC / RABBITONWEB.COM

email: / twitter: paul.szulc@gmailcom @paulszulc