Using translateX and opacity instead of pages, is it good for performance?


#1

Instead of creating new pages to navigate, is it good for performance if I just utilize translateX and opacity to hide and bring to view, especially if multiple components in those views are binded to the same observables

Also whats the best way to benchmark performance of different views

Here is my example: the link on Playground

home-page.xml

<Page loaded="pageLoaded" class="page" xmlns="http://www.nativescript.org/tns.xsd">

	<ActionBar title="Home" class="action-bar">
	</ActionBar>
	<GridLayout rows="*" columns="*">
			<StackLayout id="cart" row="0" col="0" translateX="0" opacity="1">
				<Button text="check out" tap="{{ onCheckoutTap }}" />
			</StackLayout>
			<StackLayout id="payment" row="0" col="0" translateX="3000" opacity="0">
				<Button text="pay" tap="{{ onPayTap }}" />
			</StackLayout>
			<StackLayout id="message" row="0" col="0" translateX="3000" opacity="0">
				<Button text="print and clear" tap="{{ onPrintTap }}" />
			</StackLayout>
	</GridLayout>
</Page>

home-view-model.js

var observableModule = require("data/observable");
var home = require("./home-page.js");
function HomeViewModel() {
  var viewModel = observableModule.fromObject({
    onCheckoutTap: function () {
      home.BringToView("payment");
      home.RemoveFromView("cart");
    },
    onPayTap: function () {
      home.BringToView("message");
      home.RemoveFromView("payment");
    },
    onPrintTap: function () {
      home.BringToView("cart");
      home.RemoveFromView("message");
    },

  });
  return viewModel;
}
module.exports = HomeViewModel;

home-page.js

var frameModule = require("ui/frame");
var HomeViewModel = require("./home-view-model");
var homeViewModel = new HomeViewModel();

function pageLoaded(args) {
  var page = args.object;
  page.bindingContext = homeViewModel;

  function BringToView(id) {
    var v = page.getViewById(id);
    v.animate({
      duration: 500,
      opacity: 1,
      translate: {
        x: 0,
        y: 0
      }
    })
  }
  exports.BringToView = BringToView;

  function RemoveFromView(id) {
    var v = page.getViewById(id);
    v.animate({
      duration: 500,
      opacity: 0,
      translate: {
        x: 3000,
        y: 0
      }
    })
  }
  exports.RemoveFromView = RemoveFromView;
}
exports.pageLoaded = pageLoaded;