NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular

Embed Size (px)

Text of NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular

  • NativeScriptCross-platform mobile apps with JavaScript

  • Todd Anglin@toddanglin

    Burke Holland@burkeholland

  • Workshop Agenda

    Intro to NativeScript NativeScript core concepts Hello World Defining Views Debugging JavaScript Basic data binding Styling views with CSS

    Intro to Angular 2 concepts Angular 2 + NativeScript Navigating views BONUS

    Extending with plugins Adding animations Using Telerik Platform

    Ante Meridiem (9AM to Noon) Post Meridiem (1PM to 4PM)

  • Intro to NativeScriptHow did we get here?

  • 2013 2014 2015 2016 2017

    Early prototypes

    Core engineering

    Public launch

    Adoption ramp-up

    Mass adoption

    Project Timeline

  • Delivering on the overdue promise of


  • Swift/Obj-C Java .NET

  • Mobile WebHybridNative

    ("1st Gen" x-plat native)

  • We Web.But

    We need: Better offline support Access to device APIs Home screen icons Push notifications App monetization

  • Hybrid Promise

    100% Web

    100% NativeHybrid

    ReachCode/Skill Reuse

    RichnessPremium experience

    Device APIs

    Best of both?

  • Hybrid Reality

  • 80% coded 20%remaining

    80% of dev time

    Hybrid Reality

  • 80% coded 20%remaining

    80% of dev time 80% of dev time

    Hybrid Reality

  • Hybrid "Peak"

  • Hybrid Promise

    100% Web

    100% NativeHybrid

    ReachCode/Skill Reuse

    RichnessPremium experience

    Device APIs


  • Binary Choice


    Best experience One platform at a time

    Fast to market Compromise on UX

  • Binary Choice


    Fast to market Best experience

  • JavaScript-driven native

    Fast to market Best experience

  • "Hybrid"Web UI with limited access to

    native APIsNative App Shell

    WebViewPlugins Plugins

    Entire app lives here

  • Native App

    "JavaScript-driven Native"Native UI driven by JavaScript

    Native UI

    JavaScript-to-Native bridge

    JavaScript Engine(Your app code runs here)

    Native APIs

  • NativeScript(by Telerik)

    React Native(by Facebook)

    JavaScript-drive Native

  • Native App

    Native UI

    JavaScript-to-Native runtime

    JavaScript Engine(Your app code runs here)

    Native APIs

    Native App

    Native UI

    JavaScript Engine(Your app code runs here)

    Native APIsAPI




    API Wrapper

    API Wrapper

    API Wrapper

    API Wrapper

    Plugins created with JS/TypeScript Plugins created with native code

  • JavaScript-driven Native

    Share code Reuse existing skills/teams Reuse existing libraries

    Native UI (no WebView!) Full access to device APIs Immediate access to new OS


    Fast to market Best experience

  • What is NativeScript?

    Open source framework (ASLv2) Create native mobile apps for iOS, Android

    (and eventually Windows 10) Use JavaScript (web skills) Write once, run everywhere

    Share 100% code between iOS/Android Share 80% code with web

    Reuse popular plugins from NodeJS/iOS/Android

    Integrates deeply with Angular and TypeScript

  • With NativeScript

    No web views (platform native UI) Use JavaScript (or TypeScript) 100% access to ALL native APIs (even new APIs) Made for web developers (JS, CSS, XML) Use Angular for web AND native mobile Reuse thousands of libraries from


  • The {N} difference

  • Demo available in the app stores in May

    Rich, animated, no compromise native UI(with shared UI code)


  • Measurable native UI performance(no jank)


  • Maximum code and skill reusability


    Video credit: Nathan Walker, {N} community member

  • How does NativeScript work?Under the covers

  • Generated at build time for OS & 3rd party

    native libraries

  • NativeScript Android example



  • NativeScript iOS example


  • Runs on V8 JavaScript VM

    Runs on JavaScriptCore VM

  • NativeScript Module Layer (NML)

    Abstractions on native APIs that provide unified, cross-platform API

    Dozens available out of the box Easy for developers to add IMPORTANT: All native APIs still available at JavaScript layer for platform-specific


    NativeScript modules follow Node modules conventions (CommonJS).

  • Example: NativeScript file module

  • Putting it all together

    Style with CSSDefine UI with XML Logic with JavaScript

  • Hello World

  • Two ways to use NativeScript



  • Command Line Interface (CLI)

    Use Command Prompt (Win) or Terminal (Mac, Linux)

    Free, Part of open source project

    Requires installation, local environment setup to build for iOS/Android (requires Mac for iOS)

    Integrates with Visual Studio Code (via plugin)

    WHY: More control, Free, Integrate with existing IDEs/code editors

    WHO: More technical developers used to using CLI, Open source developers

  • Telerik Platform

    Use AppBuilder or Screen Builder Subscription required

    Build in the cloud (no local install required)

    Easiest way to get started

    WHY: Richer tooling, Easier setup, Platform integrated

    WHO: Less technical developers, Prefer Platform integrations, Windows developers targeting iOS

  • Telerik PlatformPowerful visual tooling, cloud builds and

    more for NativeScript app developers.

  • NativeScript CLI requirements

    Xcode, Xcode CLI tools, iOS SDK

    JDK, Apache Ant, Android SDK

    $ tns doctor

  • Choice in Architecture

    JavaScriptWrite your application using plain JavaScript

    TypeScriptUse TypeScript to get

    Object Oriented features and compile time error


    AngularUse Angular to architect

    application. Reuse almost all code between web and


  • Angular & TypeScript

    Created by Google Open source Popular JavaScript framework

    for building complex web apps Angular 2 ships in May

    Created by Microsoft Open source Popular compiler for JavaScript that

    adds powerful language features Used to create Angular 2 and {N}

  • Starting a new project

  • {demo}

  • Running on iOS

    or$ tns emulate ios

  • Running on Android

    or$ tns emulate android

  • A better Android emulator

    Visual Studio Android Emulator


  • NativeScript LiveSync$ tns livesync //For all connected devices/emulators

    $ tns livesync android //Target specific platform

    $ tns livesync ios --emulator

    $ tns livesync ios --emulator --watch

    Refresh app with latest changes to JS, CSS, XML

    No re-build Works with

    emulators AND device

  • app.js

  • Defining Views

  • Pages

    XML markup structure Elements (e.g. , ) are

    NativeScript modules

  • LayoutsUI Elements

  • Layouts

    Absolute Dock Grid Stack Wrap

  • UI Widgets

    Button Label TextField TextView SearchBar Switch Slider Progress ActivityIndicator Image

    ListView HtmlView WebView TabView SegmentedBar DatePicker TimePicker ListPicker Dialogs

    Out-of-the-boxNative UI widgetsmeans Native behavior Native perf Native accessibility Parity with native

  • Native UI widgets

    Native API

    {N} Module button

    android.widget.Button UIButton

  • Label




  • GridLayout


    Label TextField


  • {demo}

  • Targeting Views Target based on:

    screens size minWH, minW, minH

    platform ios, android, windows

    Orientation land, port



  • TIP Platform specific capabilities are always available

    JavaScript: .android or .ios Markup: or Attributes: android: or ios:


    Write once by default.Target specific platform capabilities when needed.

  • {demo}

  • Handling EventsXML
  • Handling Eventstaplabel.on(gestures.GestureTypes.tap, function (args) {


    swipelabel.on(gestures.GestureTypes.swipe, function (args) {

    console.log("Swipe Direction: " + args.direction); });

    Multiple eventslabel.on("tap, doubleTap, longPress", function (args) {

    console.log("Event: " + args.eventName);});

    Tap Double Tap Long Press Swipe Pan Pinch Rotation Touch

  • {demo}

  • Debugging

  • If debugging is the process of removing software bugs, then programming must be the process of putting them in.

    - Edsger Dijkstra

  • Debugging Strategies Debug by alert (no really) Debug by console.log Debug by Developer Tools Debug by IDE

    Visual Studio Visual Studio Code

  • Debug By Alert

  • {demo}

  • Telerik UI for NativeScript

    - Open source- Widgets: ListView,

    SlideDrawer- No support

    UI for {N}

    - Widgets: Chart, Calendar, DataForm

    - No support in entry pricing

    - UI for {N} can buy this version for support

    UI for {N} PROFREE $199/$599 (with support)