AustinMatherne

Mighty Principles of Development

1. Modularity: "Do one thing and do it well." Feature creep is the death of software.
2. Simplicity: Complexity is the mother of all evil. Cleverness is not wisdom, it's a shortsighted indulgence.
3. Clarity: Writing code is easy, reading code is hard. Easily grokked code is beautiful.
4. Testability: Untested code is broken code. Never assume otherwise.

AustinMatherne

// counter.actions.ts
import { Action } from '@ngrx/store';

export const enum CounterTypes {
  INCREMENT  = '[Counter] Increment';
  DECREMENT  = '[Counter] Decrement';
  RESET      = '[Counter] Reset';
};

export class Increment implements Action {

AustinMatherne

// counter.actions.ts
import { Action } from '@ngrx/store';

export const INCREMENT  = '[Counter] Increment';
export const DECREMENT  = '[Counter] Decrement';
export const RESET      = '[Counter] Reset';

export class Increment implements Action {
  readonly type = INCREMENT;
}

AustinMatherne

// counter.reducer.ts
import * as CounterActions from './counter.actions';

export type Action = CounterActions.All;

export function reducer(state: number = 0, action: Action): State {
  switch(action.type) {
    case CounterActions.INCREMENT: {
      return state + 1;
    }

AustinMatherne

// counter.reducer.ts
import { CounterActions, CounterTypes } from './counter.actions';

export function reducer(state: number = 0, action: CounterActions): State {
  switch(action.type) {
    case CounterTypes.INCREMENT: {
      return state + 1;
    }
    case CounterTypes.DECREMENT: {
      return state - 1;

AustinMatherne

import {Observable} from 'rxjs/Observable';
import {defer} from 'rxjs/observable/defer';
import {of} from 'rxjs/observable/of';

@Component({
  selector: 'my-app',
  template: `
    <div>
      Data: {{data$ | async}} <!-- 0.2762838374749106 -->
    </div>

AustinMatherne

import {Observable} from 'rxjs/Observable';
import {defer} from 'rxjs/observable/defer';
import {of} from 'rxjs/observable/of';

@Component({
  selector: 'my-app',
  template: `
    <ng-container *ngIf="data$ | async as data"> <!-- single subscription -->
      <div>
        Data: {{data}} <!-- 0.4431839407652687 -->

AustinMatherne

import {Observable} from 'rxjs/Observable';
import {of} from 'rxjs/observable/of';

import {LetDirective} from './let.directive';

@Component({
  selector: 'my-app',
  template: `
    <ng-container *ngLet="data$ | async as data"> <!-- single subscription -->
      <div>

AustinMatherne

import {Observable} from 'rxjs/Observable';
import {of} from 'rxjs/observable/of';

@Component({
  selector: 'my-app',
  template: `
    <ng-container *ngIf="data$ | async as data"> <!-- removed from dom -->
      <div>
        Data: {{data}} <!-- removed from dom -->
      </div>

AustinMatherne

import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';

interface LetContext<T> {
    ngLet: T;
}

@Directive({
    selector: '[ngLet]'
})
export class LetDirective<T> {