Merge pull request #4167 from NativeScript/perf-flexbox-example

Improvements after profiling the android flexbox example

tns-core-modules/ui/core/bindable/bindable.ts

@@ -24,10 +24,18 @@ const contextKey = "context";
 const paramsRegex = /\[\s*(['"])*(\w*)\1\s*\]/;
 const bc = bindingConstants;
 const emptyArray = [];
+const propertiesCache = {};
 
 function getProperties(property: string): Array<string> {
-    let result: Array<string> = emptyArray;
+    if (!property) {
-    if (property) {
+        return emptyArray;
+    }
+
+    let result: Array<string> = propertiesCache[property];
+    if (result) {
+        return result;
+    }
+
     // first replace all '$parents[..]' with a safe string
     // second removes all ] since they are not important for property access and not needed 
     // then split properties either on '.' or '['
@@ -42,8 +50,7 @@ function getProperties(property: string): Array<string> {
             result[i] = parentsMatches[parentsMatchesCounter++];
         }
     }
-    }
+    propertiesCache[property] = result;
-
     return result;
 }
 

tns-core-modules/ui/image/image.android.ts

@@ -2,13 +2,15 @@
     ImageSource, ImageBase, stretchProperty, imageSourceProperty, srcProperty, tintColorProperty, Color,
     isDataURI, isFileOrResourcePath, RESOURCE_PREFIX
 } from "./image-common";
-import { path, knownFolders } from "../../file-system";
+import { knownFolders } from "../../file-system";
 
 export * from "./image-common";
 
 const FILE_PREFIX = "file:///";
 const ASYNC = "async";
 
+let AndroidImageView: typeof org.nativescript.widgets.ImageView;
+
 interface ImageLoadedListener {
     new (owner: Image): org.nativescript.widgets.image.Worker.OnImageLoadedListener;
 }
@@ -45,9 +47,12 @@ export class Image extends ImageBase {
     public useCache = true;
 
     public createNativeView() {
+        if (!AndroidImageView) {
+            AndroidImageView = org.nativescript.widgets.ImageView;
+        }
         initializeImageLoadedListener();
         
-        const imageView = new org.nativescript.widgets.ImageView(this._context);
+        const imageView = new AndroidImageView(this._context);
         const listener = new ImageLoadedListener(this);
         imageView.setImageLoadedListener(listener);
         (<any>imageView).listener = listener;
@@ -92,7 +97,7 @@ export class Image extends ImageBase {
                 } else {
                     let fileName = value;
                     if (fileName.indexOf("~/") === 0) {
-                        fileName = path.join(knownFolders.currentApp().path, fileName.replace("~/", ""));
+                        fileName = knownFolders.currentApp().path + "/" + fileName.replace("~/", "");
                     }
 
                     imageView.setUri(FILE_PREFIX + fileName, this.decodeWidth, this.decodeHeight, this.useCache, async);

tns-core-modules/ui/label/label.android.ts

@@ -3,6 +3,8 @@ import { TextBase, WhiteSpace, whiteSpaceProperty } from "../text-base";
 
 export * from "../text-base";
 
+let TextView: typeof android.widget.TextView;
+
 export class Label extends TextBase implements LabelDefinition {
     nativeView: android.widget.TextView;
 
@@ -14,7 +16,10 @@ export class Label extends TextBase implements LabelDefinition {
     }
 
     public createNativeView() {
-        return new android.widget.TextView(this._context);
+        if (!TextView) {
+            TextView = android.widget.TextView;
+        }
+        return new TextView(this._context);
     }
 
     public initNativeView(): void {

tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.android.ts

@@ -12,11 +12,14 @@ import {
 
 export * from "./flexbox-layout-common";
 
+let widgetFlexboxLayout: typeof org.nativescript.widgets.FlexboxLayout;
+let widgetLayoutParams: typeof org.nativescript.widgets.FlexboxLayout.LayoutParams;
+
 function makeNativeSetter<T>(setter: (lp: org.nativescript.widgets.FlexboxLayout.LayoutParams, value: T) => void) {
     return function(this: View, value: T) {
         const nativeView: android.view.View = this.nativeView;
-        const lp = nativeView.getLayoutParams() || new org.nativescript.widgets.FlexboxLayout.LayoutParams();
+        const lp = nativeView.getLayoutParams() || new widgetLayoutParams();
-        if (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) {
+        if (lp instanceof widgetLayoutParams) {
             setter(lp, value);
             nativeView.setLayoutParams(lp);
         }
@@ -80,7 +83,11 @@ export class FlexboxLayout extends FlexboxLayoutBase {
     nativeView: org.nativescript.widgets.FlexboxLayout;
 
     public createNativeView() {
-        return new org.nativescript.widgets.FlexboxLayout(this._context);
+        if (!widgetFlexboxLayout) {
+            widgetFlexboxLayout = org.nativescript.widgets.FlexboxLayout;
+            widgetLayoutParams = widgetFlexboxLayout.LayoutParams;
+        }
+        return new widgetFlexboxLayout(this._context);
     }
 
     public disposeNativeView() {
@@ -127,29 +134,32 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         super._updateNativeLayoutParams(child);
 
         const lp = <org.nativescript.widgets.FlexboxLayout.LayoutParams>child.nativeView.getLayoutParams();
-        lp.order = child.order;
+        const style = child.style;
-        lp.flexGrow = child.flexGrow;
+        lp.order = style.order;
-        lp.flexShrink = child.flexShrink;
+        lp.flexGrow = style.flexGrow;
-        lp.wrapBefore = child.flexWrapBefore;
+        lp.flexShrink = style.flexShrink;
-        lp.alignSelf = alignSelfMap[child.alignSelf];
+        lp.wrapBefore = style.flexWrapBefore;
+        lp.alignSelf = alignSelfMap[style.alignSelf];
         child.nativeView.setLayoutParams(lp);
     }
 
     public _setChildMinWidthNative(child: View): void {
         child._setMinWidthNative(0);
-        const lp = child.nativeView.getLayoutParams();
+        const nativeView = child.nativeView;
-        if (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) {
+        const lp = nativeView.getLayoutParams();
-            lp.minWidth = Length.toDevicePixels(child.minWidth, 0);
+        if (lp instanceof widgetLayoutParams) {
-            child.nativeView.setLayoutParams(lp);
+            lp.minWidth = Length.toDevicePixels(child.style.minWidth, 0);
+            nativeView.setLayoutParams(lp);
         }
     }
 
     public _setChildMinHeightNative(child: View): void {
         child._setMinHeightNative(0);
-        const lp = child.nativeView.getLayoutParams();
+        const nativeView = child.nativeView;
-        if (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) {
+        const lp = nativeView.getLayoutParams();
-            lp.minHeight = Length.toDevicePixels(child.minHeight, 0);
+        if (lp instanceof widgetLayoutParams) {
-            child.nativeView.setLayoutParams(lp);
+            lp.minHeight = Length.toDevicePixels(child.style.minHeight, 0);
+            nativeView.setLayoutParams(lp);
         }
     }
 }