Techminded

Building Crossplatform Mobile Apps with JavaScript 2015 with Babel and Angular2 for NativeScript

NativeScript is a thing that allows you to develop mobile applications for Android and iOS with JavaScript compiled to kind a native code instead of executing inside WebView like in some frameworks. This means you can theoretically write once and just recompile your code for supported platforms. One more good thing is that it allows familiar things from JavaScript world like Angular framework in it’s best 2ng edition. By default NS uses TypeScript transpiler that allows you to code in some future version of JavaScript and compile it into version supported by most runtimes with Microsoft developed typescript transpiler. But also there is a option to write just with JavaScript and even switch to somehow not really future but standardized version of JavaScript plugging and unplugging features atomically with Babel transpiler. This way of usage is not really documented but quite easy to have enabled.

To do this, first of all install NativeScript tools and Android (or iOS) SDK just as described here:

http://docs.nativescript.org/angular/tutorial/ng-chapter-0

follow steps until you have Angular2 app up and running

Then install babel with npm as far as plugins needed to support most of angular2 and ES2016 features

npm install babel babel-preset-angular2  babel-preset-stage-0 babel-preset-es2015 babel-plugin-angular2-annotations babel-plugin-transform-class-properties babel-plugin-transform-decorators-legacy  babel-plugin-transform-flow-strip-types --save

created .babelrc file in project root with the following contents:

{
 "presets": ["es2015", "stage-0", "angular2"],
 "plugins": [
   "angular2-annotations",
   "transform-decorators-legacy",
   "transform-class-properties",
   "transform-flow-strip-types"
 ]
}

Now when everything is installed you should take a look at your .ts files, and:

remove generated .map and .js versions
rename .ts files to .js
remove access modificators (words public, private etc) as they are not yet supported (you should recheck this as it can be actually added) and check for other features in your code may be supported in TS but not yet in JS (babel)

rerun watcher in usual way and check for exceptions in console/emulator;)
 

Comments