First-Class Citizen on Your Device Now

Maxim Salnikov

@webmaxru

The Mobile Web 2.0

Maxim Salnikov

@webmaxru

• Google Developer Expert in Angular

• Mobile Oslo / Angular Oslo / PWA Oslo meetups organizer

• Mobile Era conference organizer

Products from the future

UI Engineer at ForgeRock

MobileEra.Rocks

• All kinds of native mobile development

• Progressive Web Apps

• Mobile Web: React Native, NativeScript, Ionic

October 5-6, Oslo

Mobile Users

60X Poland

Mobile Web

Milestones of the Mobile Web

The biggest mistake we’ve made as a company is betting on HTML5 over native.

Mark Zuckerberg

by Tomomi Imura

Mobile Web 2.0

How the things work

Ionic

http://ionicframework.com

• Single code base for app stores and web

• Web app in WebView

• Powered by Angular

• Built to native app with Cordova

• Uses platform APIs via Cordova

Ionic

https://www.nativescript.org​

NativeScript

NativeScript

• Uses Angular (not a requirement)

• Uses JavaScript virtual machines to execute JavaScript commands

• Direct access to native platform APIs

NativeScript

React Native

https://facebook.github.io/react-native/

React Native

• Uses "bridge" between JavaScript and native

• Inspired by React (Virtual DOM, etc)

• Can be a part of native app

• Can include modules with native code

React Native

Progressive Web Apps

Reliable, Fast, Engaging

https://developers.google.com/web/progressive-web-apps/

Progressive Web Apps

• Takes the best parts from native and web

• Framework-agnostic

• Use the latest browser APIs

Progressive Web Apps

Developer Experience

Installation, set up, scaffolding

• Smooth NPM-based installation

• CLI-based scaffolding

• Tools to preview/emulate the app

• Tools to share and deploy

Coding and UI

Ionic

<ion-header>
    <ion-navbar>
        <ion-title>Ionic Blank</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding class="content">
    <h2>Tap the button</h2>
    <button primary>TAP</button>
    <div class="message">16 taps left</div>
</ion-content>

Ionic

http://www.hybridtonative.com

Writing a code

Angular

TypeScript

"HTML"

NativeScript

<ActionBar title="NativeScript Blank"></ActionBar>

<StackLayout>
    <Label text="Tap the button" class="title"></Label>
    <Button text="TAP"></Button>
    <Label [text]="message" class="message"></Label>
</StackLayout>

NativeScript

http://www.hybridtonative.com

Writing a code

Angular

TypeScript

"HTML"

Angular?

TypeScript

or

Javascript

XML

React Native

import React, { Component } from 'react';
import { View, Button, Alert, AppRegistry } from 'react-native';

class MainApp extends Component {

_onPress() {
  Alert.alert('I am so pressed!');
 }

  render() {
    return (
      <View>
         <Button onPress={this._onPress} title="Press me" color="#841584" />
      </View>
    );
  }
}

AppRegistry.registerComponent('MainApp', () => MainApp);

React Native

Action Bar / iOS

import React, { Component, PropTypes } from 'react';
import { NavigatorIOS, Text } from 'react-native';

export default class NavigatorIOSApp extends Component {
  render() {
    return (
      <NavigatorIOS
        initialRoute={{
          component: MyScene,
          title: 'My Initial Scene',
        }}
        style={{flex: 1}}
      />
    );
  }
}

Action Bar / Android

render: function() {
  return (
    <ToolbarAndroid
      logo={require('./app_logo.png')}
      title="AwesomeApp"
      actions={[{title: 'Settings', icon: require('./icon.png')}]}
      onActionSelected={this.onActionSelected} />
  )
},
onActionSelected: function(position) {
  if (position === 0) { // index of 'Settings'
    showSettings();
  }
}

Should be noted

• There are iOS/Android specific limitations of ActionBar in NativeScript

• There are cross-platform implementations of navigation in React Native (React Native Navigation)

Writing a code

Angular

TypeScript

"HTML"

Angular?

TypeScript

or

Javascript

XML

React

ES6

JSX

Progressive Web Apps

Hacker News PWA

• A spiritual successor to TodoMVC

• 8 implementations at the moment

https://hnpwa.com

Progressive Web Apps

Accessing hardware

Ionic Native

Ionic Native

import { Camera, CameraOptions } from '@ionic-native/camera';

constructor(private camera: Camera) { }

...

const options: CameraOptions = {
  quality: 100,
  ...
}

this.camera.getPicture(options).then((imageData) => {
 // imageData is either a base64 encoded string or a file URI
 // If it's base64:
 let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
 // Handle error
});

Accessing hardware

Ionic

Native

NativeScript

http://plugins.nativescript.org

NativeScript

import { Component } from "@angular/core";

import { ImageAsset } from "image-asset";
import { takePicture, requestPermissions, isAvailable } from "nativescript-camera";

@Component({
    moduleId: module.id,
    templateUrl: "./using-camera.component.html"
})
export class UsingCameraExampleComponent {
    public imageTaken: ImageAsset;

    onTakePhoto() {
        let options = {
            width: 600,
            height: 300,
            ...
        };

        takePicture(options)
            .then(imageAsset => {
                this.imageTaken = imageAsset;
                console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height);
            }).catch(err => {
                console.log(err.message);
            });
    }

}

Accessing hardware

Ionic

Native

Direct access to native APIs

CocoaPods

Plugins

React Native

https://js.coach/react-native

React Native

import React, { Component } from 'react';
...
import Camera from 'react-native-camera';

class BadInstagramCloneApp extends Component {
  render() {
    return (
      <View>
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          aspect={Camera.constants.Aspect.fill}>
          <Text onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
        </Camera>
      </View>
    );
  }

  takePicture() {
    const options = {};
    //options.location = ...
    this.camera.capture({metadata: options})
      .then((data) => console.log(data))
      .catch(err => console.error(err));
  }
}

AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);

Accessing hardware

Ionic

Native

Direct access to native APIs

CocoaPods

Plugins

APIs

Writing native code

Components

What Web Can Do

https://whatwebcando.today

User Experience

Performance

• No serious performance difference between the native and NativeScript/React Native

• A hybrid version of an app will never be as fast as a native version

Performance

• Performance doesn’t matter so much as long as the hybrid app is fast enough

• Javascript on Chrome for Android became 35% faster during the last year

Business Experience

• 48% of consumers start mobile research with a search engine

• NativeScript and React Native apps could only be distributed via app stores

• Ionic goes smart cross-platform approach

Discoverability

• 60% of apps in the Google Play app store have never been downloaded

• The average user downloads <3 apps per month

• 50% of US smartphone users download 0 apps per month

• Very expensive to acquire users for mobile apps

App stores...

• Easy to find

• Easy to share

• Easy to install

• Easy to update

PWA wins!

Dziękuję Ci bardzo

@webmaxru

Maxim Salnikov

Questions?