EKON 16: JavaScript - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Nick Hodges „JavaScript is the new assembler of the browser.“

Slide 5

Slide 5 text

EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Runs everywhere

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Mobile devices

Slide 9

Slide 9 text

EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Compilers available

Slide 10

Slide 10 text

EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Some alternatives / extensions available Coffeescript, Dart, TypeScript

Slide 11

Slide 11 text

JavaScript History EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  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

Slide 12

Slide 12 text

JavaScript EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  Object-based •  Functional •  Prototypal •  Dynamic •  LISP-Like with C-Syntax •  Strongly depends on modules extending global scope

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk JavaScript is dynamic

Slide 16

Slide 16 text

EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Potential loss of control

Slide 17

Slide 17 text

EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Change anything

Slide 18

Slide 18 text

Inject function EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk var obj = { test: function(){ alert(‚Hallo‘); } }; obj._test = obj.test; obj.test = function() { this._test(); alert(‚Welt‘) }; obj.test();

Slide 19

Slide 19 text

Structuring your JavaScript Code EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  Credits go to Dan Wahlin & John Papa •  http://tinyurl.com/CleanJS

Slide 20

Slide 20 text

Function spaghetti code EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk

Slide 21

Slide 21 text

Problems with function spaghetti EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  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”

Slide 22

Slide 22 text

Better: Ravioli code EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk

Slide 23

Slide 23 text

Advantages of Ravioli code EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  Objects encapsulate and decouple code •  Loosely coupled •  Separation of Concerns •  Variables/functions are scoped •  Functionality in closures •  Easier to maintain

Slide 24

Slide 24 text

Non-Closure Example function myNonClosure() { var date = new Date(); return date.getMilliseconds(); } Variable lost after function returns EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk

Slide 25

Slide 25 text

Closure Example function myClosure() { var date = new Date(); //nested function return function () { return date.getMilliseconds(); }; } Variable stays around even after function returns EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk

Slide 26

Slide 26 text

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; } }; EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk

Slide 27

Slide 27 text

Namespaces •  Encapsulate your code in a namespace: var my = my || {}; EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk

Slide 28

Slide 28 text

Using Namespaces my.calc = { tempValue: 1, add: function(x, y) { return x + y; } }; EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk

Slide 29

Slide 29 text

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); EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk

Slide 30

Slide 30 text

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); EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk

Slide 31

Slide 31 text

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); EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk

Slide 32

Slide 32 text

Summary •  Function spaghetti code is bad, Ravioli code is good •  Closures provide encapsulation •  Key patterns: •  Prototype Pattern •  Revealing Module Pattern •  Revealing Prototype Pattern EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk