Download - Nativescript with angular 2
![Page 1: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/1.jpg)
Nativescriptfor Angular2
Chris NoringGoogle Developer Expert
Front end Developer at OVO Energy
![Page 2: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/2.jpg)
About me
chris_noring
![Page 3: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/3.jpg)
What’s out there for building apps?
![Page 4: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/4.jpg)
App store and market place = plan for monetizing+ It also has
Built in features like camera, gps, push notifications
+ Has access toNative
swift, objective-c
java
- Usually needsone dev team per platform $$$
![Page 5: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/5.jpg)
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 continuous work because browsers get updated and breaks stuff
- Doesn’t feel like native, its a compromise
+ Great for simple scenarios like a responsive version of the homepage
geoposition
![Page 6: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/6.jpg)
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 hardwarebut the support is getting better and better
WebRTC*WebGL
WebAudioIndexedDB
Web Components*Utilize Hardware Acceleration
Remote Debugging*
- More and more cool features are being supported
A hybrid app is just a regular mobile optimized website, written in CSS, HTML and JavaScript, that is displayed in a webview
IonicCordova
Phonegap
Titanium React Native
![Page 7: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/7.jpg)
Progressive web apps
+ Caches
Is this the future?
- Monetizing?
+ Feels like an app
- Not great support on Safari yet
+ Progressive enhancementbetter features with better browser and better broadband
+ Push notifications
![Page 8: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/8.jpg)
So how does nativescript fit in?
![Page 9: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/9.jpg)
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
![Page 10: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/10.jpg)
Nativescript
killer featuresYou can style native ui with css
You can use javascript OR angular 2 with typescript
Is a free and open source framework for building native iOS and Android apps using JavaScript and CSS
You can access native apis with javascript
it’s free
It has hardware accelerated animationsYou can monetise cause you can use App Store and marketsIt’s pluggable, you can use and write your own plugins
![Page 11: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/11.jpg)
How does it work?
![Page 12: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/12.jpg)
Nativescript runtime usesJavascript 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
![Page 13: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/13.jpg)
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 technique possible for iOS.
How to interpret the js code?
![Page 14: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/14.jpg)
1) NativeScript uses reflection to build the list of the APIs that are available on the platform they run on.
invokes a callback that native script can intercept, in that interception c++ code is being run
2) android.text.format.Time()
javascript code
corresponding c++ callback
invokes JNI-bridge to talk to native API
Androidinvokes native API
directly
iOS
![Page 15: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/15.jpg)
In conclusionNativescript investigates what to inject and injects metadata based on runtime findings for android/ios
A callback is connected to each executed javascript that nativescript intercepts and runs c++ in its place
C++ code on Android targets JNI ( c++ becomes java ) that targets native API
C++ on iOS talks to native API directly
And presto
![Page 16: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/16.jpg)
Nativescript consists of modules
![Page 17: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/17.jpg)
Modules
camera.android.jscamera.ios.jscamera-common.js
selects the correct one at runtime
require(‘camera’)camera
node_modules/ tns-core-modulesmodulemodulecamera …
usage
everything is made up of modules
![Page 18: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/18.jpg)
How easy is it to get started?
![Page 19: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/19.jpg)
Preparing your environment
npm install nativescript -g
Windows@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"
Macruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"
tns doctorverify your installation
![Page 20: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/20.jpg)
Continued..For android install genymotion
https://www.genymotion.com/
set path to android SDK
![Page 21: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/21.jpg)
First appscaffold
ortns create my-app-name --ng
creates angular2 app
git clone https://github.com/NativeScript/sample-Groceries.gitangular 2 app for nativescript
Scaffolding saves a lot of time
![Page 22: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/22.jpg)
What is the dev experience like?
![Page 23: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/23.jpg)
We got a plugin for vs code so we can set break points
We can use hot reload, so code is recompiled and redeployed on change
We can write and run unit tests
![Page 24: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/24.jpg)
Hot reload
tns livesync platform —watch
1) compiles app 2) deploys to emulator/ devicerepeats 1) + 2) on changes
![Page 25: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/25.jpg)
Debugtns debug platform
starts platform specific debugger with option —debug-brk
—debug-brk—start —stop —emulator
![Page 26: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/26.jpg)
set breakpointperform action
Build and start the applicationStart Node Inspector Launch Chrome browser
tns debug platform
![Page 27: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/27.jpg)
Remote chromium debugger for Eclipse
https://www.nativescript.org/nativescript-for-visual-studio-codePlugin for vs code
ext install nativescript
![Page 28: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/28.jpg)
How hard is it to accomplish something?
![Page 29: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/29.jpg)
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..
![Page 30: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/30.jpg)
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"> <StackLayout [class.odd]="odd" [class.even]="even" > <Label [class.done]="item.done" text=“{{item.name}}"> </Label> </StackLayout> </template></ListView>
one-way binding
event binding
two-way binding
So angular 2 with some new components
![Page 31: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/31.jpg)
File system
![Page 32: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/32.jpg)
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
![Page 33: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/33.jpg)
File demo
![Page 34: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/34.jpg)
Layout
![Page 35: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/35.jpg)
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
![Page 36: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/36.jpg)
Navigation
![Page 37: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/37.jpg)
NavigationNavigation is angular 2 routerif you know how that works
then you know how to build the app
![Page 38: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/38.jpg)
CSS
![Page 39: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/39.jpg)
CSSApplication-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" >
![Page 40: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/40.jpg)
Plugins
![Page 41: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/41.jpg)
What is a native script plugin?
pluginfile.android.tsfile.ios.tspackage.json
lookup iOS and java implementation of the same thing [NSDate date] new Date()).toString()
and add to respective file.platform.tswrite 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
![Page 42: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/42.jpg)
http://developer.telerik.com/featured/creating-nativescript-plugins-in-typescript/
Great article to get started
http://plugins.telerik.com/nativescriptTelerik verified marketplace
https://docs.nativescript.org/plugins/pluginsMore details
tns plugin add <Plugin>tns plugin remove <Plugin>
Add/Remove
https://www.thepolyglotdeveloper.com/2016/07/create-native-ios-and-android-plugins-with-nativescript/
![Page 43: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/43.jpg)
Hardware
![Page 44: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/44.jpg)
Cameraimport * 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
![Page 45: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/45.jpg)
Camera demo
![Page 46: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/46.jpg)
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
AndroidiOS
Should be placed in resp platform
![Page 47: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/47.jpg)
Geoposition
![Page 48: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/48.jpg)
tns plugin add nativescript-geolocationInstall 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?
![Page 49: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/49.jpg)
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 locationtns plugin add nativescript-google-sdk
Use an actual device to test this one
Once enabled, ask for location
![Page 50: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/50.jpg)
Animation
![Page 51: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/51.jpg)
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
![Page 52: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/52.jpg)
Animation demo
![Page 53: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/53.jpg)
Nativescript let’s you code an actual native app using the API you know
using javascript
Just remember this..
![Page 54: Nativescript with angular 2](https://reader034.vdocuments.us/reader034/viewer/2022052418/5872ed3c1a28abfa548b7741/html5/thumbnails/54.jpg)
Thank you for listening