Monthly Archives: November 2018

The "tns preview" Feature

The all new "tns preview" feature in NativeScript 5.0 is very useful for testing small local projects and/or for new developers who want to try out NativeScript without installing all the build tools.    

However, the preview app has some limitations, some of them can be worked around.   The first is that you must have working internet as the link between the CLI to the preview app on the device is via cloud servers.   Your app is transmitted via the internet to your device; and the device creates another channel that is transmitted back to the CLI the console so you can see any errors that occurred. 

If your company has an issue with your app source code being transmitted out to the cloud; then make sure you don't use this feature. 

The second limitation is that only the plugins that come with the preview app can currently be used.   These are the only compiled plugins you can use:

Now, this is a decent list; but we currently have over 800 plugins available to NativeScript.    A number of these additional plugins can be used in the preview app.    There is two ways to work around the built in limitations of the Preview app.  However, only if the plugin is 100% pure javascript source (*).    If the plugin has no compiled code; then you can work around it easily by doing the following:

  1. npm i --save-dev nativescript-dev-webpack
  2. tns plugin add <plugin_name>
  3. tns preview --bundle

By using the --bundle command, it will use webpack to webpack your source code and then those 100% pure JS plugins will be transmitted to the app in one of the two bundles.  

The second way (if you don't want to use webpack, or webpack is breaking something) is to basically install the plugins into a different folder that will be synced via the preview function.

  1. Change to your "app/" directory (main directory that contains the app.js/app.ts file)
  2. npm i <plugin_name> --save
  3. In your source code do 'var X = require("~/node_modules/plugin_name");'     (or you can use the import statement, you still have to use "~/node_modules/" to allow the javascript engine to be able to figure out where the plugin actually resides, since it isn't in the normal location.

Again this technique will ONLY allow any 100% JavaScript plugins(*) to be used in NativeScript, anything that has a cocoapod, gradle, or jar/aar file won't work.    Everything inside the "app" directory is synced to the device, so these 100% JavaScript plugins will also be synced and then be usable.

(*) - It is possible that a 100% JS plugin won't work on Android.  Any plugins that actually requires the SBG (Static Binding Generator) to generate compiled Java code from the JS code can't work; as the Preview app has no ability to use any additional compiled code.

NativeScript 5.0 Released

It has been a long road getting to this point; but I'm happy to see that the NativeScript team released The final piece of the 5.0.  The CLI tool which was the final piece was finally released on Nov 2nd; the rest of the pieces have been released for a couple days.

5.0 adds a whole lot of new awesome features; however since several pieces have changed; I would highly recommend before uploading a 5.0 app to the app stores you do another full test of your application; testing everything as several low level framework items changed for both iOS and Android.

The quick list of some of the new features in 5.0

CLI Prompts

The cli now will prompt you for input; so when you type "tns create ProjectName" you will see something like this:

You can use the arrow keys to select an option, in this screen shot; the "Plain JavaScript" is chosen and so it is highlighted.

HMR - Hot Module Replacement

This is the feature most NativeScript developers have been waiting for; this is awesome.  You know the silly change a file app restarts; change another file app restarts livesync?    Now you can do this:  tns run --hmr

HMR, allows the page and JavaScript code to be updated dynamically (no more full app restarts) ; if you change a class the class may have to be re-instantiated (like in this example), but if you change other things, like functions, the state is preserved and the new function will be what is called the next time that function is needed.   All in all, this is very HOT!   (You do need to have the nativescript-dev-webpack as a developer dependency of your project for HMR support)

NativeScript Preview

QR Code

Preview allows you to preview the application without having xcode or android tools installed and building it.  It uses the already built playground preview application to preview the app so that you can see the app on your mobile phone.   It has the same limitations as the playground site; but for most developers getting started it is a quick and easy way to start playing around with programming application.    When you type:
tns preview

you will then see the qr code in your console.  Point the playground app's qr scanner at it and then your app will start running on your phone.   Please note the entire application is uploaded to the cloud; which then your phone links to.  So if this is an issue with your company  don't use this feature.

Internal Changes

Android Core modules is now descended from the Google Support libraries; this opens up many more visual plugins and makes the app a lot more modern and compatible.   One word of caution this did require them to do a bit of reworking of several parts of the base code for android.  Their is the likely potential for new bugs to appears in areas that were bug free before.  So heavily test your app before releasing it to the stores.

iOS Core modules now have a new way to do the safe areas; this also has required a lot of reworking and so the same warning applies.  Test your app thoroughly to make sure that something in this area won't cause you any issues.  

Other android specific changes:

  • now using the v8 engine, v6.9.427.23.
  • before-plugins.gradle support
  • SBG will fail if their is a JSParser issue
  • JSParser fix for Decorators
  • Runtime issue fix with support > 26 on devices < 23.
  • Gradle is now using 3.2
  • Building is even faster now

Other iOS specific changes:

  • Typing generation improvements
  • Webkit is now using 11.4
  • Several marshalling to native from JS issues fixed.

Other specific changes:

  • Many bugs fixed
  • Webpack Vue  bundling support
  • Angular memory leak fixed
  • Styling changes to support dynamic theming
  • tslib helpers now global
  • appSettings now supports allKeys method
  • Touch event pass through now supported

Updating NativeScript

To get updated; you first need to do:
npm i -g nativescript@latest

That will get you the latest version of NativeScript CLI; once you have it; do a "tns --version" and verify it prints out "5.x.x".  Then do a "tns doctor" to verify your environment is up to date and has all the newest support tools you need for a successful build.  

To update a project; you need to do the following:

Latest Runtimes:
tns platform remove android && tns platform add android@latest
tns platform remove ios && tns platform add ios@latest

Latest Core modules:
npm r tns-core-modules --save
npm i tns-core-modules@latest --save

To install Webpack & HMR support:
npm i nativescript-dev-webpack@latest --save-dev
Note: you need to have nativescript-dev-webpack as a development dependency for HMR to work.  

To install latest NativeScript Angular plugin
npm i nativescript-angular@latest --save
You will then need to install the actual angular bits; which as of this post v6 is currently supported.

Known issues