bitmask.ts

function (rf) {

if (rf & 1) {
  // creation mode
}
if (rf & 2) {
 // update mode
}
}

bloom.ts

Set<T>
.has(foo); // is foo in the set?

  // yes - maybe it's there, maybe not
  // no  - definitely not there

platform injector
  appmodule injector
      {provide: Service}
    root component
    lazy module injector(s)
        child component
          ...
            sub child component
              constructor(private service: Service) {}
  
  // StaticInjector - platform (old, will be changed eventually in Ivy)
  // R3Injector - NgModules (Map based)
  // NodeInjector - , w/ bloom filter: https://github.com/angular/angular/blob/master/packages/core/src/render3/di.ts
  

monomorphism.ts

function operation(point: {x: number, y: number}) {
  data.foo;
  data.bar();
  data.x = y;
}

1. Monomorphism

only ever one shape of object passed to the function

2. Polymorphism

up to 4 versions of the object

3. Megamorphism

>4

operation({
  x: 1.0,
  y: 2.0,
});

operation({
  radius: 3.0,
  x: 1.0,
  y: -1.0,
});

operation({
  y: -1.0,
  x: 3.5,
});

class MyCmp {
  name: string;
  address: string;
  
  static ngComponentDef = {
    // selector
    directives: [NgIf.ngDirectiveDef, NgFor.ngDirectiveDef],
    // template
    // inputs, outputs
    // change detection info
  }
}

MyCmp.ngComponentDef // megamorphic

function renderComponent(cmp) {
  const def = cmp.ngComponentDef;
  
  for (let i = 0; ...) {
    def.template();
  }
}
       
function defineComponent(input) {
  return {
    inputs,
    outputs,
    template,
    directives.map(dir => dir.ngDirectiveDef),
    changeDetection,
  };
}

class MatButton {
  static ngComponentDef = defineComponent({
       inputs, outputs, template, ...
    directives: [NgIf],
       });
}
       
class AppCmp {
  static ngComponentDef = {
       
       inputs, outputs, template, changeDetection, ...
       }
 }
       

tree-shaking.ts

// tree shaking affects lazy loading - it's not always about the sum total of code
// even if app uses everything, the app is usually loaded gradually and the framework should be too

// webpack splits code at the ES module level

// app.ts
import {foo} from './functions';

// functions.ts
var state;

export function foo() { state = x; }

-------

// lazy.ts
// import {bar} from './functions';

export function bar() { state = y; }

// the best optimizer would split an ES module into its functions, and move them into the
// lazy bundles where they're used.

// Closure: "Cross Module Code Motion"


// watching garbage creation
const foo = source.map(blah => blah.foo).filter(...).map(...);
for (var i = 0; i < source.length; i++) {
}
                                  
// parse time of source code
especially on mobile, time to actually parse the JS is significant
                                 
// DOM creation of large structures
.innerHTML, document.createElement, DocumentFragment, <template>

1. Measure what you care about
2. Measure the whole operation


// tree shaking

@NgModule({
  declarations: [SomeCmp, OtherCmp],
})
Module

@Component({
  template: '<other-cmp></other-cmp>',
})
Cmp

// Module -> [SomeCmp, OtherCmp, ...] (build time)

Cmp -> (Module) -> [OtherCmp],

ngComponentDef = {
  directives: [OtherCmp],
}

AppCmp -> MatButton -> MatRippleDir -> ...
       \> MatCard -> MatTitle


// injection

@NgModule({
  providers: [{provide: Service, useClass: ServiceImpl},
              {provide: OtherSvc, useClass: OtherServiceImpl}],
})

@Component({...})
constructor(private service: Service) {
  static ngComponentDef = defineComponent({
    factory: function Cmp_Factory() { return new Cmp(inject(Service)) }
  });
}

@Injectable({
  useClass: ServiceImpl,
}) class Service {
  static ngInjectableDef = defineInjectable({
    factory: function Service_Factory() { return new ServiceImpl(); }
  });
}

// Cmp -> Service -> ServiceImpl
// Cmp xx->xx inject (di system!)

// tree shaker can remove Service, inject, R3Injector, ...