Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Conquering Mobile with JavaScript (June 2019)

Conquering Mobile with JavaScript (June 2019)

[UPDATED June 2019] Are you looking for a comprehensive mobile development strategy that can help you deliver “the right” mobile app for every project? Look no further. In these workshop slides, we’ll explore a complete workflow for building mobile apps with JavaScript (and TypeScript) that can be applied to any mobile project. From achieving maximum reach with Progressive Web Apps, to delivering maximum richness with native apps powered by JavaScript (via NativeScript), the techniques in this workshop will give you the tools you need to make sure your mobile app projects don’t fail. We'll even explore techniques for sharing code between PWAs and {N} for maximum flexibility.

Todd Anglin

June 10, 2019
Tweet

More Decks by Todd Anglin

Other Decks in Technology

Transcript

  1. Conquering Mobile with
    JavaScript
    PWAs and NativeScript
    @toddanglin

    View full-size slide

  2. Todd Anglin
    Cloud Advocate Lead @
    @toddanglin
    [email protected]

    View full-size slide

  3. Agenda
    PWAs NativeScript
    Intro Code
    Sharing
    AM PM

    View full-size slide

  4. It's 2019 and we're still talking about how
    to build mobile apps.

    View full-size slide

  5. What's the problem? Why are you here?

    View full-size slide

  6. 1. We've built apps, we need a better way
    2. We're tired of maintaining web AND apps

    View full-size slide

  7. What we thought.
    Web
    Presence
    Mobile
    Web
    Presence
    iOS
    app
    Android
    app
    Voice
    skills
    Chat
    bots
    My problem
    Some else's problem

    View full-size slide

  8. Reality.
    Web
    Presence
    Mobile
    Web
    Presence
    *Required *Required
    iOS
    app
    Android
    app
    Preferred for high
    transaction apps
    Voice
    skills
    Coming soon
    Chat
    bots
    Your problem

    View full-size slide

  9. Top 3 Problems with "App Strategy v1"
    1. Built native apps for iOS, Android –
    too expensive
    2. Built hybrid apps – too slow, too janky
    3. Built web apps – too limited

    View full-size slide

  10. Reality.
    Web
    Presence
    Mobile
    Web
    Presence
    *Required *Required
    iOS
    app
    Android
    app
    Preferred for high
    transaction apps
    Voice
    skills
    Coming soon
    Chat
    bots

    View full-size slide

  11. Okay, okay. But, really.
    PWA or native app?
    Which do I choose?

    View full-size slide

  12. Common skill set.
    Shared code.
    Best of both worlds.

    View full-size slide

  13. No compromises
    PWA iOS
    app
    Android
    app
    Maximum reach, discoverability
    "Light" experience
    Unlimited power, capability
    "Premium" experience

    View full-size slide

  14. Architecture
    Shared JavaScript/TypeScript
    Native app stuff Web app stuff
    Shared native UI
    iOS UI Android UI
    Web UI

    View full-size slide

  15. We'll be using JavaScript
    § It's everywhere
    § It's the web
    § With TypeScript, it's familiar and easy

    View full-size slide

  16. Learning Goals for Today
    1. Understand PWAs
    § What are they (really)?
    § How do you get started?
    § How do you debug?
    2. Understand NativeScript
    § What is it (really)?
    § How do you get started?
    § How do you debug?
    3. Understand code
    sharing
    § What is it? Why do you
    need it?
    § How do you get
    started?

    View full-size slide

  17. Progress Web Apps (PWAs)
    The next evolution of the web

    View full-size slide

  18. What are PWAs (really)?
    Why do we need them?
    And, what ever happened to Responsive Web Apps?

    View full-size slide

  19. Evolution of the web
    Web 1.0
    Responsive Web Design
    Progressive Web Apps
    Foundation
    Design for all
    Screens
    Design for offline

    View full-size slide

  20. Pillars of PWA
    1. Reliable
    2. Fast
    3. Engaging
    1. Progressive
    2. Responsive
    3. Connectivity
    independent
    4. App-like
    5. Safe
    6. Discoverable
    7. Re-engageable
    8. Installable
    9. Linkable

    View full-size slide

  21. "Progressive Web Apps use modern
    web capabilities to deliver an app-
    like user experience."
    "Progressive Web Apps work
    everywhere but are supercharged in
    modern browsers. ."

    View full-size slide

  22. Common Myths
    PWAs are a "Google" thing

    View full-size slide

  23. Common Myths
    PWAs only work on Android

    View full-size slide

  24. Common Myths
    PWAs only make sense on mobile

    View full-size slide

  25. Common Myths
    PWAs will replace mobile apps

    View full-size slide

  26. DEMO
    Let's look at some PWAs

    View full-size slide

  27. Works
    Offline
    Loads
    Fast
    "App-like"

    View full-size slide

  28. Service Workers
    web app manifest
    "App-like"

    View full-size slide

  29. Application Shell
    My App My App
    Settings
    Account
    Something else
    My App
    80º Orlando
    20º Boston
    Shell Content
    Cached on first visit Loaded from network

    View full-size slide

  30. Approaches to PWA
    1. App Shell + Server-Side Render (SSR) for Entry Pages
    2. App Shell + Client-Side Render (CSR) for Content
    3. Full SSR
    SSR == Server-Side Rendering

    View full-size slide

  31. PWA "minimum requirements"
    HTTPS Service Worker Web App Manifest

    View full-size slide

  32. Image source: "Your First Progressive Web App", Google Developers
    • App shell method
    • Make it work offline
    • Using Angular

    View full-size slide

  33. Demo
    Create baseline Angular Weather App

    View full-size slide

  34. Lighthouse
    • Check PWA
    readiness
    • Detect common
    problems
    • Audit performance

    View full-size slide

  35. Demo
    Lighthouse

    View full-size slide

  36. Service Worker
    § It's just a separate JavaScript file
    § Special type of web worker focused on controlling network
    requests
    § Runs separate from main thread
    § Can run in the background (when no tab open)
    § No direct DOM access
    § Communicates with main thread via postMessages
    § One service worker "per scope"
    § Updated (at least) every 24 hours

    View full-size slide

  37. Service Worker
    Server
    Your
    page
    Service
    Worker
    GET
    request
    HTTPS
    Cache
    Browser

    View full-size slide

  38. Service Worker
    Server
    Your
    page
    GET
    request
    HTTPS
    Older Browser
    if ('serviceworker' in navigator)

    View full-size slide

  39. Service Worker
    fetch cache
    API for retrieving
    content from the network
    API for storing/retrieving
    cached app content/data

    View full-size slide

  40. Service Worker Lifecycle
    First Install
    1. register
    2. install
    3. activate
    4. idle
    Updates
    1. install
    2. waiting
    3. activate
    4. idle
    navigator.serviceWorker.register('./service-worker.js')

    View full-size slide

  41. DEMO
    Starting our PWA with a Service Worker

    View full-size slide

  42. Cache strategies
    § Cache Only
    § Network Only
    § Cache First, Fallback on Network
    § Cache First, Then Network
    § Cache and Network Race
    § Network First, Fallback on Cache
    § Generic Fallback

    View full-size slide

  43. Cache Only
    For "static" resources that change with "versions" of your site
    Page
    Cache
    Service
    Worker
    1
    2
    3

    View full-size slide

  44. Network Only
    For resources that cannot (or should not) be cached
    Page
    Network
    Service
    Worker
    1
    2
    3

    View full-size slide

  45. Cache First, Fallback on Network
    Primary offline-first pattern: load from cache if available, otherwise fetch
    Page
    Cache
    Service
    Worker
    Network
    x
    1
    2
    3
    4

    View full-size slide

  46. Network First, Fallback on Cache
    Load new content by default, or show cache if offline
    Page
    Cache
    Service
    Worker
    Network
    x
    1
    2
    3
    4

    View full-size slide

  47. Cache First, Then Network
    Display cached resource immediately, then update when network responds
    Page
    Cache
    Service
    Worker
    Network
    1
    1
    2
    2
    3

    View full-size slide

  48. Cache and Network Race
    For cases where disk access may be slower than network response
    Page
    Cache
    Service
    Worker
    Network
    1
    2
    2
    3
    x
    3

    View full-size slide

  49. Generic Fallback
    For stuff that's not available in the cache OR on the network
    Page
    Cache
    Service
    Worker
    Network
    1
    2
    3 x
    5
    x
    4

    View full-size slide

  50. Offline Fallback Page

    View full-size slide

  51. § JavaScript library to handle service worker boilerplate
    workbox.routing.registerRoute(
    new RegExp('^https://fonts.(?:googleapis|gstatic).com/(.*)'),
    workbox.strategies.cacheFirst(),
    );
    workbox.routing.registerRoute(
    /\.(?:js|css)$/,
    workbox.strategies.staleWhileRevalidate(),
    );

    View full-size slide

  52. § PWA schematic automatically creates and manages service
    worker
    $ ng add @angular/pwa --project *project-name*
    $ ng build --prod

    View full-size slide

  53. ngsw-config.json
    assetGroups
    § Static resources versioned with your
    app
    § App shell, images, styles, etc
    § installMode/updateMode
    § lazy
    § prefetch
    dataGroups
    § Caching policy for resources not
    versioned with your app
    § API responses
    § cacheConfig
    § maxSize (# of entries)
    § maxAge
    § timeout
    § strategy
    § performance
    § freshness

    View full-size slide

  54. DEMO
    Using Angular PWA

    View full-size slide

  55. Web App Manifest
    § Evolution of mobile meta tags
    § Control PWA's home screen icon, splash screen, theme
    colors, start URL
    § Helps PWA feel more "app like" (on Android)

    View full-size slide

  56. Image Source: Addy Osmani, https://addyosmani.com/blog/getting-started-with-progressive-web-apps/
    Web App Install banner
    Requires:
    • Web App Manifest
    • HTTPS
    • Registered Service
    Worker
    • “Engagement
    heuristic”
    • 2 visits, at least 5 min
    between visits
    • 30 seconds “interacting”
    with domain

    View full-size slide

  57. Install Prompt
    § Events:
    § beforeinstallprompt
    § appinstalled
    Opportunity to
    intercept browser
    install banner and
    control when it is
    displayed

    View full-size slide

  58. Image Source: Addy Osmani, https://addyosmani.com/blog/getting-started-with-progressive-web-apps/
    Home screen icon &
    splash screen
    Define:
    • App icon
    • App name
    • App theme color
    • Splash screen
    background color
    • Orientation limits

    View full-size slide

  59. • name
    • short_name
    • icons
    • dir
    • lang
    Control Home Screen
    • start_url
    • display
    • fullscreen, standalone,
    minimal-ui, browser
    • orientation
    • any, natural, landscape, portrait,
    landscape-preferred,
    landscape-secondary, portrait-
    preferred, portrait-secondary
    • background_color
    • theme_color
    Control App Behavior
    • description
    • related_
    applications
    • prefer_
    related_
    applications
    • scope
    Extras

    View full-size slide

  60. DEMO
    Adding web app manifest

    View full-size slide

  61. Hosting
    § Azure for Static Sites
    § Uses Azure Storage
    § SUPER simple with VS
    Code
    § PWA friendly
    Azure account
    VS Code
    Azure Storage Plugin

    View full-size slide

  62. DEMO
    Publishing static site to Azure

    View full-size slide

  63. PWA Frameworks
    ReactPWA
    Angular CLI (!) vue-pwa-boilerplate
    Polymer App Toolbox
    Kendo UI Ionic

    View full-size slide

  64. Migrating an Existing Site
    § It's possible!
    § Best to start with a SPA architecture

    View full-size slide

  65. Additional Web APIs
    § Background Sync
    § Payment Request API
    § Web Push Notifications
    § Web VR

    View full-size slide

  66. Background Sync
    // Register your service worker:
    navigator.serviceWorker.register('/sw.js');
    // Then later, request a one-off sync:
    navigator.serviceWorker.ready.then(function(swRegistration) {
    return swRegistration.sync.register('myFirstSync');
    });
    self.addEventListener('sync', function(event) {
    if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
    }
    });
    In app js:
    In service worker:

    View full-size slide

  67. Apple Pay JS
    Image source: https://developers.bluesnap.com/docs/apple-pay

    View full-size slide

  68. [2] Requires full browser to be running to receive messages
    [3] Apple has custom API for desktop Safari

    View full-size slide

  69. PWA All the things?

    View full-size slide

  70. PWA Limits
    Safari Older Browsers Native APIs

    View full-size slide

  71. iOS & Safari
    § Some PWA features coming soon
    § BUT some potentially problematic differences

    View full-size slide

  72. Notable limits on iOS
    § Limited to 50 MB (files and data)
    § No background sync (or background execution)
    § No ability to lock screen orientation
    § No app splash screen*
    § No “installation” UX
    § Less control over status bar styling
    § PWAs ”restart” every time the user switches apps
    § PWAs don’t work in non-default iOS browsers (Chrome, Brave, etc)
    § Auto-purged PWA cache for infrequently used apps

    View full-size slide

  73. When to PWA
    § Content centric apps
    § Read only OR apps with simple inputs
    § No user expectation of App Store install
    § No need for extensive device hardware access
    § Less need for on device encryption, storage

    View full-size slide

  74. All web apps should
    implement PWA for a
    better web.
    (But you may still want a native mobile app.)

    View full-size slide

  75. LUNCH
    Resume @ 1:00 PM

    View full-size slide

  76. Download the NativeScript Playground & Preview apps
    PWA Weather App Source:
    https://github.com/toddanglin/NsPwaWeather
    While you wait…

    View full-size slide

  77. NativeScript
    Native mobile apps with JavaScript

    View full-size slide

  78. Hybrid (& PWA) Promise
    100%
    Web
    100%
    Native
    Hybrid
    Reach
    Code/Skill Reuse
    Richness
    Premium experience
    Device APIs
    Best of both?

    View full-size slide

  79. Binary Choice
    Native
    Hybrid
    Fast to market
    Best experience

    View full-size slide

  80. JavaScript-
    driven native
    Fast to market
    Best experience

    View full-size slide

  81. "PWA"
    Offline-enabled web apps with
    access to browser APIs
    Browser
    WebView
    Entire app lives here

    View full-size slide

  82. "Hybrid"
    Web UI with selective access to
    native APIs
    Native App Shell
    WebView
    Plugins Plugins
    Entire app lives here

    View full-size slide

  83. 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

    View full-size slide

  84. NativeScript
    (by Progress)
    React Native
    (by Facebook)
    “JavaScript-driven Native”

    View full-size slide

  85. “JavaScript-driven Native”
    • Share code
    • Reuse existing
    skills/teams
    • Reuse existing libraries
    • Native UI
    • Full access to device APIs
    • Immediate access to new
    OS features
    Fast to market
    Best experience

    View full-size slide

  86. • Open source
    • Cross-platform
    • JavaScript/TypeScript
    • Native iOS & Android UI
    Reuse web skills and
    libraries to build better
    mobile apps

    View full-size slide

  87. SKILLS & FRAMEWORKS TOOLS LIBRARIES

    View full-size slide

  88. Building a {N} app


    text=“Hello World”>



    1) Layout views 2) Style with CSS
    Page {
    background-color: #333;
    color: #000;
    padding: 10;
    }
    3) Control with JS
    submit() {
    alert(“You did it!”);
    }
    Deploy native apps to iOS and Android

    View full-size slide

  89. 2015 2016 2017 2018
    v1 v2 v3 v4
    NativeScript Journey
    v5

    View full-size slide

  90. Monthly NPM Downloads
    100k
    200k
    • Over 4.2 million downloads
    • 2x increase YoY in 2018 (130%)

    View full-size slide

  91. React Native
    NativeScript
    MONTHLY NPM CLI DOWNLOADS

    View full-size slide

  92. React Native NativeScript

    View full-size slide

  93. 0%
    50%
    100%
    Sep
    '17
    Oct
    '17
    Nov
    '17
    Dec
    '17
    Jan
    '18
    Feb
    '18
    Mar
    '18
    Apr
    '18
    May
    '18
    Jun
    '18
    Jul
    '18
    Aug
    '18
    Sep
    '18
    Oct
    '18
    Nov
    '18
    Dec
    '18
    Jan
    '19
    Feb
    '19
    CLI Template Usage
    Angular Pure JavaScript Pure TypeScript Vue.js

    View full-size slide

  94. MYPUMA puts wholesale fashion in the
    pocket of buyers and allows them to
    purchase PUMA's latest styles
    anywhere, anytime.
    NativeScript enables premium app
    experiences and easy access to iOS and
    Android users.

    View full-size slide

  95. Starting a new project (CLI)
    $ npm install –g nativescript
    $ tns create MyFirstProject --ng
    $ tns preview

    View full-size slide

  96. Instantly start developing with {N} in a browser
    • Fastest way to get started with {N}
    • Support for Angular and Vue

    View full-size slide

  97. Demo
    Playground & Preview

    View full-size slide

  98. How does NativeScript work?
    Under the covers

    View full-size slide

  99. Generated at build time
    for OS & 3rd party native
    libraries

    View full-size slide

  100. NativeScript Android example
    output:
    JavaScript

    View full-size slide

  101. NativeScript iOS example
    JavaScript

    View full-size slide

  102. Runs on V8 JavaScript VM
    Runs on JavaScriptCore VM

    View full-size slide

  103. 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 scenarios
    § NativeScript modules follow Node module’s conventions
    (CommonJS).

    View full-size slide

  104. Example: NativeScript file module

    View full-size slide

  105. AR/VR Support
    • Support for ARKit and ARCore
    • Support for iOS vector type
    • Image Tracking and Face Tracking (iOS)
    • Load 3D models
    • Interact with planes

    View full-size slide

  106. Image source: "Your First Progressive Web App", Google Developers
    • App shell method
    • Make it work offline
    • Using Angular

    View full-size slide

  107. Defining Views

    View full-size slide

  108. Pages
    § XML markup structure
    § Elements (e.g. , ) are NativeScript
    modules
    Angular Gotcha
    Must use closing
    tags with Angular

    View full-size slide

  109. Layouts
    UI Elements

    View full-size slide

  110. Layouts
    Absolute Dock Grid Stack Wrap

    View full-size slide

  111. Layouts: FlexBox

    == These are the same ==

    Supported Flex properties:
    § Set flex properties via
    XML, CSS or JS
    § Uses same syntax as
    web
    § Use FlexboxLayout as
    root element
    § Same as HTML
    with "display: flex;"
    § Multiple FlexboxLayouts
    can be nested
    For containers:
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content
    For children:
    • order
    • flex-grow
    • flex-shrink
    • flex
    • align-self
    • flex-wrap-before

    View full-size slide

  112. UI Widgets
    § Button
    § Label
    § TextField
    § TextView
    § SearchBar
    § Switch
    § Slider
    § Progress
    § ActivityIndicator
    § Image
    § ListView
    § HtmlView
    § WebView
    § TabView
    § SegmentedBar
    § DatePicker
    § TimePicker
    § ListPicker
    § Dialogs
    Out-of-the-box
    Native UI widgets
    means…
    • Native behavior
    • Native perf
    • Native accessibility
    • Parity with “native”

    View full-size slide

  113. Native UI widgets
    Native API
    {N} Module button
    android.widget.Button UIButton

    View full-size slide

  114. NativeScript UI (free)
    ● ListView
    ● SideDrawer
    ● Calendar
    ● Chart
    ● DataForm
    ● Gauges
    ● AutoComplete

    View full-size slide

  115. ActionBar
    Layout + UI

    View full-size slide

  116. 3 rows
    3 columns

    View full-size slide

  117. Basic Styling with CSS

    View full-size slide

  118. CSS
    Convention:
    app.css <-- Global styles
    [viewName].css <-- View styles
    [viewName].[platform].css
    @Component({
    ...
    styleUrls: ["./items.component.css"]
    })

    View full-size slide

  119. Supported Properties
    § color
    § background-color
    § background-image
    § background-repeat
    § background-position
    § background-size
    § border-color
    § border-width
    § border-radius
    § font
    § font-family
    § font-size
    § font-style
    § font-weight
    § text-align
    § text-decoration
    § text-transform
    § vertical-align
    § horizontal-align
    § margin
    § margin-top
    § margin-right
    § margin-bottom
    § margin-left
    § width
    § height
    § min-width
    § min-height
    § padding
    § padding-top
    § padding-right
    § padding-bottom
    § padding-left
    § visibility
    § opacity

    View full-size slide

  120. Supported Selectors
    § Element
    § button { color: red; }
    § Class
    § .mybutton { color: green; }
    § ID
    § #myButton { color: #FFF; }
    § Hierarchical
    § button .mybutton { … }
    § button > .mybutton { … }
    § Attribute
    § button[attr] { … }
    § button[attr='val'] { … }
    § Pseudo
    § button:highlighted { … }

    View full-size slide

  121. Sass
    § Use Sass syntax
    § Auto-compiled
    $ tns install sass

    View full-size slide

  122. Theme Core
    § Bootstrap for {N}
    § Pre-defined CSS classes to quickly give apps a polished
    look-and-feel
    § iOS and Android
    $ npm install nativescript-theme --save

    View full-size slide

  123. Theme for text


    Change text color:
    - text-primary, text-
    muted, text-danger
    Change text alignment:
    - text-center, text-
    left, text-right to
    Apply text transformation
    - text-lowercase, text-
    uppercase, text-capitalize

    View full-size slide

  124. Theme for buttons



    class="btn btn-primary btn-grey btn-rounded-
    sm">

    View full-size slide

  125. Theme
    BEFORE AFTER

    View full-size slide

  126. Demo
    Theme and styling

    View full-size slide

  127. Custom Fonts
    1. Use TTF or OTF fonts
    2. Put fonts in: app > fonts
    3. Use in CSS
    .icon {
    font-size: 30;
    font-family: 'FontAwesome';
    }

    View full-size slide

  128. Icon Font Helper
    § Angular pipe for handling icon fonts


    npm install nativescript-ngx-fonticon --save

    View full-size slide

  129. Pipes
    § Transform bound data
    import { Pipe, PipeTransform } from "@angular/core";
    @Pipe({
    name: "myPipeName"
    })
    export class MyPipe implements PipeTransform {
    transform(value: number): any {
    // Do something
    return newValue;
    }
    }

    View full-size slide

  130. TIP
    § Platform specific capabilities are always available
    § JavaScript: .android or .ios
    § Markup: or
    § Attributes: android: or ios:
    § Ex:
    Write once by default.
    Target specific platform capabilities when needed.

    View full-size slide

  131. Integrations & Ecosystem

    View full-size slide

  132. Plugin Ecosystem

    View full-size slide

  133. NativeScript Marketplace

    View full-size slide

  134. Android
    iOS
    Webpack
    Has Demo
    Has Docs
    {N} 3.x
    {N} 4.x
    Typings
    CI Builds
    Popular

    View full-size slide

  135. Expanding Templates
    Enterprise Auth Template (Kinvey)

    View full-size slide

  136. Basic Data Binding
    with Angular

    View full-size slide

  137. [ value ] or {{ value }} =
    One way binding from class to view

    View full-size slide

  138. import { Component } from ”@angular/core”
    @Component({
    selector: 'app',
    template: `

    `
    });
    export class AppComponent {
    message: 'Root Component'
    }
    app.component.ts

    View full-size slide

  139. [(ngModel)] = Two way binding

    View full-size slide

  140. import { Component } from ”@angular/core”
    @Component({
    selector: 'app',
    template: `

    Show Message
    `
    });
    export class AppComponent {
    message: 'Root Component’;
    showMessage() {
    alert(this.message);
    }
    }
    app.component.ts

    View full-size slide

  141. Two-way binding
    import { NativeScriptFormsModule } from 'natives
    cript-angular/forms';

    imports: [
    NativeScriptModule,
    AppRoutingModule,
    NativeScriptHttpModule,
    NativeScriptFormsModule
    ],
    § You also need to add
    NativeScriptForms
    Module to
    @NgModule imports

    View full-size slide

  142. ( event ) = Binds an event to a function

    View full-size slide

  143. import { Component } from ”@angular/core”
    @Component({
    selector: 'app',
    template: `

    Show Message
    `
    });
    export class AppComponent {
    message: 'Root Component’;
    showMessage() {
    alert(this.message);
    }
    }
    app.component.ts

    View full-size slide

  144. Events
    (swipe)="printDirection($event)">

    § If event provides
    parameters, then
    add $event

    View full-size slide

  145. Handling Events
    tap
    label.on(gestures.GestureTypes.tap, function (args) {
    console.log("Tap");
    });
    swipe
    label.on(gestures.GestureTypes.swipe, function (args) {
    console.log("Swipe Direction: " + args.direction);
    });
    Multiple events
    label.on("tap, doubleTap, longPress", function (args) {
    console.log("Event: " + args.eventName);
    });
    § Tap
    § Double Tap
    § Long Press
    § Swipe
    § Pan
    § Pinch
    § Rotation
    § Touch

    View full-size slide

  146. Demo
    Data binding

    View full-size slide

  147. Services And Injection

    View full-size slide

  148. export class MessageService {
    message: string = ”Service Message”
    }
    message.service.ts

    View full-size slide

  149. import { Injectable } from ”@angular/core”
    export class MessageService {
    message: string = ”Service Message”
    }
    message.service.ts

    View full-size slide

  150. import { Injectable } from ”@angular/core”
    @Injectable()
    export class MessageService {
    message: string = ”Service Message”
    }
    message.service.ts

    View full-size slide

  151. import { Component } from ”@angular/core”
    @Component({
    selector: 'app',
    template: `

    Show Message
    `
    });
    export class AppComponent {
    message: 'Root Component’;
    showMessage() {
    alert(this.message);
    }
    }
    app.component.ts

    View full-size slide

  152. import { Component } from ”@angular/core”
    import { MessageService } from ”./message.service”
    @Component({
    selector: 'app',
    template: `

    Show Message
    `
    });
    export class AppComponent {
    message: 'Root Component’;
    showMessage() {
    alert(this.message);
    }
    }
    app.component.ts

    View full-size slide

  153. @Component({
    selector: 'app',
    providers: [MessageService]
    template: `

    Show Message
    `
    });
    export class AppComponent {
    message: string;
    showMessage() {
    alert(this.message);
    }
    constructor(MessageService _messageService) {
    this.message = _messageService.message;
    }
    app.component.ts

    View full-size slide

  154. “If debugging is the process of removing
    software bugs, then programming must be
    the process of putting them in.”
    - Edsger Dijkstra

    View full-size slide

  155. Debugging Strategies
    § Debug by alert (no really)
    § Debug by console.log
    § Debug by Developer Tools
    § Debug by IDE
    § Visual Studio
    § Visual Studio Code

    View full-size slide

  156. What are your favorite web debugging tools?

    View full-size slide

  157. Chrome Dev Tools
    Sources

    View full-size slide

  158. Chrome Dev Tools
    Memory

    View full-size slide

  159. Chrome Dev Tools
    Network

    View full-size slide

  160. Chrome Dev Tools
    Elements

    View full-size slide

  161. Demo
    Debugging

    View full-size slide

  162. Web + Mobile Code Sharing
    • Build for web and mobile in one project
    • Leverages Angular schematics
    • Share business logic, routing

    View full-size slide

  163. Sharing
    DO share:
    - Routes
    - Services
    - Component definitions
    (common behavior)
    - (Some) Styles
    DON’T share:
    - UI layer
    - NgModules

    View full-size slide

  164. Additional Code Sharing
    *.common.ts
    *.module.ts *.module.tns.ts

    View full-size slide

  165. Code Splitting Strategies
    Polyfills
    • Make web APIs
    work in {N}
    Helpers
    • Inject services
    to handle
    specific
    functions
    differently for
    web & {N}
    Separate files
    • Create separate
    files for web &
    {N}

    View full-size slide

  166. Pre-reqs
    § Angular CLI
    § NativeScript CLI
    § @nativescript/schematics

    View full-size slide

  167. Options
    § Start with a new project
    § Convert an existing Angular web project
    § Convert an existing {N} project (coming soon)
    $ ng add @nativescript/schematics
    $ ng g migrate-module --name=home
    $ ng new -c=@nativescript/schematics project-name --shared
    Migrate
    New

    View full-size slide

  168. Demo
    Migrate Weather App to Code Sharing

    View full-size slide

  169. Why do this?
    § Improve developer workflow across web, mobile
    § Share more code/assets between web, mobile
    § Deliver web, mobile updates simultaneously

    View full-size slide

  170. NativeScript for Angular
    Mobile Development
    Available on Packt
    by Nathan Walker & Nathanael Anderson

    View full-size slide

  171. The NativeScript Book
    Available.
    for FREE.
    by The Brosteins
    nativescript.org/book

    View full-size slide

  172. nativescripting.com

    View full-size slide

  173. Building Progressive
    Web Apps
    Tal Ater

    View full-size slide

  174. No compromises
    PWA iOS
    app
    Android
    app
    Maximum reach, discoverability
    "Light" experience
    Unlimited power, capability
    "Premium" experience
    +

    View full-size slide

  175. Architecture
    Shared JavaScript/TypeScript
    Native app stuff Web app stuff
    Shared native UI
    iOS UI Android UI
    Web UI

    View full-size slide

  176. When should you add PWA?
    When should add {N}?

    View full-size slide

  177. • Largely read-only
    • Simple user interactions
    • Mostly dynamic content
    • No need to access
    device APIs
    • No need for encrypted
    device storage
    • Web distribution
    • Frequently used
    • More complex user
    interactions
    • Need for access to
    device APIs
    • Need for encrypted
    storage
    • App store distribution
    PWA

    View full-size slide