diff --git a/apps/new/.eslintrc.json b/apps/new/.eslintrc.json
new file mode 100644
index 000000000..be41074b7
--- /dev/null
+++ b/apps/new/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+	"extends": ["../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*", "node_modules/**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.ts", "*.tsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.js", "*.jsx"],
+			"rules": {}
+		}
+	]
+}
diff --git a/apps/new/.gitignore b/apps/new/.gitignore
new file mode 100644
index 000000000..407ded969
--- /dev/null
+++ b/apps/new/.gitignore
@@ -0,0 +1,42 @@
+# NativeScript
+hooks/
+node_modules/
+platforms/
+
+# NativeScript Template
+*.js.map
+*.js
+!webpack.config.js
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+.idea
+.cloud
+.project
+tmp/
+typings/
+
+# misc
+npm-debug.log
+
+# app
+!*.d.ts
+!src/assets/fontawesome.min.css
+/report/
+.nsbuildinfo
+/temp/
+/src/tns_modules/
+
+# app uses platform specific scss which can inadvertently get renamed which will cause problems
+app/app.scss
+
+package-lock.json
diff --git a/apps/new/nativescript.config.ts b/apps/new/nativescript.config.ts
new file mode 100644
index 000000000..2ddc58deb
--- /dev/null
+++ b/apps/new/nativescript.config.ts
@@ -0,0 +1,15 @@
+import { NativeScriptConfig } from '@nativescript/core';
+
+export default {
+	// I'd call it .new but that's a reserved token for Android
+	id: 'org.nativescript.dom.events.proposed',
+	appResourcesPath: '../../tools/assets/App_Resources',
+	android: {
+		v8Flags: '--expose_gc',
+		markingMode: 'none',
+	},
+	appPath: 'src',
+	cli: {
+		packageManager: 'npm',
+	},
+} as NativeScriptConfig;
diff --git a/apps/new/package.json b/apps/new/package.json
new file mode 100644
index 000000000..8efc8d199
--- /dev/null
+++ b/apps/new/package.json
@@ -0,0 +1,14 @@
+{
+  "main": "./src/app.ts",
+  "description": "New DOM Events",
+  "license": "SEE LICENSE IN <your-license-filename>",
+  "repository": "<fill-your-repository-here>",
+  "dependencies": {
+    "@nativescript/core": "file:../../packages/core"
+  },
+  "devDependencies": {
+    "@nativescript/android": "~8.3.0",
+    "@nativescript/ios": "~8.3.0",
+    "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz"
+  }
+}
diff --git a/apps/new/project.json b/apps/new/project.json
new file mode 100644
index 000000000..eaacb51ca
--- /dev/null
+++ b/apps/new/project.json
@@ -0,0 +1,65 @@
+{
+	"name": "apps-new",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "apps/new/src",
+	"projectType": "application",
+	"prefix": "nativescript",
+	"namedInputs": {
+		"default": ["{projectRoot}/**/*"],
+		"production": ["!{projectRoot}/**/*.spec.ts"]
+	},
+	"targets": {
+		"build": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"noHmr": true,
+				"production": true,
+				"uglify": true,
+				"release": true,
+				"forDevice": true
+			},
+			"dependsOn": [
+				{
+					"target": "build.all",
+					"projects": "dependencies"
+				}
+			]
+		},
+		"ios": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"platform": "ios"
+			},
+			"dependsOn": [
+				{
+					"target": "build.all",
+					"projects": "dependencies"
+				}
+			]
+		},
+		"android": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"platform": "android"
+			},
+			"dependsOn": [
+				{
+					"target": "build.all",
+					"projects": "dependencies"
+				}
+			]
+		},
+		"clean": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"clean": true
+			}
+		},
+		"lint": {
+			"executor": "@nrwl/linter:eslint",
+			"options": {
+				"lintFilePatterns": ["apps/new/**/*.ts"]
+			}
+		}
+	}
+}
diff --git a/apps/new/references.d.ts b/apps/new/references.d.ts
new file mode 100644
index 000000000..22bac92c6
--- /dev/null
+++ b/apps/new/references.d.ts
@@ -0,0 +1 @@
+/// <reference path="../../references.d.ts" />
diff --git a/apps/new/src/app-root.xml b/apps/new/src/app-root.xml
new file mode 100644
index 000000000..54e70d976
--- /dev/null
+++ b/apps/new/src/app-root.xml
@@ -0,0 +1,2 @@
+<Frame defaultPage="main-page">
+</Frame>
diff --git a/apps/new/src/app.scss b/apps/new/src/app.scss
new file mode 100644
index 000000000..f48bce1ce
--- /dev/null
+++ b/apps/new/src/app.scss
@@ -0,0 +1,2 @@
+@import 'nativescript-theme-core/scss/light';
+@import 'nativescript-theme-core/scss/index';
diff --git a/apps/new/src/app.ts b/apps/new/src/app.ts
new file mode 100644
index 000000000..a4c5c529a
--- /dev/null
+++ b/apps/new/src/app.ts
@@ -0,0 +1,3 @@
+import { Application } from '@nativescript/core';
+
+Application.run({ moduleName: 'app-root' });
diff --git a/apps/new/src/main-page.ts b/apps/new/src/main-page.ts
new file mode 100644
index 000000000..cb9b0f43f
--- /dev/null
+++ b/apps/new/src/main-page.ts
@@ -0,0 +1,7 @@
+import { EventData, Page } from '@nativescript/core';
+import { MainViewModel } from './main-view-model';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new MainViewModel();
+}
diff --git a/apps/new/src/main-page.xml b/apps/new/src/main-page.xml
new file mode 100644
index 000000000..08346203b
--- /dev/null
+++ b/apps/new/src/main-page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <Page.actionBar>
+    <ActionBar title="Plugin Demos" icon="" class="action-bar" />
+  </Page.actionBar>
+  <StackLayout class="p-20">
+    <ScrollView class="h-full">
+      <StackLayout>
+        <Button text="scrolling" tap="{{ viewDemo }}" class="btn btn-primary view-demo" />
+        <Button text="properties" tap="{{ viewDemo }}" class="btn btn-primary view-demo" />
+      </StackLayout>
+    </ScrollView>
+  </StackLayout>
+</Page>
diff --git a/apps/new/src/main-view-model.ts b/apps/new/src/main-view-model.ts
new file mode 100644
index 000000000..5e4241e07
--- /dev/null
+++ b/apps/new/src/main-view-model.ts
@@ -0,0 +1,9 @@
+import { Observable, Frame } from '@nativescript/core';
+
+export class MainViewModel extends Observable {
+	viewDemo(args) {
+		Frame.topmost().navigate({
+			moduleName: `plugin-demos/${args.object.text}`,
+		});
+	}
+}
diff --git a/apps/new/src/plugin-demos/.gitkeep b/apps/new/src/plugin-demos/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/new/src/plugin-demos/properties.ts b/apps/new/src/plugin-demos/properties.ts
new file mode 100644
index 000000000..69fd3f8e4
--- /dev/null
+++ b/apps/new/src/plugin-demos/properties.ts
@@ -0,0 +1,75 @@
+import { Button, EventData, Page, Switch, View, getViewById, Observable, Label, PropertyChangeData } from '@nativescript/core';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+
+	page.bindingContext = new DemoModel(page);
+}
+
+export class DemoModel extends Observable {
+	private readonly manualProfiling: Switch;
+	private readonly automatedProfiling: Button;
+	private readonly target: Label;
+
+	private automatedProfilingInProgress = false;
+
+	constructor(container: View) {
+		super();
+
+		this.manualProfiling = getViewById(container, 'manual-profiling') as Switch;
+		this.automatedProfiling = getViewById(container, 'automated-profiling') as Button;
+		this.target = getViewById(container, 'target') as Label;
+	}
+
+	toggleManualProfiling({ value }: PropertyChangeData): void {
+		console.log(`toggleManualProfiling changed to ${value}. manualProfiling:`, this.manualProfiling);
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	runAutomatedProfiling(): void {
+		if (this.automatedProfilingInProgress) {
+			return;
+		}
+
+		console.log(`runAutomatedProfiling. automatedProfiling:`, this.automatedProfiling);
+		this.automatedProfilingInProgress = true;
+		this.updateAutomatedProfilingEnabled();
+
+		const propName = 'arbitrary-prop';
+
+		// Initialise the target property so that the first property-setting action
+		// doesn't produce an outlier result due to taking a one-off code branch.
+		this.target.setProperty(propName, -1);
+
+		const onPropertyChange = () => {
+			// No-op
+		};
+
+		this.target.addEventListener(Observable.propertyChangeEvent, onPropertyChange, null);
+
+		const time = profile(() => {
+			for (let i = 0; i < 1000000; i++) {
+				this.target.setProperty(propName, i);
+			}
+		});
+
+		this.target.removeEventListener(Observable.propertyChangeEvent, onPropertyChange, null);
+
+		console.log(`1,000,000 runs of setProperty() took ${time} ms`);
+
+		this.automatedProfilingInProgress = false;
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	private updateAutomatedProfilingEnabled(): void {
+		this.automatedProfiling.isEnabled = !this.automatedProfilingInProgress && !this.manualProfiling.checked;
+	}
+}
+
+function profile(action: () => void) {
+	const start = global.isIOS ? (global as any).performance.now() : __time();
+	action();
+	const stop = global.isIOS ? (global as any).performance.now() : __time();
+
+	return stop - start;
+}
diff --git a/apps/new/src/plugin-demos/properties.xml b/apps/new/src/plugin-demos/properties.xml
new file mode 100644
index 000000000..92f5ecfe0
--- /dev/null
+++ b/apps/new/src/plugin-demos/properties.xml
@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <Page.actionBar>
+    <ActionBar title="Properties" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+
+  <ScrollView scroll="{{ onScroll }}">
+    <StackLayout>
+      <FlexboxLayout>
+        <Label text="Manual profiling" />
+        <Switch id="manual-profiling" checked="false" checkedChange="{{ toggleManualProfiling }}" />
+      </FlexboxLayout>
+
+      <Button id="automated-profiling" text="Automated profiling" tap="{{ runAutomatedProfiling }}" class="btn btn-primary" />
+
+      <Label id="target" text="Event target" class="bg-gold" />
+    </StackLayout>
+  </ScrollView>
+</Page>
diff --git a/apps/new/src/plugin-demos/scrolling.ts b/apps/new/src/plugin-demos/scrolling.ts
new file mode 100644
index 000000000..5874bb241
--- /dev/null
+++ b/apps/new/src/plugin-demos/scrolling.ts
@@ -0,0 +1,53 @@
+import { PropertyChangeData } from '@nativescript/core/data/observable';
+import { Observable, Button, EventData, Page, Switch, View, getViewById, ScrollEventData, ScrollView } from '@nativescript/core';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+
+	page.bindingContext = new DemoModel(page);
+}
+
+export class DemoModel extends Observable {
+	private readonly manualProfiling: Switch;
+	private readonly automatedProfiling: Button;
+	private readonly scrollView: ScrollView;
+
+	private automatedProfilingInProgress = false;
+
+	constructor(container: View) {
+		super();
+
+		this.manualProfiling = getViewById(container, 'manual-profiling') as Switch;
+		this.automatedProfiling = getViewById(container, 'automated-profiling') as Button;
+		this.scrollView = getViewById(container, 'scrollview') as ScrollView;
+
+		// sanity check
+		this.scrollView.once('scroll', () => console.log('ONCE scroll'));
+	}
+
+	toggleManualProfiling({ value }: PropertyChangeData): void {
+		console.log(`toggleManualProfiling changed to ${value}. manualProfiling:`, this.manualProfiling);
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	runAutomatedProfiling(): void {
+		if (this.automatedProfilingInProgress) {
+			return;
+		}
+
+		console.log(`runAutomatedProfiling. automatedProfiling:`, this.automatedProfiling);
+		this.automatedProfilingInProgress = true;
+		this.updateAutomatedProfilingEnabled();
+
+		this.automatedProfilingInProgress = false;
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	onScroll(e: ScrollEventData): void {
+		console.log(`[scroll]`);
+	}
+
+	private updateAutomatedProfilingEnabled(): void {
+		this.automatedProfiling.isEnabled = !this.automatedProfilingInProgress && !this.manualProfiling.checked;
+	}
+}
diff --git a/apps/new/src/plugin-demos/scrolling.xml b/apps/new/src/plugin-demos/scrolling.xml
new file mode 100644
index 000000000..57884ef18
--- /dev/null
+++ b/apps/new/src/plugin-demos/scrolling.xml
@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <Page.actionBar>
+    <ActionBar title="Scrolling" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+
+  <ScrollView id="scrollview" scroll="{{ onScroll }}">
+    <StackLayout>
+      <FlexboxLayout>
+        <Label text="Manual profiling" />
+        <Switch id="manual-profiling" checked="false" checkedChange="{{ toggleManualProfiling }}" />
+      </FlexboxLayout>
+
+      <Button id="automated-profiling" text="Automated profiling" tap="{{ runAutomatedProfiling }}" class="btn btn-primary" />
+
+      <StackLayout height="2000" backgroundColor="green" />
+    </StackLayout>
+  </ScrollView>
+</Page>
diff --git a/apps/new/tsconfig.json b/apps/new/tsconfig.json
new file mode 100644
index 000000000..4d3d35828
--- /dev/null
+++ b/apps/new/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDirs": [".", "../.."],
+		"baseUrl": ".",
+		"paths": {
+			"~/*": ["src/*"],
+			"@demo/shared": ["../../tools/demo/index.ts"]
+		}
+	}
+}
diff --git a/apps/new/webpack.config.js b/apps/new/webpack.config.js
new file mode 100644
index 000000000..17a21c5db
--- /dev/null
+++ b/apps/new/webpack.config.js
@@ -0,0 +1,24 @@
+const webpack = require('@nativescript/webpack');
+const { resolve } = require('path');
+
+module.exports = (env) => {
+  webpack.init(env);
+  webpack.useConfig('typescript');
+
+  webpack.chainWebpack((config) => {
+    // shared demo code
+    config.resolve.alias.set(
+      '@demo/shared',
+      resolve(__dirname, '..', '..', 'tools', 'demo')
+    );
+  });
+
+  // Example if you need to share images across demo apps:
+  // webpack.Utils.addCopyRule({
+  //   from: '../../../tools/images',
+  // 	to: 'images',
+  //   context: webpack.Utils.project.getProjectFilePath('node_modules')
+  // });
+
+  return webpack.resolveConfig();
+};
diff --git a/apps/old/.eslintrc.json b/apps/old/.eslintrc.json
new file mode 100644
index 000000000..be41074b7
--- /dev/null
+++ b/apps/old/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+	"extends": ["../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*", "node_modules/**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.ts", "*.tsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.js", "*.jsx"],
+			"rules": {}
+		}
+	]
+}
diff --git a/apps/old/.gitignore b/apps/old/.gitignore
new file mode 100644
index 000000000..407ded969
--- /dev/null
+++ b/apps/old/.gitignore
@@ -0,0 +1,42 @@
+# NativeScript
+hooks/
+node_modules/
+platforms/
+
+# NativeScript Template
+*.js.map
+*.js
+!webpack.config.js
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+.idea
+.cloud
+.project
+tmp/
+typings/
+
+# misc
+npm-debug.log
+
+# app
+!*.d.ts
+!src/assets/fontawesome.min.css
+/report/
+.nsbuildinfo
+/temp/
+/src/tns_modules/
+
+# app uses platform specific scss which can inadvertently get renamed which will cause problems
+app/app.scss
+
+package-lock.json
diff --git a/apps/old/nativescript.config.ts b/apps/old/nativescript.config.ts
new file mode 100644
index 000000000..643d64257
--- /dev/null
+++ b/apps/old/nativescript.config.ts
@@ -0,0 +1,14 @@
+import { NativeScriptConfig } from '@nativescript/core';
+
+export default {
+	id: 'org.nativescript.dom.events.old',
+	appResourcesPath: '../../tools/assets/App_Resources',
+	android: {
+		v8Flags: '--expose_gc',
+		markingMode: 'none',
+	},
+	appPath: 'src',
+	cli: {
+		packageManager: 'npm',
+	},
+} as NativeScriptConfig;
diff --git a/apps/old/package.json b/apps/old/package.json
new file mode 100644
index 000000000..3a701a4f0
--- /dev/null
+++ b/apps/old/package.json
@@ -0,0 +1,14 @@
+{
+  "main": "./src/app.ts",
+  "description": "Old bespoke events",
+  "license": "SEE LICENSE IN <your-license-filename>",
+  "repository": "<fill-your-repository-here>",
+  "dependencies": {
+    "@nativescript/core": "8.4.1"
+  },
+  "devDependencies": {
+    "@nativescript/android": "~8.3.0",
+    "@nativescript/ios": "~8.3.0",
+    "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz"
+  }
+}
diff --git a/apps/old/project.json b/apps/old/project.json
new file mode 100644
index 000000000..98061d339
--- /dev/null
+++ b/apps/old/project.json
@@ -0,0 +1,65 @@
+{
+	"name": "apps-old",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "apps/old/src",
+	"projectType": "application",
+	"prefix": "nativescript",
+	"namedInputs": {
+		"default": ["{projectRoot}/**/*"],
+		"production": ["!{projectRoot}/**/*.spec.ts"]
+	},
+	"targets": {
+		"build": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"noHmr": true,
+				"production": true,
+				"uglify": true,
+				"release": true,
+				"forDevice": true
+			},
+			"dependsOn": [
+				{
+					"target": "build.all",
+					"projects": "dependencies"
+				}
+			]
+		},
+		"ios": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"platform": "ios"
+			},
+			"dependsOn": [
+				{
+					"target": "build.all",
+					"projects": "dependencies"
+				}
+			]
+		},
+		"android": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"platform": "android"
+			},
+			"dependsOn": [
+				{
+					"target": "build.all",
+					"projects": "dependencies"
+				}
+			]
+		},
+		"clean": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"clean": true
+			}
+		},
+		"lint": {
+			"executor": "@nrwl/linter:eslint",
+			"options": {
+				"lintFilePatterns": ["apps/old/**/*.ts"]
+			}
+		}
+	}
+}
diff --git a/apps/old/references.d.ts b/apps/old/references.d.ts
new file mode 100644
index 000000000..22bac92c6
--- /dev/null
+++ b/apps/old/references.d.ts
@@ -0,0 +1 @@
+/// <reference path="../../references.d.ts" />
diff --git a/apps/old/src/app-root.xml b/apps/old/src/app-root.xml
new file mode 100644
index 000000000..54e70d976
--- /dev/null
+++ b/apps/old/src/app-root.xml
@@ -0,0 +1,2 @@
+<Frame defaultPage="main-page">
+</Frame>
diff --git a/apps/old/src/app.scss b/apps/old/src/app.scss
new file mode 100644
index 000000000..f48bce1ce
--- /dev/null
+++ b/apps/old/src/app.scss
@@ -0,0 +1,2 @@
+@import 'nativescript-theme-core/scss/light';
+@import 'nativescript-theme-core/scss/index';
diff --git a/apps/old/src/app.ts b/apps/old/src/app.ts
new file mode 100644
index 000000000..a4c5c529a
--- /dev/null
+++ b/apps/old/src/app.ts
@@ -0,0 +1,3 @@
+import { Application } from '@nativescript/core';
+
+Application.run({ moduleName: 'app-root' });
diff --git a/apps/old/src/main-page.ts b/apps/old/src/main-page.ts
new file mode 100644
index 000000000..cb9b0f43f
--- /dev/null
+++ b/apps/old/src/main-page.ts
@@ -0,0 +1,7 @@
+import { EventData, Page } from '@nativescript/core';
+import { MainViewModel } from './main-view-model';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new MainViewModel();
+}
diff --git a/apps/old/src/main-page.xml b/apps/old/src/main-page.xml
new file mode 100644
index 000000000..08346203b
--- /dev/null
+++ b/apps/old/src/main-page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <Page.actionBar>
+    <ActionBar title="Plugin Demos" icon="" class="action-bar" />
+  </Page.actionBar>
+  <StackLayout class="p-20">
+    <ScrollView class="h-full">
+      <StackLayout>
+        <Button text="scrolling" tap="{{ viewDemo }}" class="btn btn-primary view-demo" />
+        <Button text="properties" tap="{{ viewDemo }}" class="btn btn-primary view-demo" />
+      </StackLayout>
+    </ScrollView>
+  </StackLayout>
+</Page>
diff --git a/apps/old/src/main-view-model.ts b/apps/old/src/main-view-model.ts
new file mode 100644
index 000000000..5e4241e07
--- /dev/null
+++ b/apps/old/src/main-view-model.ts
@@ -0,0 +1,9 @@
+import { Observable, Frame } from '@nativescript/core';
+
+export class MainViewModel extends Observable {
+	viewDemo(args) {
+		Frame.topmost().navigate({
+			moduleName: `plugin-demos/${args.object.text}`,
+		});
+	}
+}
diff --git a/apps/old/src/plugin-demos/.gitkeep b/apps/old/src/plugin-demos/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/old/src/plugin-demos/properties.ts b/apps/old/src/plugin-demos/properties.ts
new file mode 100644
index 000000000..69fd3f8e4
--- /dev/null
+++ b/apps/old/src/plugin-demos/properties.ts
@@ -0,0 +1,75 @@
+import { Button, EventData, Page, Switch, View, getViewById, Observable, Label, PropertyChangeData } from '@nativescript/core';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+
+	page.bindingContext = new DemoModel(page);
+}
+
+export class DemoModel extends Observable {
+	private readonly manualProfiling: Switch;
+	private readonly automatedProfiling: Button;
+	private readonly target: Label;
+
+	private automatedProfilingInProgress = false;
+
+	constructor(container: View) {
+		super();
+
+		this.manualProfiling = getViewById(container, 'manual-profiling') as Switch;
+		this.automatedProfiling = getViewById(container, 'automated-profiling') as Button;
+		this.target = getViewById(container, 'target') as Label;
+	}
+
+	toggleManualProfiling({ value }: PropertyChangeData): void {
+		console.log(`toggleManualProfiling changed to ${value}. manualProfiling:`, this.manualProfiling);
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	runAutomatedProfiling(): void {
+		if (this.automatedProfilingInProgress) {
+			return;
+		}
+
+		console.log(`runAutomatedProfiling. automatedProfiling:`, this.automatedProfiling);
+		this.automatedProfilingInProgress = true;
+		this.updateAutomatedProfilingEnabled();
+
+		const propName = 'arbitrary-prop';
+
+		// Initialise the target property so that the first property-setting action
+		// doesn't produce an outlier result due to taking a one-off code branch.
+		this.target.setProperty(propName, -1);
+
+		const onPropertyChange = () => {
+			// No-op
+		};
+
+		this.target.addEventListener(Observable.propertyChangeEvent, onPropertyChange, null);
+
+		const time = profile(() => {
+			for (let i = 0; i < 1000000; i++) {
+				this.target.setProperty(propName, i);
+			}
+		});
+
+		this.target.removeEventListener(Observable.propertyChangeEvent, onPropertyChange, null);
+
+		console.log(`1,000,000 runs of setProperty() took ${time} ms`);
+
+		this.automatedProfilingInProgress = false;
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	private updateAutomatedProfilingEnabled(): void {
+		this.automatedProfiling.isEnabled = !this.automatedProfilingInProgress && !this.manualProfiling.checked;
+	}
+}
+
+function profile(action: () => void) {
+	const start = global.isIOS ? (global as any).performance.now() : __time();
+	action();
+	const stop = global.isIOS ? (global as any).performance.now() : __time();
+
+	return stop - start;
+}
diff --git a/apps/old/src/plugin-demos/properties.xml b/apps/old/src/plugin-demos/properties.xml
new file mode 100644
index 000000000..92f5ecfe0
--- /dev/null
+++ b/apps/old/src/plugin-demos/properties.xml
@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <Page.actionBar>
+    <ActionBar title="Properties" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+
+  <ScrollView scroll="{{ onScroll }}">
+    <StackLayout>
+      <FlexboxLayout>
+        <Label text="Manual profiling" />
+        <Switch id="manual-profiling" checked="false" checkedChange="{{ toggleManualProfiling }}" />
+      </FlexboxLayout>
+
+      <Button id="automated-profiling" text="Automated profiling" tap="{{ runAutomatedProfiling }}" class="btn btn-primary" />
+
+      <Label id="target" text="Event target" class="bg-gold" />
+    </StackLayout>
+  </ScrollView>
+</Page>
diff --git a/apps/old/src/plugin-demos/scrolling.ts b/apps/old/src/plugin-demos/scrolling.ts
new file mode 100644
index 000000000..c22352ff0
--- /dev/null
+++ b/apps/old/src/plugin-demos/scrolling.ts
@@ -0,0 +1,54 @@
+import { PropertyChangeData } from '@nativescript/core/data/observable';
+import { Button, EventData, Page, Switch, View, getViewById, ScrollEventData, ScrollView } from '@nativescript/core';
+import { DemoSharedBase } from '@demo/shared';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+
+	page.bindingContext = new DemoModel(page);
+}
+
+export class DemoModel extends Observable {
+	private readonly manualProfiling: Switch;
+	private readonly automatedProfiling: Button;
+	private readonly scrollView: ScrollView;
+
+	private automatedProfilingInProgress = false;
+
+	constructor(container: View) {
+		super();
+
+		this.manualProfiling = getViewById(container, 'manual-profiling') as Switch;
+		this.automatedProfiling = getViewById(container, 'automated-profiling') as Button;
+		this.scrollView = getViewById(container, 'scrollview') as ScrollView;
+
+		// sanity check
+		this.scrollView.once('scroll', () => console.log('ONCE scroll'));
+	}
+
+	toggleManualProfiling({ value }: PropertyChangeData): void {
+		console.log(`toggleManualProfiling changed to ${value}. manualProfiling:`, this.manualProfiling);
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	runAutomatedProfiling(): void {
+		if (this.automatedProfilingInProgress) {
+			return;
+		}
+
+		console.log(`runAutomatedProfiling. automatedProfiling:`, this.automatedProfiling);
+		this.automatedProfilingInProgress = true;
+		this.updateAutomatedProfilingEnabled();
+
+		this.automatedProfilingInProgress = false;
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	onScroll(e: ScrollEventData): void {
+		console.log(`[scroll]`);
+	}
+
+	private updateAutomatedProfilingEnabled(): void {
+		this.automatedProfiling.isEnabled = !this.automatedProfilingInProgress && !this.manualProfiling.checked;
+	}
+}
diff --git a/apps/old/src/plugin-demos/scrolling.xml b/apps/old/src/plugin-demos/scrolling.xml
new file mode 100644
index 000000000..57884ef18
--- /dev/null
+++ b/apps/old/src/plugin-demos/scrolling.xml
@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <Page.actionBar>
+    <ActionBar title="Scrolling" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+
+  <ScrollView id="scrollview" scroll="{{ onScroll }}">
+    <StackLayout>
+      <FlexboxLayout>
+        <Label text="Manual profiling" />
+        <Switch id="manual-profiling" checked="false" checkedChange="{{ toggleManualProfiling }}" />
+      </FlexboxLayout>
+
+      <Button id="automated-profiling" text="Automated profiling" tap="{{ runAutomatedProfiling }}" class="btn btn-primary" />
+
+      <StackLayout height="2000" backgroundColor="green" />
+    </StackLayout>
+  </ScrollView>
+</Page>
diff --git a/apps/old/tsconfig.json b/apps/old/tsconfig.json
new file mode 100644
index 000000000..4d3d35828
--- /dev/null
+++ b/apps/old/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDirs": [".", "../.."],
+		"baseUrl": ".",
+		"paths": {
+			"~/*": ["src/*"],
+			"@demo/shared": ["../../tools/demo/index.ts"]
+		}
+	}
+}
diff --git a/apps/old/webpack.config.js b/apps/old/webpack.config.js
new file mode 100644
index 000000000..17a21c5db
--- /dev/null
+++ b/apps/old/webpack.config.js
@@ -0,0 +1,24 @@
+const webpack = require('@nativescript/webpack');
+const { resolve } = require('path');
+
+module.exports = (env) => {
+  webpack.init(env);
+  webpack.useConfig('typescript');
+
+  webpack.chainWebpack((config) => {
+    // shared demo code
+    config.resolve.alias.set(
+      '@demo/shared',
+      resolve(__dirname, '..', '..', 'tools', 'demo')
+    );
+  });
+
+  // Example if you need to share images across demo apps:
+  // webpack.Utils.addCopyRule({
+  //   from: '../../../tools/images',
+  // 	to: 'images',
+  //   context: webpack.Utils.project.getProjectFilePath('node_modules')
+  // });
+
+  return webpack.resolveConfig();
+};
diff --git a/tools/workspace-scripts.js b/tools/workspace-scripts.js
index 45f12e1bc..99cfafafd 100644
--- a/tools/workspace-scripts.js
+++ b/tools/workspace-scripts.js
@@ -17,6 +17,42 @@ module.exports = {
     },
 		// app testing targets
 		apps: {
+      '...New...': {
+        script: `npx cowsay "New DOM Events 💎"`,
+        description: ` 🔻 New`,
+      },
+      new: {
+        clean: {
+          script: 'nx run apps-new:clean',
+          description: '⚆  Clean  🧹',
+        },
+        ios: {
+          script: 'nx run apps-new:ios',
+          description: '⚆  Run iOS  ',
+        },
+        android: {
+          script: 'nx run apps-new:android',
+          description: '⚆  Run Android  🤖',
+        },
+      },
+      '...Old...': {
+        script: `npx cowsay "Old bespoke events 🏚"`,
+        description: ` 🔻 Old`,
+      },
+      old: {
+        clean: {
+          script: 'nx run apps-old:clean',
+          description: '⚆  Clean  🧹',
+        },
+        ios: {
+          script: 'nx run apps-old:ios',
+          description: '⚆  Run iOS  ',
+        },
+        android: {
+          script: 'nx run apps-old:android',
+          description: '⚆  Run Android  🤖',
+        },
+      },
       "...Automated...": {
         script: `npx cowsay "These run fast, watch the fireworks! 🎆"`,
         description: ` 🔻 Automated test runner which executes e2e tests on the target platform 🎆`
diff --git a/workspace.json b/workspace.json
index 087d4d011..3b2ab1940 100644
--- a/workspace.json
+++ b/workspace.json
@@ -2,6 +2,8 @@
 	"version": 2,
 	"projects": {
 		"apps-automated": "apps/automated",
+		"apps-new": "apps/new",
+		"apps-old": "apps/old",
 		"apps-toolbox": "apps/toolbox",
 		"apps-ui": "apps/ui",
 		"core": "packages/core",