Hello, NativeScript

A light introduction to what NativeScript is and why you should care!

Transcript

1. Hello, NativeScript Jamie Birch
2. What framework do you use to develop mobile apps?
3. What about ?
4. Why use NativeScript? A 1-minute pitch • use web tech to develop a native app: • HTML, CSS, JS • React, Vue, Angular, Svelte, Solid… JQuery? • Tailwind • access all native APIs via JS NativeScript allows you to:
5. A taste of NativeScript The web tech export function HomeScreen({ navigation }) { return ( <flexboxLayout> <label className="text-2xl mb-4 font-bold text-center"> Hello World! </label> <button onTap={() => Dialogs.alert("Tapped!")}> Tap me for an alert </button> <button onTap={() => navigation.navigate("Two", { message: "Hello, world!" })} > Go to next screen </button> </flexboxLayout> ); }
6. A taste of NativeScript The native API access export function callPhoneNumber(platform, phoneNumber) { if(platform === "ios"){ UIApplication.sharedApplication.openURLOptionsCompletionHandler( NSURL.URLWithString(`tel://${phoneNumber}`), {}, (success) => console.log(success), ); return; } if(platform === "android"){ Application.android.foregroundActivity.startActivity( new android.content.Intent( android.content.Intent.ACTION_DIAL, android.net.Uri.parse(`tel:${phoneNumber}`), ) ); return; } }
7. How does NativeScript work?
8. How does NativeScript work? Architecture overview JS→native runtime Similar to App development framework Similar to Depends upon
9. How does NativeScript work? The JS→native runtime • It’s a V8-based runtime, like Node.js • It provides 1:1 JS bindings to all iOS or Android APIs • In future, will be an npm library (based on Node-API) • will work on Hermes, QuickJS, JSC, etc. • will work inside React Native, Node.js, Bun, and Deno
10. How does NativeScript work? The app development framework • It’s a framework for app dev, like React Native • It implements cross-platform UI components using the NativeScript runtime • These components are then adapted for React, Vue, Angular, etc.
11. Enough talk, let’s see a demo
12. Blackout Lighting Console, by nStudio (2024)
13. How is it run?
14. NativeScript joins the OpenJS Foundation (2020)
15. Conclusion • NativeScript is a natural tool for building native apps with web tech • It can be used standalone (as an end-to-end app framework) • … or just as a runtime (to access native APIs from JS) • It’s capable • It’s an openly governed community project with 23.8k GitHub stars • Give it a try!
16. Profile Tokyo Engineer at NativeScript TSC Chair @birch_js @shirakaba Thanks for watching! Jamie Birch