javascript development done right
TRANSCRIPT
JAVASCRIPT DEVELOPMENT DONE RIGHTCONFITURA 2014
Created by / /
Paweł Szulchttp://rabbitonweb.com @paulszulc [email protected]
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