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 = 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 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 = 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

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

Viewers also liked

Similar to Javascript development done right

More from Pawel Szulc

Recently uploaded

Javascript development done right