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
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
2. Onsen UI documentation and tutorial
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,479