Let's talk about the future: state-of-the-art mobile web & hybrid apps

Rakuten Tech Conference

Masa Tanaka

https://slides.com/masa-tanaka/rtc-2017/

MASA TANAKA

Founder & CEO, Asial Corporation

Tokyo, Japan

@massie

masahirotanaka

Hi!

Developing mobile apps?

Application demands > Suppliers

Multiple target platforms

Shift from commercial to business

Evergreen Technology

Progressive & past aware

Cross platform

Fewer capability

Performance

Tooling

html5 on Mobile

Offline support

Native features

Limitations

with Progressive Web Apps

Offline support

go Progressive!

Push Notifications

Install to Home Screen

via ServiceWorker

offline support

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js');
}
'use strict';

var cacheVersion = 1;
var currentCache = {
  offline: 'offline-cache' + cacheVersion
};
const offlineUrl = 'offline-page.html';

this.addEventListener('install', event => {
  event.waitUntil(
    caches.open(currentCache.offline).then(function(cache) {
      return cache.addAll([
          './img/offline.svg',
          offlineUrl
      ]);
    })
  );
});

Web App Manifest

add to home screen

{
  "short_name": "Your Awesome App",
  "name": "Your Truely Awesome App",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "index.html?launcher=true"
}

manifest.json (Refer from HTML page using <link rel="manifest">)

Firebase Cloud Messaging

Push Notifications

self.addEventListener('push', function(e) {
  var options = {
    body: 'Received a new notifications!',
    actions: [
      {action: 'close', title: 'Close', icon: 'images/xmark.png'},
    ]
  };
  e.waitUntil(
    self.registration.showNotification('Received Notifications!', options)
  );
});

Service Worker Code

More Details

navigator.serviceWorker.register("/serviceworker.js")
.then(function(registration) {
    return registration.pushManager.getSubscription().then(function(subscription) {
        if (subscription) {
            return subscription
        }
        return registration.pushManager.subscribe({
            userVisibleOnly: true
        })
    })
})

Web page

Living standards

Are they cross-platform?

Web MIDI

Web USB

Web Bluetooth

Video Tracks

...

Apache Cordova

popularity

Cordova pyramid

Native Code

Cordova

Cordova Plugins

Your

Code

 Native Bridge

ecosystem

More than 2,500 third-party plugins

performance

http://tcrn.ch/QhPf5K​

TechCrunch, Sep 11, 2012

perf

Browser improvements

CPU speed

Browser Features

to improve performance

  • Web Assembly
  • Web Workers
  • CSS "will-change" property
  • window.requestIdleCallback()

Can I use Web Assembly?

CPU/GPU Performance

SunSpider Benchmark

iPhone 8 has equivalent score to desktop CPUs!

Next challenge

 UI and UX

Mobile SPA frameworks

WHAT's CHALLENGING

Operating System

Native SDK

Your Logic

Operating System

WebView

Your Logic

MISSING!!

Framework you love

onsen.io

What is onsen ui?

  • A rich variety of UI components specially designed for mobile apps.
  • Full of ready to implement features with native iOS and Android design standards.
  • Free to use, 100% open source software.
  • Fine-tuned performance for Mobile Safari and Chrome.

温泉 (Onsen) = SPA!

Kitchensink

Performance improvements

Lazy DOM population

Hardware GPU acceleration

Made of Web Components

lazy DOM manipulation

Unload when out of view

Load when about to display

web components!

CSS Components

Web Components

Framework Bindings

Framework bindings is required to support props and methods.

Written in pure JavaScript (ES2017).

All components are exposed as HTML elements.

TypeScript ready.

Written in pure CSS (cssnext, PostCSS)

framework agnostic

  • Vanilla JS (Pure JS)
  • Angular
  • React
  • Vue.js
  • jQuery

...

going Beyond HTML5

Cordova and react native

Native Code

Cordova

Cordova Plugins

JS

HTML5

Native Code

React Native (JSCore)

JS + JSX

Native

UI

WebView

Native UI

tooling part

Mobile app DEV

HEADACHE

SDK Management

Device Testing

Unified Development Platform

Monaca TOOLchain

what is monaca?

  • Cordova development suite on the Cloud.
  • Focus on pro and enterprise developers.
  • Enhanced Cordova features.

Monaca Debugger

  • Online & local debugging.
  • Live update on device.
  • Distributed via app stores.
  • Build your own debugger.
  • Cordova plugin support.

Remote build

  • All-in-one for iOS, Android and Windows.
  • iTunes Connect distribution automation.
  • All Cordova plugins are supported including hooks.

code encryption

  • Encryption, not obfuscation.
  • Encrypts entire assets.
  • Key can be supplied at runtime.
  • Binary code identification.

in-app updater

  • Update on-the-fly outside of the store.
  • Precise update control through API.
  • Can be hosted on premise.

Enterprise management PORTAL

  • Central management for iOS keys and Android KeyStores.

 

  • Manage developer seating, plug-in and continuous integration.

continuous integration

  • Automated build & deployment.
  • Support Git based systems + webhooks.
  • Test distribution to HockeyApp and DeployGate.

Security CheckER Tool

  • Cordova platform & native security analysis.
  • Detailed code based inspection.

local and online ide

Cloud IDE

Desktop App

Why "Monaca"?

Your Code

Wrapped in shell

Relaxing mobile app dev

with Onsen UI and Monaca!

Thank you!

Where to go next?

1. Contact me for any questions: masa@monaca.io

3. Watch the next session by Marcus Saw.

Slides available at: https://slides.com/masa-tanaka/rtc-2017/

Rakuten Tech Conference 2017

By Masa Tanaka

Rakuten Tech Conference 2017

Let's talk about the future: State-of-the-art mobile web & hybrid apps

  • 1,196
Loading comments...

More from Masa Tanaka