$30 off During Our Annual Pro Sale. View Details »

EKON 16: JavaScript

EKON 16: JavaScript

My slides for the JavaScript talk on EKON 16.

Sebastian Gingter

November 05, 2012
Tweet

More Decks by Sebastian Gingter

Other Decks in Technology

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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();

    View Slide

  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

    View Slide

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

    View Slide

  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”

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide