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.
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
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
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
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
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
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
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
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