.component method

Helper to write code by convention and best practices

• cuts down on boilerplate
• provides sane defaults
• allows stateless components
• looks more like angular 2

Angular 1.4

.directive('counter', function counter() {
  return {
    scope: {},
    bindToController: {
      count: '='
    },
    controller: function () {
      function increment() {
        this.count++;
      }
      function decrement() {
        this.count--;
      }
      this.increment = increment;
      this.decrement = decrement;
    },
    controllerAs: 'counter',
    template: [
      '<div class="todo">',
        '<input type="text" ng-model="counter.count">',
        '<button type="button" ng-click="counter.decrement();">-</button>',
        '<button type="button" ng-click="counter.increment();">+</button>',
      '</div>'
    ].join('')
  };
});

Angular 1.5

.component('counter', {
  template: [
      '<div class="todo">',
        '<input type="text" ng-model="$ctrl.count">',
        '<button type="button" ng-click="$ctrl.decrement();">-</button>',
        '<button type="button" ng-click="$ctrl.increment();">+</button>',
      '</div>'
    ].join(''),
  bindings: {
    count: '='
  },
  controller: class Counter {
     constructor(//DI here//){
        this.count = 0;
    }
   
     increment() {
      this.count++;
    }

    decrement() {
      this.count--;
    }
  }
});

Template as a function

.component('counter', {
  template: ($element,$attr) {
 //do your logic 
    return [
      '<div class="todo">',
        '<input type="text" ng-model="$ctrl.count">',
        '<button type="button" ng-click="$ctrl.decrement();">-</button>',
        '<button type="button" ng-click="$ctrl.increment();">+</button>',
      '</div>'
       ].join('');
},
  bindings: {
    count: '='
  },
  controller: class Counter {
     constructor(){
        this.count = 0;
    }
   
     increment() {
      this.count++;
    }

    decrement() {
      this.count--;
    }
  }
});

Angular 2.0

@Component({
  template:  [
      '<div class="todo">',
        '<input type="text" #count='' ngControl='count' [(ngModel)]="count">',
        '<button type="button" (click)="decrement();">-</button>',
        '<button type="button" (click)="increment();">+</button>',
      '</div>'
       ].join('');
}) 
class Counter {
    @Input()
    public count:number=0;
   
    increment() {
      this.count++;
    }

    decrement() {
      this.count--;
    }
  }
});

In Angular 2 -

Projection is the new transclution

Transclusion as a source of data 

//html
<multislot-card>
  <card-title>Leonard Cohen</card-title>
  <card-song>Like a Bird on a wire</card-song>
</multislot-card>
//


//js
angular
  .module('app')
  .directive('multislotCard', multipleTransclusion);
  
function multipleTransclusion(){
  return {
    restrict: 'E',
    transclude: {
      'title': '?cardTitle',
      'song': '?cardSong',
    },
    template:
      '<div>' + 
        '<h3 ng-transclude="title">No title</h3>' + 
        '<i ng-transclude="song">Empty</i>' +
      '</div>'
  };
}

Require and $onInit

Require is used to get other controllers instantiated on same or parent nodes

Angular 1.4

angular
  .module('app', [])
  .directive('parentComponent', function () {
    scope: {},
    require: ['^parentDirective', 'ngModel'],
    controller: function () {
      // controller logic
    }
    link: function ($scope, $element, $attrs, $ctrl) {
      // $ctrl[0] === ^parentDirective
      // $ctrl[1] === ^ngModel
    },
    template: `
      <div>
        Component: {{ $ctrl.state }}
      </div>
    `
  });

Require and $onInit

We can now use an object

angular
  .module('app', [])
  .directive('parentComponent', function () {
    scope: {},
    require: {
              ngModelCtrl: 'ngModel'
    },
    controller: function () {
            this.ngModelCtrl.... /// created for us
    }
    template: `
      <div>
        Component: {{ $ctrl.state }}
      </div>
    `
  });

Require and $onInit

angular
  .module('app', [])
  .directive('parentComponent', function () {
    scope: {},
    require: {
              ngModelCtrl: 'ngModel'
    },
    controller: function () {
            this.ngModelCtrl.formatter.push(...) // runtime error!
    }
    template: `
      <div>
        Component: {{ $ctrl.state }}
      </div>
    `
  });

Require and $onInit

But parents are instantiated after children,
and order & priority is not known to controller

angular
  .module('app', [])
  .directive('parentComponent', function () {
    scope: {},
    require: {
              ngModelCtrl: 'ngModel'
    },
    controller: class ParentComponent() {
        $onInit(){
            this.ngModelCtrl.formatter.push(...)// do your thing
    }
  });

One way Data binding

angular
  .module('app', [])
  .component('example', {
  bindings: {
    obj: '<',
    prim: '<'
  },
  template: `
    <div class="section">
      <h4>
        Isolate Component
      </h4>
      <p>Object: {{ $ctrl.obj }}</p>
      <p>Primitive: {{ $ctrl.prim }}</p>
      <a href="" ng-click="$ctrl.updateValues();">
        Change Isolate Values
      </a>
    </div>
  `,
  controller: function () {
    this.updateValues = function () {
      this.prim = 10;
      this.obj = {
        john: {
          age: 35,
          location: 'Unknown'
        }
      };
    };
  }
};
)})
 

