NativeScript Open-source framework for building truly native mobile apps with Angular, TypeScript or JavaScript. ## TJ VanToll ## @tjvantoll Progress $ ^{®} $ ![Image](/uploads/documents/2/d/3/8/2d38ce2a ## NativeScript is A free and open source framework for building truly native mobile apps with JavaScript. Use web skills, like TypeScript, Angular and CSS, and get native UI and performance on iOS and already know Open source framework for building truly native mobile apps with Angular, TypeScript or JavaScript. Get started Stay connected with NativeScript ## Thanks! ## @tjvantoll ![Image](/uploads/d

is an open source framework for creating native iOS and Android apps in Angular, TypeScript, or JavaScript. It was developed by Progress Telerik. NativeScript allows you to build web and mobile apps from sound knowledge on Object Oriented Programming and basic knowledge on Android and iOS development, JavaScript and Angular. If you are a beginner to any of these concepts, we suggest you to go through tutorials .... ii Table of Contents ..... iii 1. NativeScript — Introduction ..... vii Overview of JavaScript Frameworks ..... vii Overview of NativeScript ..... viii 2. NativeScript — Installation ..

cover today? 0 Rise of "JavaScript-driven Native" 0 Intro to NativeScript O NativeScript core concepts 0“Hello World” 0 Extending with plugins 0 Debugging JavaScript ## Why are we here? How did "JavaScript-Driven Native" ## Native UI driven by JavaScript Native App Native UI Native APIs JavaScript-to-Native bridge JavaScript Engine (Your app code runs here) ## N ## JavaScript-Driven c094296d3524a01c19342f25/p18_1.jpg) ## Native App Native UI Native APIs ## JavaScript-to-Native runtime JavaScript Engine (Your app code runs here) Plugin s Plugin s • Plugins created with

TJ VanToll | @tjvantoll ### nativescript.org N NativeScript ## Build truly native apps with JavaScript Develop iOS, Android and Windows Phone apps from a single code base GET STARTED VIEW IN GITHUB • A runtime for building and running native iOS, Android, and Windows Phone apps with a single, JavaScript code base ## Apple Apple Apple ## N ## JS $$ N\quad!= $$ • No DOM $$ \begin{array}{l} \text{N} Task 521 | Task 5 How does this work? ## NativeScript and JS VMs • NativeScript runs JavaScript on a JavaScript VM • JavaScriptCore on iOS • V8 on Android • JavaScriptCore on Windows var time = new

## Performance ## Lets dive into Performance issues • Everything in JavaScript defaults to being on the same thread. Too much work on main thread • Android nested layouts • Functions and objects defined Explore the possibility of building truly native, cross-platform mobile applications using your JavaScript skill—NativeScript! Nathan Walker, Nathaniel J. Anderson Foreword to 13 Wanfoll Principal

1_1.jpg) ## NativeScript → Open source framework for building truly native mobile apps with JavaScript → together with markup (XML/HTML) and CSS → and native code if you want and dare → Cross Platform: React Native Not bound to a specific framework No need writing ObjectiveC, Swift or Java {N} JavaScript has 100% access to native APIs Maturity: 0.52 vs 3.4 ## How does NativeScript work? ## How does APPLICATION CODE NATIVESCRIPT MODULES NATIVESCRIPT RUNTIME ANDROID IOS ## Application Code → JavaScript code → Page layouts in markup → CSS for styling APPLICATION CODE NATIVESCRIPT MODULES NATIVESCRIPT

based primitive in JavaScript ## What is RxJS? Push based primitive in JavaScript Ref implementation for TC39 Observable proposal ## What is RxJS? Push based primitive in JavaScript Domain specific language Observable proposal ## What is RxJS? Only external dependency to Angular (2x) Push based primitive in JavaScript Domain specific language that sits on top of JS Ref implementation for TC39 Observable proposal proposal ## What is RxJS? Only external dependency to Angular (2x) Push based primitive in JavaScript Domain specific language that sits on top of JS Ref implementation for TC39 Observable proposal Easy

Grunt and Gulp (seriously?!?) Karma + (Jasmine or Mocha) + Chai ## TypeScript • A super set of JavaScript developed by Microsoft • Implements classes, interfaces, inheritance, strict data typing, private • Angular comes with its own HTTP library which we can use to call out to external APIs - In Javascript, there are generally three approaches to dealing with async code: • Calbacks • Promises • Observables ## Redux & Angular 2 ## Redux in a Nutshell - Redux is a predictable state container for JavaScript applications - Instead of mutating the state directly, you specify the mutations you want to happen

☐ ☐ ☐ ? × ⚠ Installed Blank (JavaScript) Search (Ctrl+E) Drawer Navigation (JavaScript) NativeScript Type: NativeScript NativeScript Tab Navigation (JavaScript) Simple template with Drawer navigation navigation for Vanilla NativeScript apps using JavaScript Online Not finding what you are looking for? Open Visual Studio Installer DrawerNavigation1 C:\Users\totev\source\repos DrawerNavigation1

[Image](/uploads/documents/8/d/b/9/8db9ac5bcc659b52c457ba0296861a31/p16_1.jpg) ALTERNATIVES # JAVASCRIPT NATIVE How to Read and Write a Native Script (Change Your Mobile Strategy) Progress © ## POPULAR db9ac5bcc659b52c457ba0296861a31/p39_3.jpg) Xamarin.Forms Shared C# Backend PROS AND CONS # JAVASCRIPT NATIVE How to Read and Write a Native Script (Change Your Mobile Strategy) Progress © ## THE OLD the properties that can be set in CSS or through the style property of each View: |CSS Property|JavaScript Property|Description| |---|---|---| |color|color|Sets a solid-color value to the matched view's