something something **es6**

_intro.md

something something es6

a bit cleaned up version of my "slides"

disclaimer: this "talk" was done to show some "real life use cases" to simplify the knowledge I mainly got from Axel Rauschmayer's articles

why "destructring is a good way to go"

// WAT
event.initMouseEvent( 'click', true, true, window,
                      123, 101, 202, 101, 202,
                      true, false, false, false, 1, null );

happily, it's been deprecated

// old, deprecated madness
event.initMouseEvent( type, canBubble, cancelable, view,
                      detail, screenX, screenY, clientX, clientY,
                      ctrlKey, altKey, shiftKey, metaKey,
                      button, relatedTarget );

// new, SANE signature
MouseEvent( type, options );

---

get "max value"

getting "max" value from given collection

Math.max.apply( Math, collection );

the "es6 way"

Math.max( ...collection );

---

"extend" function

function extend( target, source ) {
  // extend logic

  if ( arguments.length > 2 ) {
    var others = Array.prototype.slice.apply( arguments, 2 );
    return extend.apply( null, [ target ].concat( others ) );
  }

  return target;
}

the "es6 way"

function extend( target, source, ...moreSources ) {
  // extend logic

  if ( moreSources.length ) {
    return extend( target, ...moreSources );
  }

  return target;
}

angular-folks.md

defining a controller

angular.controller( 'foo', Foo );

the "let's use the object's properties" way:

// @ngInject
function Foo( $q, $http, $timeout ) {
  this._$q = $q;
  this._$http = $http;
  this._$timeout = $timeout;
}

Foo.prototype.promise = function ( value ) {
  return this._$q.when( value );
};

Foo.prototype.fetch = function ( url ) {
  return this._$http.get( url );
};

Foo.prototype.delay = function ( cb, delay, digest ) {
  return this._$timeout( cb, delay, digest );
};

the "let's waste the memory" way:

// @ngInject
function Foo( $q, $http, $timeout ) {
  this.promise = function ( value ) {
    return $q.when( value );
  };

  this.fetch = function ( url ) {
    return $http.get( url );
  };

  this.delay = function ( cb, delay, digest ) {
    return $timeout( cb, delay, digest );
  };
}

the "es6 way"

const _$q       = new WeakMap();
const _$http    = new WeakMap();
const _$timeout = new WeakMap();

class Foo {
  // @ngInject
  constructor( $q, $http, $timeout ) {
    _$q.set( this, $q );
    _$http.set( this, $http );
    _$timeout.set( this, $timeout );
  }

  promise( value ) {
    return _$q.get( this ).when( value );
  }

  fetch( url ) {
    return _$http.get( this ).get( url );
  }

  delay( ...args ) {
    return _$timeout.get( this )( ...args );
  }
}

---

directive controller require

angular.directive( 'foo', function () {
  return {
    controller : 'foo',
    require : [ 'foo', 'form', 'ngModel', 'bar' ],

    link : function ( scope, element, attrs, controllers ) {
      var ctrl        = controllers[ 0 ];
      var formCtrl    = controllers[ 1 ];
      var ngModelCtrl = controlelrs[ 2 ];
      var barCtrl     = controllers[ 3 ];

      // logic
    }
  };
});

the "es6 way" v1

angular.directive( 'foo', function () {
  return {
    controller : 'foo',
    require : [ 'foo', 'form', 'ngModel', 'bar' ],

    link : function ( scope, element, attrs, controllers ) {
      let [ ctrl, formCtrl, ngModelCtrl, barCtrl ] = controllers;

      // logic
    }
  };
});

the "es6 way" v2 (my fav)

angular.directive( 'foo', function () {
  return {
    controller : 'foo',
    require : [ 'foo', 'form', 'ngModel', 'bar' ],

    link : function ( scope, element, attrs, [ ctrl, formCtrl, ngModelCtrl, barCtrl ] ) {
      // logic
    }
  };
});