angular
  .module('app')  
  .controller('ParentController', function ParentController() {
  this.somePrimitive = 99;
  this.someObject = {
    todd: {
      age: 25,
      location: 'England, UK'
    }
  };
  this.updateValues = function () {
    this.somePrimitive = 33;
    this.someObject = {
      jilles: {
        age: 20,
        location: 'Netherlands'
      }
    };
  };
}
);

Types of Components

Presetational -  components

(dumb component)

Types of Components

Business -
Stateful
(smart components)

Types of Components

View Routing -
(average guy which by chance has the control)

Presentation components

• Display the user interface

• Stateless (dumb / pure)

• Data arrives via bindings (inputs)

• Data leaves via events (outputs)

Business Components

• Access services & state

• Stateful (smart / impure / container)

• Do not provide interactive user interface

• Render other Components

View Components

• Build the current view (from a URL)

• Specialist (smart/router) components

• Create components dynamically (via a Router)

• Can be entry points to the application

More on LifeCycle hooks

• allow us to work without $scope
• provide a similar environment to angular 2

• $onInit()
• $onDestroy()
• $postLink()
• $onChanges(changes)

$onChanges

myVillain.prototype = {
  $onChanges: function(changes) {
    if (changes.villain) {
      this.fullName = getFullName(this.villain);
    }
  },
  ...
};

More new stuff with 1.5

• Lazy transclusion
• ng-animate-swap
• $resolve in ng-route
• cancelable requests in ng-resource

Ng-animate-swap

• A Helper module to make the syntax even closer to angular Does not require angular 2
• works with decorators (typescript or babel)

• Use ng 1.x and ng2 togethers
• Injectors are bridged 
• Components and directives can be mixed

Observables 

http://slides.com/robwormald/everything-is-a-stream#/

Push vs Pull

Observables are lazy Push collections of multiple values. They fill the missing spot in the following table:

Push vs Pull

Observables are lazy Push collections of multiple values. They fill the missing spot in the following table:

 Data streams

Observable spec.

var observable = Rx.Observable.create(function (observer) {
  observer.onNext(42);
  observer.onCompleted();
  return function(){
    //do your cleanup stuff here
    }
});


var subscription = observable.subscribe(
  function (value) {
      console.log('Next: %s.', value);
  },
  function (ev) {
      console.log('Error: %s!', ev);
  },
  function () {
      console.log('Completed!');
  }
);

subscription.dispose();

RxJs - Reactive Extensions to Javascript

Reactive data streams

Angular and Observables (rx-angular)

observeOnScope($scope, 'search')
  .throttle(1000)
  .map(function(change){
    return change.newValue || "";
  })
  .distinctUntilChanged()
  .flatMapLatest(searchWikipedia)
  .safeApply($scope, function(result) {
    $scope.data = result;
  })
  .subscribe();

Angular and Observables (rx-angular)

function searchWikipedia(term) {
  return rx.Observable.fromPromise($http({
      url: "http://en.wikipedia.org/w/api.php?&callback=JSON_CALLBACK",
      method: "jsonp",
      params: {
        action: "opensearch",
        search: encodeURI(term),
        format: "json"
      }
    })
  );             
}

Programming going FRP

// OOP

let c = new Calculator(0);
// one needs to learn API.
c.add(3);
/// keeping internal state
let result = c.value();
c.subtract(2);
let nextResult = let result = c.value();

///FRP (Functional only really here)

function add(a,b){
    return a+ b;
}

let result = add(0,3);
let nextResult  = add(result,-2);

//is also polymorphic

let floaty = add(5.56,15.7);

// and even 
let together = add('this',' and that');

///Function Rules (laws)

// associative

 add(add(1, 2), 4) == add(1, add(2, 4)) 

// commutative 

add(4, 1) == add(1, 4)

 // identity 

add(n, 0) == n 

// distributive 

multiply(2, add(3,4)) == add(multiply(2, 3), multiply(2, 4))

///Functional Rules (laws)

//composable

var reverseCap = compose(capitalize, reverse);
reverseCap(“hello”) //=> “Olleh” Composition

//associativity also works in functions

compose(compose(f, g), h) == compose(f, compose(g, h)) Composition (associativity)

/// also for larger scale
var getFromDb = compose(pluck('rows'), User.findAll);
var cleanUpData = compose(capitalize, pluck('name'));
var renderTemplate = TemplateEngine.render(‘users_table');
var makePage = compose(renderTemplate, map(cleanUpData), getFromDb);

 makePage({limit: 20}) makePage({limit: 20})

Function Purity

A function is pure when:

• it always gives the same o/p for one i/p
• it has no side effects
• never relies on external state

Pure Functions

Purity makes function

1. Reliable

2. Testable

3. Portable

4. Memoizable

5. Parallelizable

Immutability 

Mutability creates probelms

function impureAdd1(val){
    myArray.push(val);
}

function impureAdd2(val,myArray){
    myArray.push(val);
}


function pureAdd(val,myArray){
    return [...myArray,val];
}

JS Data

We can keep native

function immutableSplice(arr, start, deleteCount, ...items) {
  return [ ...arr.slice(0, start), ...items, ...arr.slice(start + deleteCount) ]
}

All other methods

function immutableReverse(arr) {
  return [ ...arr ].reverse()
}

Facebook Lib (2014)

• Immutable Collections
• Angular integration
• Deep optimizations (TRIE Hashing)
• Great docs