Nativescript allows building native mobile apps using JavaScript and CSS. It works by injecting native APIs into JavaScript so they can be accessed directly. This allows using native UI controls and hardware capabilities while coding in a familiar language. Nativescript apps are compiled to platform-specific code, so they are true native apps that can be submitted to app stores. It supports Angular for building apps with common code shared across platforms.

1. Nativescript
for Angular2
Chris Noring
Google Developer Expert
Front end Developer
at OVO Energy

2. About me
chris_noring

3. What’s out there for building
apps?

4. App store and market place = plan for monetizing
+ It also has
Built in features like
camera,
gps,
push notifications
+ Has access to
Native
swift, objective-c
java
- Usually needs
one dev team per platform $$$

5. Web apps
One team, only needs to know javascript + css
+ Cost less
- Limited access to hardware
- Browser support, increase maintenance and dev time
- Monetizing?
Will cost time and money to make it work well on all browsers also conti
- Doesn’t feel like native, its a compromise
+ Great for simple scenarios like a responsive version of t
geoposition

6. Hybrid frameworks
- You need to learn its api
rendering in web views, not truly native UI
+ It is possible to use an App Store
- Limited access to hardware
but the support is getting better and better
WebRTC*
WebGL
WebAudio
IndexedDB
Web Components*
Utilize Hardware Acceleratio
Remote Debugging*
- More and more cool features
are being supported
just a regular mobile optimized website, written in CSS, HTML and JavaScript, that is display
Ionic
Cordova
Phonegap
Titanium React Native

7. Progressive web apps
+ Caches
Is this the future?
- Monetizing?
+ Feels like an app
- Not great support on Safari yet
+ Progressive enhancement
better features with better browser and better broadband
+ Push notifications

8. So how does nativescript fit
in?

9. It’s NOT web although javascript, so no DOM
It targets actual apis
Its supports hardware due to being actual native
BUT you can use your javascript and css skills
AND you can use your native developers because
THEY KNOW THE API
It’s NOT either javascript or native folks, ITS BOTH

10. Nativescript
killer features
You can style native ui with css
You can use javascript OR angular 2 with typescript
free and open source framework for building native iOS and Android apps using JavaScript and C
You can access native apis with javascript
it’s free
It has hardware accelerated animations
You can monetise cause you can use App Store and markets
It’s pluggable, you can use and write your own plugins

11. How does it work?

12. Nativescript runtime uses
Javascript virtual machines
executed by V8.
is JIT compiled and
v8 JavaScriptCore
Android iOS
how does v8 know what android.text.format.Time() is?
var time = new android.text.format.Time();
this is javascript

13. NativeScript uses it to
inject APIs that let you access native code.
nativescript
inject android/ios object to
v8 or Javascript Core
There are APIs on v8 that lets you affect the global scope
How to know what to inject?
JavaScriptCore has a similar mechanism that makes the same te
How to interpret the js code?

14. 1) NativeScript uses reflection to build the list of the APIs that are av
invokes a callback that native script can intercept, in that interceptio
2) android.text.format.Time()
javascript code
corresponding c++ callback
invokes JNI-bridge to
talk to native API
Android
invokes native API
directly
iOS

15. In conclusion
Nativescript investigates what to inject and injects metadat
A callback is connected to each executed javascript that na
C++ code on Android targets JNI ( c++ becomes java ) that
C++ on iOS talks to native API directly
And presto

16. Nativescript consists of
modules

17. Modules
camera.android.js
camera.ios.js
camera-common.js
selects the correct one at runtime
require(‘camera’)
camera
node_modules/ tns-core-modules
module
module
camera …
usage
everything is made up of modules

18. How easy is it to get started?

19. Preparing your environment
npm install nativescript -g
Windows
ecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https
Mac
ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"
tns doctor
verify your installation

20. Continued..
For android install genymotion
https://www.genymotion.com/
set path to android SDK

21. First app
scaffold
or
tns create my-app-name --ng
creates angular2 app
git clone https://github.com/NativeScript/sample-Groceries.git
angular 2 app for nativescript
Scaffolding saves a lot of time

22. What is the dev experience
like?

23. We got a plugin for vs code so we can set break points
We can use hot reload, so code is recompiled and rede
We can write and run unit tests

24. Hot reload
tns livesync platform —watch
1) compiles app
2) deploys to emulator/ device
repeats 1) + 2) on changes

25. Debug
tns debug platform
starts platform specific debugger
with option —debug-brk
—debug-brk
—start
—stop —emulator

26. set breakpoint
perform action
Build and start the application
Start Node Inspector
Launch Chrome browser
tns debug platform

