EKON 16: JavaScript

My slides for the JavaScript talk on EKON 16.

Transcript

1. Sebastian P.R. Gingter - @PhoenixHawk EKON 16, November 2012 Slides: https://speakerdeck.com/u/phoenixhawk Sources: https://github.com/gingters/EKON16_JavaScript JavaScript
2. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Why?
3. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk JavaScript
4. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Nick Hodges „JavaScript is the new assembler of the browser.“
5. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Runs everywhere
6. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Browser
7. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Server
8. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Mobile devices
9. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Compilers available
10. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Some alternatives / extensions available Coffeescript, Dart, TypeScript
11. 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
12. 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
13. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk
14. Samples EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk
15. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk JavaScript is dynamic
16. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Potential loss of control
17. EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk Change anything
18. 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();
19. Structuring your JavaScript Code EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk •  Credits go to Dan Wahlin & John Papa •  http://tinyurl.com/CleanJS
20. Function spaghetti code EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk
21. 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”
22. Better: Ravioli code EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk
23. 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
24. 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
25. 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
26. 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
27. Namespaces •  Encapsulate your code in a namespace: var  my  =  my  ||  {};   EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk
28. Using Namespaces my.calc  =  {          tempValue:  1,          add:  function(x,  y)  {                  return  x  +  y;          }   };     EKON 16 - November 2012 Sebastian P.R. Gingter @PhoenixHawk
29. 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
30. 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
31. 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
32. 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