Improve angular performance

Improve performance by avoiding unnecessary cloning of the form wide state and avoiding
unnecessary recalculation of the child render props, therefore avoiding unnecessary
change detection cycles in children.

When querying the state from the `JsonFormsAngularService` via its `getState` method, the
whole state is cloned. This lead to a heavy performance penalty because the
`JsonFormsAbstractControl` queried the state on every change detection cycle to get the
global config. The `NumberControlRenderer` queried the state on every change detection
cycle to get the locale. Therefore new methods to receive the config and locale are added
which avoid cloning the whole state.

Signed-off-by: Lucas Koehler <[email protected]>

Author: lucas-koehler

packages/angular-material/src/controls/number.renderer.ts

@@ -25,7 +25,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import {
-  getLocale,
   isIntegerControl,
   isNumberControl,
   or,
@@ -140,7 +139,7 @@ export class NumberControlRenderer extends JsonFormsControl {
       this.max = this.scopedSchema.maximum;
       this.multipleOf = this.scopedSchema.multipleOf || defaultStep;
       const appliedUiSchemaOptions = merge({}, props.config, this.uischema.options);
-      const currentLocale = getLocale(this.jsonFormsService.getState());
+      const currentLocale = this.jsonFormsService.getLocale();
       if (this.locale === undefined || this.locale !== currentLocale) {
         this.locale = currentLocale;
         this.numberFormat = new Intl.NumberFormat(this.locale, {

packages/angular-material/src/layouts/group-layout.renderer.ts

@@ -32,7 +32,7 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
   template: `
     <mat-card fxLayout="column" [fxHide]="hidden">
       <mat-card-title class="mat-title">{{ label }}</mat-card-title>
-      <div *ngFor="let props of renderProps; trackBy: trackElement" fxFlex>
+      <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema: path; trackBy: trackElement" fxFlex>
         <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
       </div>
     </mat-card>

packages/angular-material/src/layouts/horizontal-layout.renderer.ts

@@ -41,7 +41,7 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
       [fxHide]="hidden"
       fxLayoutAlign="center start"
     >
-      <div *ngFor="let props of renderProps; trackBy: trackElement" fxFlex>
+      <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema: path; trackBy: trackElement" fxFlex>
         <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
       </div>
     </div>

packages/angular-material/src/layouts/layout.renderer.ts

@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { OnDestroy, OnInit, ChangeDetectorRef, Component } from '@angular/core';
+import { OnDestroy, OnInit, ChangeDetectorRef, Component, PipeTransform, Pipe } from '@angular/core';
 import {
   JsonFormsAngularService,
   JsonFormsBaseRenderer
@@ -32,7 +32,8 @@ import {
   Layout,
   mapStateToLayoutProps,
   OwnPropsOfRenderer,
-  UISchemaElement
+  UISchemaElement,
+  JsonSchema
 } from '@jsonforms/core';
 import { Subscription } from 'rxjs';
 
@@ -66,20 +67,24 @@ export class LayoutRenderer<T extends Layout> extends JsonFormsBaseRenderer<T>
     }
   }
 
-  get renderProps(): OwnPropsOfRenderer[] {
-    const elements = (this.uischema.elements || []).map(
+  trackElement(_index: number, renderProp: OwnPropsOfRenderer): string {
+    return renderProp
+      ? renderProp.path + JSON.stringify(renderProp.uischema)
+      : null;
+  }
+}
+
+@Pipe({ name: 'layoutChildrenRenderProps' })
+export class LayoutChildrenRenderPropsPipe implements PipeTransform {
+  transform(uischema: Layout, schema: JsonSchema, path: string): OwnPropsOfRenderer[] {
+    const elements = (uischema.elements || []).map(
       (el: UISchemaElement) => ({
         uischema: el,
-        schema: this.schema,
-        path: this.path
+        schema: schema,
+        path: path
       })
     );
     return elements;
   }
 
-  trackElement(_index: number, renderProp: OwnPropsOfRenderer): string {
-    return renderProp
-      ? renderProp.path + JSON.stringify(renderProp.uischema)
-      : null;
-  }
-}
+}

packages/angular-material/src/layouts/vertical-layout.renderer.ts

@@ -36,7 +36,7 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
   selector: 'VerticalLayoutRenderer',
   template: `
     <div fxLayout="column" fxLayoutGap="16px" [fxHide]="hidden">
-      <div *ngFor="let props of renderProps; trackBy: trackElement" fxFlex>
+      <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema: path; trackBy: trackElement" fxFlex>
         <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
       </div>
     </div>

packages/angular-material/src/module.ts

@@ -66,6 +66,7 @@ import { GroupLayoutRenderer } from './layouts/group-layout.renderer';
 import { HorizontalLayoutRenderer } from './layouts/horizontal-layout.renderer';
 import { VerticalLayoutRenderer } from './layouts/vertical-layout.renderer';
 import { ArrayLayoutRenderer } from './layouts/array-layout.renderer';
+import { LayoutChildrenRenderPropsPipe } from './layouts';
 
 @NgModule({
   imports: [
@@ -111,7 +112,8 @@ import { ArrayLayoutRenderer } from './layouts/array-layout.renderer';
     ObjectControlRenderer,
     AutocompleteControlRenderer,
     TableRenderer,
-    ArrayLayoutRenderer
+    ArrayLayoutRenderer,
+    LayoutChildrenRenderPropsPipe
   ],
   entryComponents: [
     BooleanControlRenderer,

packages/angular-material/test/group-layout.spec.ts

@@ -32,6 +32,7 @@ import {
   setupMockStore
 } from '@jsonforms/angular-test';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
 import {
   GroupLayoutRenderer,
   groupLayoutTester
@@ -47,7 +48,7 @@ describe('Group layout', () => {
 
   beforeEach(() => {
     fixture = beforeEachLayoutTest(GroupLayoutRenderer, {
-      declarations: [MatCard, MatCardTitle],
+      declarations: [LayoutChildrenRenderPropsPipe, MatCard, MatCardTitle],
       imports: [FlexLayoutModule]
     });
   });

packages/angular-material/test/horizontal-layout.spec.ts

@@ -30,6 +30,7 @@ import {
   HorizontalLayoutRenderer,
   horizontalLayoutTester
 } from '../src/layouts/horizontal-layout.renderer';
+import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
 
 describe('Horizontal layout tester', () => {
   it('should succeed', () => {
@@ -43,6 +44,7 @@ describe('Horizontal layout', () => {
 
   beforeEach(() => {
     fixture = beforeEachLayoutTest(HorizontalLayoutRenderer, {
+      declarations: [LayoutChildrenRenderPropsPipe],
       imports: [FlexLayoutModule]
     });
   });

packages/angular-material/test/object-control.spec.ts

@@ -46,6 +46,7 @@ import {
   ObjectControlRendererTester
 } from '../src/other/object.renderer';
 import { getJsonFormsService } from '@jsonforms/angular-test';
+import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
 
 const uischema1: ControlElement = { type: 'Control', scope: '#' };
 const uischema2: ControlElement = {
@@ -98,7 +99,8 @@ describe('Object Control', () => {
         ObjectControlRenderer,
         TextControlRenderer,
         VerticalLayoutRenderer,
-        GroupLayoutRenderer
+        GroupLayoutRenderer,
+        LayoutChildrenRenderPropsPipe
       ],
       imports: [
         CommonModule,

packages/angular-material/test/vertical-layout.spec.ts

@@ -30,6 +30,7 @@ import {
   VerticalLayoutRenderer,
   verticalLayoutTester
 } from '../src/layouts/vertical-layout.renderer';
+import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
 
 describe('Vertical layout tester', () => {
   it('should succeed', () => {
@@ -42,6 +43,7 @@ describe('Vertical layout', () => {
 
   beforeEach(() => {
     fixture = beforeEachLayoutTest(VerticalLayoutRenderer, {
+      declarations: [LayoutChildrenRenderPropsPipe],
       imports: [FlexLayoutModule]
     });
     component = fixture.componentInstance;