javascript development done right

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

Upload: pawel-szulc

Post on 10-Jul-2015

392 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Javascript development done right

JAVASCRIPT DEVELOPMENT DONE RIGHTCONFITURA 2014

Created by / /

Paweł Szulchttp://rabbitonweb.com @paulszulc [email protected]

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

Page 2: Javascript development done right

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

Page 3: Javascript development done right
Page 4: Javascript development done right
Page 5: Javascript development done right

MORDOR SCRIPT

Page 6: Javascript development done right

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

Page 7: Javascript development done right
Page 8: Javascript development done right

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

Page 9: Javascript development done right
Page 10: Javascript development done right

JAVA VS JAVASCRIPT

Page 11: Javascript development done right

“JAVASCRIPT ISTO JAVA AS

HAMBURGER ISTO HAM.”

Page 12: Javascript development done right

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)

Page 13: Javascript development done right

IMPORTANT“TO USE THE LANGUAGEPROPERLY, UNDERLYING

CONCEPTS UNDERSTAND YOUMUST”

Page 14: Javascript development done right

FUNCTIONS

Page 15: Javascript development done right

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

Page 16: Javascript development done right

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

Page 17: Javascript development done right

THIS

Page 18: Javascript development done right

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

FUNCTION INVOCATION.

Page 19: Javascript development done right

THIS = CONTEXT

Page 20: Javascript development done right

THIS = CONTEXT

Page 21: Javascript development done right
Page 22: Javascript development done right

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

Page 23: Javascript development done right

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

Page 24: Javascript development done right

FUNCTION INVOCATIONTHERE ARE FOUR DIFFERENT WAYS FOR

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

Page 25: Javascript development done right

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)

Page 26: Javascript development done right

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)

Page 27: Javascript development done right

AS CONSTRUCTORfunction person(name) { this.name = name; return this;};

var p1 = new person('Captain Bomba');

console.log(p1.name)

Captain Bomba

Page 28: Javascript development done right

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

Page 29: Javascript development done right

SCOPE EXTRAVAGANZA

Page 30: Javascript development done right

IN MOST C-LIKE LANGUAGES BLOCK CREATESA SCOPE

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

Page 31: Javascript development done right

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

Page 32: Javascript development done right

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

Page 33: Javascript development done right

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

Page 34: Javascript development done right

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

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

Page 35: Javascript development done right

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

Page 36: Javascript development done right

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

Page 37: Javascript development done right

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

Page 38: Javascript development done right

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

Page 39: Javascript development done right

MODULES

Page 40: Javascript development done right

THERE IS NO SUCH THINGAS 'PRIVATE'

Page 41: Javascript development done right

MODULESCLOSURE TO THE RESCUE!

var JDBC = (function() {

function connection() { ... }

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

})();

Page 42: Javascript development done right

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

Page 43: Javascript development done right

THE ENDBY PAWEŁ SZULC / RABBITONWEB.COM

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