feat(view_pool): adds a view pool of dehydrated views per protoview.

Author: rkirov

modules/angular2/src/change_detection/dynamic_change_detector.js

@@ -39,14 +39,13 @@ export class DynamicChangeDetector extends AbstractChangeDetector {
     this.formatters = formatters;
 
     this.values = ListWrapper.createFixedSize(protoRecords.length + 1);
-    ListWrapper.fill(this.values, uninitialized);
-
     this.changes = ListWrapper.createFixedSize(protoRecords.length + 1);
 
     this.protos = protoRecords;
   }
 
   setContext(context:any) {
+    ListWrapper.fill(this.values, uninitialized);
     this.values[0] = context;
   }
 

modules/angular2/src/core/compiler/view.js

@@ -15,12 +15,17 @@ import {ViewPort} from './viewport';
 import {Content} from './shadow_dom_emulation/content_tag';
 import {LightDom, DestinationLightDom} from './shadow_dom_emulation/light_dom';
 import {ShadowDomStrategy} from './shadow_dom_strategy';
+import {ViewPool} from './view_pool';
 
 const NG_BINDING_CLASS = 'ng-binding';
 const NG_BINDING_CLASS_SELECTOR = '.ng-binding';
 // TODO(tbosch): Cannot use `const` because of Dart.
 var NO_FORMATTERS = MapWrapper.create();
 
+// TODO(rado): make this configurable/smarter.
+var VIEW_POOL_CAPACITY = 10000;
+var VIEW_POOL_PREFILL = 0;
+
 /**
  * Const of making objects: http://jsperf.com/instantiate-size-of-object
  */
