SLIDE 1
Introducing NativeScript TJ VanToll | @tjvantoll nativescript.org - - PowerPoint PPT Presentation
Introducing NativeScript TJ VanToll | @tjvantoll nativescript.org - - PowerPoint PPT Presentation
Introducing NativeScript TJ VanToll | @tjvantoll nativescript.org NativeScript Timeline 0.9 Public Beta March 5 th , 2015 1.0 Go-live license Windows Phone support May 2015 What is NativeScript? A runtime for
SLIDE 2
SLIDE 3
NativeScript Timeline
- 0.9
- Public Beta
- March 5th, 2015
- 1.0
- Go-live license
- Windows Phone support
- May 2015
SLIDE 4
What is NativeScript?
- A runtime for building and running native iOS,
Android, and Windows Phone apps with a single, JavaScript code base
SLIDE 5
- Bridge
SLIDE 6
- No DOM
- No cross compilation
!= !=
SLIDE 7
NativeScript Android example
Output:
SLIDE 8
SLIDE 9
NativeScript iOS example
SLIDE 10
SLIDE 11
How does this work?
SLIDE 12
NativeScript and JS VMs
- NativeScript runs JavaScript on a JavaScript VM
- JavaScriptCore on iOS
- V8 on Android
- JavaScriptCore on Windows
SLIDE 13
- Runs on V8
- Runs on JavaScriptCore
SLIDE 14
Gathering Native APIs
- NativeScript uses reflection to build a list of
available APIs for each platform.
- For optimal performance, this metadata is pre-
generated, and injected into the app package at build time.
SLIDE 15
Injecting native APIs
- V8/JavaScript
Core have APIs to inject global variables
SLIDE 16
Invoking native APIs
- V8/JavaScriptCore have C++ callbacks for JS function
calls and property accesses.
- The NativeScript runtime uses those callbacks to
translate JS calls into native calls.
- On iOS, you can directly call Objective-C APIs from C+
+ code.
- On Android, NativeScript uses Android’s JNI (Java
Native Interface) to make the bridge from C++ to Java.
SLIDE 17
- 1) The V8 function callback runs.
- 2) The NativeScript runtime uses its metadata to
know that Time() means it needs to instantiate an android.text.format.Time object.
- 3) The NativeScript runtime uses the JNI to
instantiate an android.text.format.Time object and keeps a reference to it.
SLIDE 18
- 4) The NativeScript runtime returns a JS object that
proxies the Java Time object.
- 5) Control returns to JS where the proxy object
gets stored as a local time variable.
SLIDE 19
SLIDE 20
So do you only write native code?
No
SLIDE 21
TNS modules
- NativeScript-provided modules that provide cross-
platform functionality.
- There are dozens of them and they’re easy to write
yourself.
- TNS modules follow Node module’s conventions
(CommonJS).
SLIDE 22
TNS file module
SLIDE 23
HTTP module example
SLIDE 24
Custom TNS modules
SLIDE 25
Using the custom device module
SLIDE 26
Community modules
- https://github.com/alejonext/NativeNumber
- Someone created this 7 hours after the NativeScript public
release.
SLIDE 27
But how do I turn this into an app?
SLIDE 28
Two ways to use NativeScript
1) 2)
SLIDE 29
- Backend-as-a-service
- Push notifications, cloud data, file storage, and more
- Analytics
- AppBuilder
- Cloud builds (build iOS apps on Windows, Windows Phone apps on
a Mac)
- NativeScript debugging and tooling
- Automated app testing
- And more!
http://telerik.com/platform
SLIDE 30
https://www.telerik.com/purchase/platform
SLIDE 31
NativeScript CLI
- Free and open source
- https://github.com/nativescript/nativescript-cli
SLIDE 32
NativeScript CLI requirements
- https://github.com/nativescript/nativescript-
cli#system-requirements
- Xcode, Xcode CLI tools, iOS SDK
- JDK, Apache Ant, Android SDK
SLIDE 33
Starting a new project
SLIDE 34
Running on iOS
SLIDE 35
Running on Android
SLIDE 36
SLIDE 37
app.js
SLIDE 38
Pages
- XML markup structure
- Elements (e.g. <Page>, <Label>) are TNS
modules
SLIDE 39
Data binding
SLIDE 40
Data binding improved
SLIDE 41
CSS
SLIDE 42
http://docs.nativescript.org/styling#supported- properties
SLIDE 43
Demo time!
SLIDE 44
Contribute! (nativescript.org/contribute)
SLIDE 45
Follow NativeScript
- @nativescript
- https://nativescript.org/blog
SLIDE 46
Questions?
- TJ VanToll | @tjvantoll
SLIDE 47