a lap around nativescript - tj vantoll · invoking native apis • v8/javascriptcore have c++...

30
A Lap Around NativeScript TJ VanToll | @tjvantoll

Upload: others

Post on 04-Jun-2020

6 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

A Lap Around NativeScript TJ VanToll | @tjvantoll

Page 2: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

What is NativeScript?

•  A runtime for building and running native iOS, Android, and Windows Phone apps with a single, JavaScript code base

Page 3: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

•  No DOM

•  No cross compilation

!=

!=

•  Direct access to native APIs in JS

!=

Page 4: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

•  Bridge

Page 5: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

NativeScript Android example

Output:

Page 6: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses
Page 7: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

NativeScript iOS example

Page 8: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses
Page 9: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

How does this work?

Page 10: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

NativeScript and JS VMs

•  NativeScript runs JavaScript on a JavaScript VM •  JavaScriptCore on iOS •  V8 on Android •  JavaScriptCore on Windows

Page 11: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

•  Runs on V8

•  Runs on JavaScriptCore

Page 12: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

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.

Page 13: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

Injecting native APIs

•  V8/JavaScript Core have APIs to inject global variables

Page 14: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

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.

Page 15: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses
Page 16: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses
Page 17: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses
Page 18: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

NativeScript file module

Page 19: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

HTTP module example

Page 20: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

Community modules

Page 21: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

But how do I turn this into an app?

Page 22: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

Two ways to use NativeScript

1)

2)

Page 23: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

•  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

Page 24: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

https://www.telerik.com/purchase/platform

Page 25: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

NativeScript CLI

•  Free and open source •  https://github.com/nativescript/nativescript-cli

Page 26: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

NativeScript CLI requirements

•  https://github.com/nativescript/nativescript-cli#system-requirements

•  Xcode, Xcode CLI tools, iOS SDK

•  JDK, Apache Ant, Android SDK

Page 27: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses
Page 28: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

Follow NativeScript

•  @nativescript •  https://nativescript.org/blog

Page 29: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

Contribute! (nativescript.org/contribute)

Page 30: A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses. • The NativeScript runtime uses

Thanks!

•  TJ VanToll | @tjvantoll •  Like this talk?

•  Rate it at http://bit.ly/next-vantoll-2

•  Hated this talk? •  Use http://bit.ly/next-holland