@@ -268,6 +273,7 @@ export class ProtoView {
   rootBindingOffset:int;
   isTemplateElement:boolean;
   shadowDomStrategy: ShadowDomStrategy;
+  _viewPool: ViewPool;
   constructor(
       template:Element,
       protoChangeDetector:ProtoChangeDetector,
@@ -284,10 +290,23 @@ export class ProtoView {
       ? 1 : 0;
     this.isTemplateElement = this.element instanceof TemplateElement;
     this.shadowDomStrategy = shadowDomStrategy;
+    this._viewPool = new ViewPool(VIEW_POOL_CAPACITY);
   }
 
   // TODO(rado): hostElementInjector should be moved to hydrate phase.
   instantiate(hostElementInjector: ElementInjector):View {
+    if (this._viewPool.length() == 0) this._preFillPool(hostElementInjector);
+    var view = this._viewPool.pop();
+    return isPresent(view) ? view : this._instantiate(hostElementInjector);
+  }
+
+  _preFillPool(hostElementInjector: ElementInjector) {
+    for (var i = 0; i < VIEW_POOL_PREFILL; i++) {
+      this._viewPool.push(this._instantiate(hostElementInjector));
+    }
+  }
+
+  _instantiate(hostElementInjector: ElementInjector): View {
     var rootElementClone = this.instantiateInPlace ? this.element : DOM.clone(this.element);
     var elementsWithBindingsDynamic;
     if (this.isTemplateElement) {
@@ -409,6 +428,10 @@ export class ProtoView {
     return view;
   }
 
+  returnToPool(view: View) {
+    this._viewPool.push(view);
+  }
+
   static _addNativeEventListener(element: Element, eventName: string, expr: AST, view: View) {
     var locals = MapWrapper.create();
     var innerCallback = ProtoView.buildInnerCallback(expr, view, locals);

modules/angular2/src/core/compiler/view_pool.js

@@ -0,0 +1,26 @@
+import {ListWrapper, MapWrapper, StringMapWrapper, List} from 'angular2/src/facade/collection';
+import {View} from './view';
+
+export class ViewPool {
+  _views: List<View>;
+  _capacity: number;
+  constructor(capacity: number) {
+    this._views = [];
+    this._capacity = capacity;
+  }
+
+  pop(): View {
+    return ListWrapper.isEmpty(this._views) ? null : ListWrapper.removeLast(this._views);
+  }
+
+  push(view: View) {
+    if (this._views.length < this._capacity) {
+      ListWrapper.push(this._views, view);
+    }
+  }
+
+  length() {
+    return this._views.length;
+  }
+}
+

modules/angular2/src/core/compiler/viewport.js

@@ -92,6 +92,8 @@ export class ViewPort {
     if (atIndex == -1) atIndex = this._views.length - 1;
     var view = this.detach(atIndex);
     view.dehydrate();
+    // TODO(rado): this needs to be delayed until after any pending animations.
+    this.defaultProtoView.returnToPool(view);
     // view is intentionally not returned to the client.
   }
 

modules/angular2/src/facade/collection.dart

@@ -110,6 +110,7 @@ class ListWrapper {
       list.remove(items[i]);
     }
   }
+  static removeLast(List list) => list.removeLast();
   static bool remove(List list, item) => list.remove(item);
   static void clear(List l) {
     l.clear();

modules/angular2/src/facade/collection.es6

@@ -149,6 +149,9 @@ export class ListWrapper {
       list.splice(index, 1);
     }
   }
+  static removeLast(list:List) {
+    return list.pop();
+  }
   static remove(list, el): boolean {
     var index = list.indexOf(el);
     if (index > -1) {

modules/angular2/test/core/compiler/view_pool_spec.js

@@ -0,0 +1,46 @@
+import {describe, xit, it, expect, beforeEach, ddescribe, iit, el} from 'angular2/test_lib';
+
+import {View} from 'angular2/src/core/compiler/view';
+import {ViewPool} from 'angular2/src/core/compiler/view_pool';
+import {proxy, IMPLEMENTS} from 'angular2/src/facade/lang';
+
+@proxy
+@IMPLEMENTS(View)
+class FakeView {
+  noSuchMethod(i) {
+    super.noSuchMethod(i);
+  }
+}
+
+export function main() {
+  describe('ViewPool', () => {
+    var viewPool, capacity = 3;
+    beforeEach(() => {
+      viewPool = new ViewPool(capacity);
+    })
+
+    it('should return null when there are no views', () => {
+      expect(viewPool.pop()).toBeNull();
+      expect(viewPool.length()).toBe(0);
+    })
+
+    it('should support storing and retrieving a view', () => {
+      var view = new FakeView();
+      viewPool.push(view);
+      expect(viewPool.length()).toBe(1);
+
+      expect(viewPool.pop()).toBe(view);
+      expect(viewPool.length()).toBe(0);
+    })
+
+    it('should not store more views that its capacity', () => {
+      for (var i = 0; i < capacity * 2; i++) viewPool.push(new FakeView());
+      expect(viewPool.length()).toBe(capacity);
+
+      for (var i = 0; i < capacity; i++) {
+        expect(viewPool.pop()).not.toBe(null);
+      }
+      expect(viewPool.pop()).toBeNull();
+    })
+  })
+}

modules/angular2/test/core/compiler/view_spec.js

@@ -31,6 +31,13 @@ class FakeViewPort {
   }
 }
 
+@proxy
+@IMPLEMENTS(View)
+class FakeView {
+  noSuchMethod(i) {
+    super.noSuchMethod(i);
+  }
+}
 
 export function main() {
   describe('view', function() {
@@ -68,6 +75,14 @@ export function main() {
         view.dehydrate();
         expect(view.hydrated()).toBe(false);
       });
+
+      it('should use the view pool to reuse views', () => {
+        var pv = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(), null);
+        var fakeView = new FakeView();
+        pv.returnToPool(fakeView);
+
+        expect(pv.instantiate(null)).toBe(fakeView);
+      });
     });
 
     describe('with locals', function() {

modules/benchmarks/src/tree/tree_benchmark.js

@@ -43,7 +43,7 @@ function setupReflector() {
       },
       template: new TemplateConfig({
           directives: [TreeComponent, NgIf],
-          inline: `<span>{{data.value}}<span template='ng-if data.right != null'><tree [data]='data.right'></tree></span><span template='ng-if data.left != null'><tree [data]='data.left'></tree></span></span>`
+          inline: `<span> {{data.value}} <span template='ng-if data.right != null'><tree [data]='data.right'></tree></span><span template='ng-if data.left != null'><tree [data]='data.left'></tree></span></span>`
       })
     })]
   });