A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++...
Transcript of A Lap Around NativeScript - TJ VanToll · Invoking native APIs • V8/JavaScriptCore have C++...
![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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/1.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/2.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/3.jpg)
• 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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/4.jpg)
• 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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/5.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/6.jpg)
![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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/7.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/8.jpg)
![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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/9.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/10.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/11.jpg)
• 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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/12.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/13.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/14.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/15.jpg)
![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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/16.jpg)
![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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/17.jpg)
![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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/18.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/19.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/20.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/21.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/22.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/23.jpg)
• 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://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/24.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/25.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/26.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/27.jpg)
![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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/28.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/29.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062602/5f020bd47e708231d4024f13/html5/thumbnails/30.jpg)
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