27. Remote chromium debugger for Eclipse
https://www.nativescript.org/nativescript-for-visual-studio-code
Plugin for vs code
ext install nativescript

28. How hard is it to accomplish
something?

29. So we can be productive with all these components
we code in angular 2
we can easily extend with plugins
we can write our own plugins
we got,
ui components, we got layouts,http, css animations, gestures, hardware and more..

30. Controls with ng2
<Label class="lbl" [text]="title"></Label>
<Button (tap)="click()" text="Save new hero"></Button>
<TextField [(ngModel)]="status"></TextField>
<ListView [items]="todos" (itemTap)="tapped($event)" >
<template let-item="item" let-odd="odd" let-even="even">
</template>
</ListView>
one-way binding
event binding
two-way binding
So angular 2 with some new components

31. File system

32. Whats possible?
Create, Read, Update, Delete on files and folders
import * as fs from "file-system";
var documents = fs.knownFolders.documents();
var myFile = documents.getFile("Test_Write.txt");
myFile.writeText("Something")
.then(function () { }, err {});
myFile.readText()
.then(function (content) {
}, err {});
do something with
retrieved content

33. File demo

34. Layout

35. AbsoluteLayout
DockLayout
GridLayout
StackLayout
WrapLayout
Components ends up
exactly where you want them
x,y
Arranges children to outer edges,
last child takes up remaining space
columns and rows
Horizontally or vertically
follows orientation til space is filled
then wraps them into new column/row

36. Navigation

37. Navigation
Navigation is angular 2 router
if you know how that works
then you know how to build the app

38. CSS

39. CSS
Application-wide css, app.css
Component-specific css
@Component({
styleUrls : [‘pages/examples/list-
demo.component.css']
})
@Component({
style : ‘’
})
https://docs.nativescript.org/angular/ui/styling.html
Inline css
<Button text="inline style" style="background-color: green;"></Button>
<Button backgroundColor=“lightgray" >

40. Plugins

41. What is a native script plugin?
plugin
file.android.ts
file.ios.ts
package.json
lookup iOS and java implementation of the same thing
[NSDate date] new Date()).toString()
and add to respective file.platform.ts
write js-ified code corresponding to native api
NsDate.date() (new java.util.Date()).toString()
Is an npm package,
published or not, that exposes a native API

42. http://developer.telerik.com/featured/creating-nativescript-plugins-in-types
Great article to get started
http://plugins.telerik.com/nativescript
Telerik verified marketplace
https://docs.nativescript.org/plugins/plugins
More details
tns plugin add <Plugin>
tns plugin remove <Plugin>
Add/Remove
https://www.thepolyglotdeveloper.com/2016/07/create-native-ios-and-andr

43. Hardware

44. Camera
import * as cameraModule from 'camera';
cameraModule.takePicture({
width: 300,
height: 300,
keepAspectRatio: true
})
.then((picture) => {
console.log('picture taken');
this.source = picture;
})
<Image [src]="source"
stretch="none"
horizontalAlignment="center" >
</Image>
take picture
import a reference
Display image in control

45. Camera demo

46. A word about images
file system
<Image src="~/images/logo.png" stretch ="none" />
relative to the app folder
url
<Image src="https://www.google.com/images/errors/logo_sm_2.png" />
resource
<Image src="res://logo" stretch ="none" />
App_Resources
Android
iOS
Should be placed in resp platform

47. Geoposition

48. tns plugin add nativescript-geolocation
Install the plugin
Check if its enabled,
then ask for permission
import * as geolocation from "nativescript-geolocation";
if (!geolocation.isEnabled()) {
geolocation.enableLocationRequest();
}
So much for enabling, how to use?

49. geolocation.getCurrentLocation({
desiredAccuracy: 3,
updateDistance: 10,
maximumAge: 20000,
timeout: 20000})
.then(function(loc) {
if (loc) {
alert("Current location is: " + loc);
console.log("Current location is: " + loc);
}
}, function(e){
console.log("Error: " + e.message);
});
get location,
returns a promise
And just use a plugin to show the location
tns plugin add nativescript-google-sdk
Use an actual device to test this one
Once enabled, ask for location

50. Animation

51. ctrl.animate({
opacity: 0,
backgroundColor: new Color("Blue"),
translate: { x: 200, y: 0 },
scale: { x: 2, y: 2 },
rotate: 180,
duration: 800,
delay: 20,
iterations: 1,
curve: enums.AnimationCurve.easeIn
})
.then(() => {
console.log('animation done');
this.ypos += 20;
})
We can Rotate, scale, change opacity ..
What can we do?
translate
rotate
repeat animation
when done

52. Animation demo

53. Nativescript let’s you code an actual native
app using the API you know
using javascript
Just remember this..

54. Thank you for listening