EKON 16: JavaScript

EKON 16: JavaScript

My slides for the JavaScript talk on EKON 16.

Ebeb5d8fd081058ba8df73d378bf83d7?s=128

Sebastian P.R. Gingter

November 05, 2012
Tweet

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