Paweł Kondraciuk
NativeScript: Gentle introduction
2016-08-10
Who?
Frontend Developer
ex Python Developer
Where?
codequest
From?
Bialystok
What are the common solutions?
- Native ObjC/Swift, C#, Java
- Cross-compiled Xamarin
- Hybrid PhoneGap, Cordova
- Native JavaScript
Native JavaScript
- Fuse - declarative markup
- Tabris.js - Cordova modification
- Appcelerator Titanium - paid, we don't like that
- Facebook React Native - learn once, write everywhere
- Telerik NativeScript - ...
Architecture
- No DOM
- Native components
-
JavaScript Virtual Machine
-
Google V8 JavaScript Engine
-
WebKit JavaScript Core
- Node.js modules
Telerik NativeScript
- Goal: 100% shared code
- JavaScript, XML, CSS
- Direct access to native API
Direct API access
// Android
var time = new android.text.format.Time();
time.set(1, 0, 2015);
console.log(time.format("%D"));
// iOS
var alert = new UIAlertView();
alert.message = "Hello world!";
alert.addButtonWithTitle("OK");
alert.show();
How does it work?
var file = new java.io.File(path);
- Metadata lookup java.io.File()
- Type conversion string → java.lang.String
- Call dispatcher java.io.File() ←→ file = FileProxy
Why NativeScript accesses native API directly whereas React Native uses wrappers?
UI Thread
Single thread benefits
- Full native API access
- Native performance
Startup time
Blank app with a single button.
| Platform |
Run 1 |
Run 2 |
Run 3 |
| Native |
111ms |
105ms |
108ms |
| React Native |
358ms |
361ms |
353ms |
| Xamarin Forms |
484ms |
471ms |
469ms |
| Cordova |
613ms |
612ms |
609ms |
| NativeScript |
674ms |
672ms |
670ms |
Primitives
Marshaling of numbers between JavaScript and native.
1 000 000 calls to native code.
| Platform |
Run 1 |
Run 2 |
Run 3 |
| Native |
5ms |
4ms |
4ms |
| Xamarin |
27ms |
27ms |
28ms |
| NativeScript |
989ms |
998ms |
980ms |
| Appcelerator |
34444ms |
33969ms |
35916ms |
| React Native |
130600ms |
125140ms |
127220ms |
| Cordova |
351420ms |
357940ms |
356740ms |
Strings
Marshaling of strings between JavaScript and native.
100 000 calls to native code.
| Platform |
Run 1 |
Run 2 |
Run 3 |
| Native |
42ms |
42ms |
42ms |
| Xamarin |
248ms |
234ms |
244ms |
| NativeScript |
415ms |
444ms |
418ms |
| Appcelerator |
3215ms |
3198ms |
3180ms |
| React Native |
12358ms |
12464ms |
12547ms |
| Cordova |
36864ms |
36063ms |
35861ms |
Big Data
Marshaling of an array with 65 536 elements between JavaScript and native.
200 calls to native code.
| Platform |
Run 1 |
Run 2 |
Run 3 |
| Native |
768ms |
774ms |
759ms |
| NativeScript |
1135ms |
1129ms |
1138ms |
| Xamarin |
3763ms |
3906ms |
3789ms |
| Cordova |
9655ms |
9714ms |
9730ms |
| React Native |
47873ms |
47695ms |
47859ms |
| Appcelerator |
50091ms |
45149ms |
47927ms |
Single thread drawbacks
- Heavy jobs may cause frame rate drop
- Solution?
Background threads
- No simple mechanism in NativeScript...yet
- But lots of cases are already covered!
File system
var fs = require("file-system");
var documents = fs.knownFolders.documents();
documents.getFile("Test.txt").readText()
.then(function (content) {
// Successfully read the file's content.
});
Http
var http = require("http");
http.getJSON("https://httpbin.org/get")
.then(function (r) {
// Argument (r) is JSON!
});
// file.ios.js
exports.getFile = function(path) {
var fileManager = NSFileManager.defaultManager();
return fileManager.createFileAtPathContentsAttributes(path);
}
// file.android.js
exports.getFile = function(path) {
return new java.io.File(path);
}
// main.js
var File = require("./file");
var file = File.getFile("path");
Layouts
AbsoluteLayout
DockLayout
GridLayout
StackLayout
WrapLayout
NativeScript + Angular = <3
import {Component} from "@angular/core";
@Component({
selector: "my-app",
template: "<Label text=‘Hello!’></Label>"
})
export class AppComponent {}
Pros
- Lots of shared code
- Single code base
- Skill re-use
- Live reloading
- Available on all major platforms
- Native API access
- Cross-platform abstractions
Cons
- Cross-platform abstractions
- No mechanism for background threads
- No hot reloading :(
Summary
- You don't need Java/ObjC/C# for mobile development
- You can call native API using JavaScript
- NativeScript and NG2 can rock together
- App development for multiple platforms is easier than you think
Questions?
kondraciukpawel@gmail.com
See you next month at WarsawJS
