From b3163059720fb47b9df98487ebbeaf091f7cbccc Mon Sep 17 00:00:00 2001 From: Vasil Chimev Date: Tue, 10 Jul 2018 08:18:35 +0200 Subject: [PATCH 1/4] docs(webpack): add custom application and activity section --- .../bundling-with-webpack.md | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/docs/performance-optimizations/bundling-with-webpack.md b/docs/performance-optimizations/bundling-with-webpack.md index b49159b90..d70a9354a 100644 --- a/docs/performance-optimizations/bundling-with-webpack.md +++ b/docs/performance-optimizations/bundling-with-webpack.md @@ -209,6 +209,41 @@ function logMessage(message) { } ``` +## Custom Application and Activity + +NativeScript provides a way to create custom `android.app.Application` and `android.app.Activity` implementations described in [this](https://docs.nativescript.org/core-concepts/android-runtime/advanced-topics/extend-application-activity) documentation article. In order to bundle such an application, it needs to be configured. + +### Extend Android Application + +If your project extends android application, it should be added as an [entry](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L71) to the `webpack.config.js` file. + +``` +entry: { + bundle: entryPath, + application: "./application.android", +}, +``` + +In this way, the source code of [`application.android.ts`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/app/application.android.ts) is bundled separately as `application.js` file which is loaded from the native `Application.java` class on launch. + +The `application.js` bundle file is independent of the `bundle.js` and `vendor.js` files and the reason for it is that they are not loaded so early in the application launch. That's why the logic in `application.android.ts` is needed to be bundled separately in order to be loaded by the native `Application.java` as early as needed on launch. + +> Note: This approach won't work if `aplication.android.ts` requires external modules. + +### Extend Android Activity + +If your project extends android activity, it should be added to the [`appComponents`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L19) array by an absolute path. + +``` +const appComponents = [ + "tns-core-modules/ui/frame", + "tns-core-modules/ui/frame/activity", + resolve(__dirname, "app/activity.android.ts"), +]; +``` + +In this way and With the default config, these components [get](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L109-L116) in the common *vendor.js* chunk and are required by the [`android-app-comopnents-loader`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L146-L149). + ## Debugging Common Errors Webpack bundling can fail for different reasons. It sometimes fails to resolve certain modules, or it generates code that breaks at runtime. We'll try to cover a few common failure reasons with steps to resolve them in the following sections. From 8ab64c2ca9edb0f7d13efe12700b7059e342107f Mon Sep 17 00:00:00 2001 From: Vasil Chimev Date: Mon, 16 Jul 2018 14:35:18 +0300 Subject: [PATCH 2/4] docs(webpack): minor tweaks --- docs/performance-optimizations/bundling-with-webpack.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/performance-optimizations/bundling-with-webpack.md b/docs/performance-optimizations/bundling-with-webpack.md index d70a9354a..61ef9434b 100644 --- a/docs/performance-optimizations/bundling-with-webpack.md +++ b/docs/performance-optimizations/bundling-with-webpack.md @@ -215,7 +215,7 @@ NativeScript provides a way to create custom `android.app.Application` and `andr ### Extend Android Application -If your project extends android application, it should be added as an [entry](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L71) to the `webpack.config.js` file. +If your project extends an Android application, it should be added as an [entry](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L71) to the `webpack.config.js` file. ``` entry: { @@ -226,13 +226,13 @@ entry: { In this way, the source code of [`application.android.ts`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/app/application.android.ts) is bundled separately as `application.js` file which is loaded from the native `Application.java` class on launch. -The `application.js` bundle file is independent of the `bundle.js` and `vendor.js` files and the reason for it is that they are not loaded so early in the application launch. That's why the logic in `application.android.ts` is needed to be bundled separately in order to be loaded by the native `Application.java` as early as needed on launch. +The `application.js` bundle file is independent of the `bundle.js` and `vendor.js` files and the reason for this is that they are not loaded so early in the application launch. That's why the logic in `application.android.ts` is needed to be bundled separately in order to be loaded by the native `Application.java` as early as needed on launch. > Note: This approach won't work if `aplication.android.ts` requires external modules. ### Extend Android Activity -If your project extends android activity, it should be added to the [`appComponents`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L19) array by an absolute path. +If your project extends an Android activity, it should be added to the [`appComponents`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L19) array by an absolute path. ``` const appComponents = [ @@ -242,7 +242,7 @@ const appComponents = [ ]; ``` -In this way and With the default config, these components [get](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L109-L116) in the common *vendor.js* chunk and are required by the [`android-app-comopnents-loader`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L146-L149). +In this way and with the default config, these components [get](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L109-L116) in the common *vendor.js* chunk and are required by the [`android-app-components-loader`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L146-L149). ## Debugging Common Errors From 56ef344e5b0b623a4f4dc9aff20e8d7ad18ccbc9 Mon Sep 17 00:00:00 2001 From: Vasil Chimev Date: Tue, 17 Jul 2018 09:44:46 +0300 Subject: [PATCH 3/4] docs(webpack): update extend article Move custom application and activity webpack configuration information to the `extend-application-activity.md` article. --- .../extend-application-activity.md | 31 +++++++++++++++-- .../bundling-with-webpack.md | 33 +------------------ 2 files changed, 30 insertions(+), 34 deletions(-) diff --git a/docs/core-concepts/android-runtime/advanced-topics/extend-application-activity.md b/docs/core-concepts/android-runtime/advanced-topics/extend-application-activity.md index f10c8433e..086aaf0a6 100644 --- a/docs/core-concepts/android-runtime/advanced-topics/extend-application-activity.md +++ b/docs/core-concepts/android-runtime/advanced-topics/extend-application-activity.md @@ -78,14 +78,29 @@ The following steps are needed to create custom native `android.app.Application` >This modification is required by the native platform; it basically tells Android that your custom `Application` class will be used as the main entry point of the application. +4. In order to build the project with [webpack bundling](../../../performance-optimizations/bundling-with-webpack.md) and [optimizations](../../../performance-optimizations/bundling-with-webpack.md#optimizations), the extended Android application should be added as an [entry](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L71) to the `webpack.config.js` file. + + ```javascript + entry: { + bundle: entryPath, + application: "./application.android", + }, + ``` + + In this way, the source code of [`application.android.ts`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/app/application.android.ts) is bundled separately as `application.js` file which is loaded from the native `Application.java` class on launch. + + The `application.js` bundle file is independent of the `bundle.js` and `vendor.js` files and the reason for this is that they are not loaded so early in the application launch. That's why the logic in `application.android.ts` is needed to be bundled separately in order to be loaded by the native `Application.java` as early as needed on launch. + + > Note: This approach won't work if `aplication.android.ts` requires external modules. + ## Extending Activity The core modules ship with a default `android.app.Activity` implementation, which ensures they alone are sufficient to bootstrap an empty NativeScript application, without forcing users to declare their custom `Activity` in every project. When needed, however, users may still specify custom `Activity` implementation and use it to bootstrap the application. The following code demonstrates how this can be done: -1. Create a new JavaScript file in your `app` folder - name it `activity.android.js` +1. Create a new JavaScript file in your `app` folder - name it `activity.android.js` >Note the `*.android` suffix - we want this file packaged for Android only. -2. Declare the extend: +2. Declare the extend: ```javascript const frame = require("ui/frame"); @@ -180,5 +195,17 @@ The core modules ship with a default `android.app.Activity` implementation, whic android:configChanges="keyboardHidden|orientation|screenSize"> ``` +4. In order to build the project with [webpack bundling](../../../performance-optimizations/bundling-with-webpack.md) and [optimizations](../../../performance-optimizations/bundling-with-webpack.md#optimizations), the extended Android activity should be added to the [`appComponents`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L19) array by an absolute path. + + ```javascript + const appComponents = [ + "tns-core-modules/ui/frame", + "tns-core-modules/ui/frame/activity", + resolve(__dirname, "app/activity.android.ts"), + ]; + ``` + + In this way and with the default config, these components [get](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L109-L116) in the common *vendor.js* chunk and are required by the [`android-app-components-loader`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L146-L149). + ## See Also * [How Extend Works](../generator/extend-class-interface.md) diff --git a/docs/performance-optimizations/bundling-with-webpack.md b/docs/performance-optimizations/bundling-with-webpack.md index 61ef9434b..9c8ef3e94 100644 --- a/docs/performance-optimizations/bundling-with-webpack.md +++ b/docs/performance-optimizations/bundling-with-webpack.md @@ -211,38 +211,7 @@ function logMessage(message) { ## Custom Application and Activity -NativeScript provides a way to create custom `android.app.Application` and `android.app.Activity` implementations described in [this](https://docs.nativescript.org/core-concepts/android-runtime/advanced-topics/extend-application-activity) documentation article. In order to bundle such an application, it needs to be configured. - -### Extend Android Application - -If your project extends an Android application, it should be added as an [entry](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L71) to the `webpack.config.js` file. - -``` -entry: { - bundle: entryPath, - application: "./application.android", -}, -``` - -In this way, the source code of [`application.android.ts`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/app/application.android.ts) is bundled separately as `application.js` file which is loaded from the native `Application.java` class on launch. - -The `application.js` bundle file is independent of the `bundle.js` and `vendor.js` files and the reason for this is that they are not loaded so early in the application launch. That's why the logic in `application.android.ts` is needed to be bundled separately in order to be loaded by the native `Application.java` as early as needed on launch. - -> Note: This approach won't work if `aplication.android.ts` requires external modules. - -### Extend Android Activity - -If your project extends an Android activity, it should be added to the [`appComponents`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L19) array by an absolute path. - -``` -const appComponents = [ - "tns-core-modules/ui/frame", - "tns-core-modules/ui/frame/activity", - resolve(__dirname, "app/activity.android.ts"), -]; -``` - -In this way and with the default config, these components [get](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L109-L116) in the common *vendor.js* chunk and are required by the [`android-app-components-loader`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L146-L149). +NativeScript provides a way to create custom `android.app.Application` and `android.app.Activity` implementations. Please, refer to [this](../core-concepts/android-runtime/advanced-topics/extend-application-activity) documentation article for a detail description of how to achieve these as well as how to configure and bundle such a project. ## Debugging Common Errors From adaf1de8db125fea9c6239b5adcd21bdb40a07e2 Mon Sep 17 00:00:00 2001 From: Vasil Chimev Date: Tue, 17 Jul 2018 16:42:43 +0300 Subject: [PATCH 4/4] docs(webpack): minor tweaks --- .../advanced-topics/extend-application-activity.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/core-concepts/android-runtime/advanced-topics/extend-application-activity.md b/docs/core-concepts/android-runtime/advanced-topics/extend-application-activity.md index 086aaf0a6..2ecb93b53 100644 --- a/docs/core-concepts/android-runtime/advanced-topics/extend-application-activity.md +++ b/docs/core-concepts/android-runtime/advanced-topics/extend-application-activity.md @@ -78,7 +78,7 @@ The following steps are needed to create custom native `android.app.Application` >This modification is required by the native platform; it basically tells Android that your custom `Application` class will be used as the main entry point of the application. -4. In order to build the project with [webpack bundling](../../../performance-optimizations/bundling-with-webpack.md) and [optimizations](../../../performance-optimizations/bundling-with-webpack.md#optimizations), the extended Android application should be added as an [entry](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L71) to the `webpack.config.js` file. +4. In order to build the app with [webpack](../../../performance-optimizations/bundling-with-webpack.md), the extended Android application should be added as an [entry](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L71) to the `webpack.config.js` file. ```javascript entry: { @@ -89,7 +89,7 @@ The following steps are needed to create custom native `android.app.Application` In this way, the source code of [`application.android.ts`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/app/application.android.ts) is bundled separately as `application.js` file which is loaded from the native `Application.java` class on launch. - The `application.js` bundle file is independent of the `bundle.js` and `vendor.js` files and the reason for this is that they are not loaded so early in the application launch. That's why the logic in `application.android.ts` is needed to be bundled separately in order to be loaded by the native `Application.java` as early as needed on launch. + The `bundle.js` and `vendor.js` files are not loaded early enough in the application launch. That's why the logic in `application.android.ts` is needed to be bundled separately in order to be loaded as early as needed in the application lifecycle. > Note: This approach won't work if `aplication.android.ts` requires external modules. @@ -195,7 +195,7 @@ The core modules ship with a default `android.app.Activity` implementation, whic android:configChanges="keyboardHidden|orientation|screenSize"> ``` -4. In order to build the project with [webpack bundling](../../../performance-optimizations/bundling-with-webpack.md) and [optimizations](../../../performance-optimizations/bundling-with-webpack.md#optimizations), the extended Android activity should be added to the [`appComponents`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L19) array by an absolute path. +4. In order to build the app with [webpack](../../../performance-optimizations/bundling-with-webpack.md), the absolute path to the file where the Android activity is extended should be added to the [`appComponents`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L19) array. ```javascript const appComponents = [