EKON 16: JavaScript

Sebastian P.R. Gingter - @PhoenixHawk
EKON 16, November 2012
Slides: https://speakerdeck.com/u/phoenixhawk
Sources: https://github.com/gingters/EKON16_JavaScript
JavaScript

View Slide

EKON 16 - November 2012
Sebastian P.R. Gingter @PhoenixHawk
Why?

View Slide

JavaScript

View Slide

Nick Hodges
„JavaScript is the new assembler of the browser.“

View Slide

Runs everywhere

View Slide

Browser

View Slide

Server

View Slide

Mobile devices

View Slide

Compilers available

View Slide

Some alternatives / extensions available
Coffeescript, Dart, TypeScript

View Slide

JavaScript History
•  1995 - First shipped as LiveScript in Netscape 2
•  A bit later renamed to JavaScript
•  1996 – Used server-side in Netscape Enterprise Server
•  1997 – Standardized as ECMAScript
•  Late 90ies to mid 20ies (DHTML-Era)
•  Considered ‚evil‘
•  Late 20ies: Renaissance with AJAX & Node.js

View Slide

JavaScript
•  Object-based
•  Functional
•  Prototypal
•  Dynamic
•  LISP-Like with C-Syntax
•  Strongly depends on modules extending global scope

View Slide


View Slide

Samples

View Slide

JavaScript is dynamic

View Slide

Potential loss of control

View Slide

Change anything

View Slide

Inject function
var obj = {
test: function(){
alert(‚Hallo‘);
}
};
obj._test = obj.test;
obj.test = function() { this._test(); alert(‚Welt‘) };
obj.test();

View Slide

Structuring your JavaScript Code
•  Credits go to Dan Wahlin & John Papa
•  http://tinyurl.com/CleanJS

View Slide

Function spaghetti code

View Slide

Problems with function spaghetti
•  Mixing of concerns
•  No clear separation of functionality or purpose
•  Variables/functions added into global scope
•  Potential for duplicate function names
•  Not modular
•  Not easy to maintain
•  No sense of a “container”

View Slide

Better: Ravioli code

View Slide

Advantages of Ravioli code
•  Objects encapsulate and decouple code
•  Loosely coupled
•  Separation of Concerns
•  Variables/functions are scoped
•  Functionality in closures
•  Easier to maintain

View Slide

Non-Closure Example

function myNonClosure() {
var date = new Date();
return date.getMilliseconds();
}
Variable lost after
function returns

View Slide

Closure Example

function myClosure() {
var date = new Date();

//nested function
return function () {
return date.getMilliseconds();
};
}
Variable stays around
even after function
returns

View Slide

Encapsulating Data with Object Literals
•  Quick and easy
•  All members are available
•  Best suited for data
var calc = {
tempValue: 1,
add: function(x, y){
return x + y;
}
};

View Slide

Namespaces
•  Encapsulate your code in a namespace:
var my = my || {};

View Slide

Using Namespaces
my.calc = {
tempValue: 1,
add: function(x, y) {
return x + y;
}
};

View Slide

Prototype Pattern Structure
var Calculator = function(eq) {
this.eqCtl = document.getElementById(eq);
};

Calculator.prototype = {
add: function (x, y) {
var val = x + y;
this.eqCtl.innerHTML = val;
}
};
var calc = new Calculator('eqCtl');
calc.add(2,2);

View Slide

Revealing Module Pattern Structure
var calculator = function(eq) {
var eqCtl = document.getElementById(eq),
doAdd = function(x,y) {
var val = x + y;
eqCtl.innerHTML = val;
};

return { add: doAdd }; //Expose public member
}('eqCtl');

calculator.add(2,2);

View Slide

Revealing Prototype Pattern Structure
var Calculator = function (eq) {
this.eqCtl = document.getElementById(eq);
};

Calculator.prototype = function() {
var doAdd = function (x, y) {
var val = x + y;
this.eqCtl.innerHTML = val;
};
return { add : doAdd };
}();

var calc = new Calculator('eqCtl');
calc.add(2,2);

View Slide

Summary
•  Function spaghetti code is bad, Ravioli code is good
•  Closures provide encapsulation
•  Key patterns:
•  Prototype Pattern
•  Revealing Module Pattern
•  Revealing Prototype Pattern

View Slide

EKON 16: JavaScript

EKON 16: JavaScript

Sebastian Gingter

More Decks by Sebastian Gingter

Other Decks in Technology

Featured

Transcript