Founder, Monaca
Tokyo, Japan
@massie
masahirotanaka
PWA
Mobile Web App
Progressive Web App
Hybrid App
Web
Native
Operating System
WebView
Your App in HTML5
Device Spec
HTML5 & Browser
iPhone 4
June 2010
CPU speed: x15
GPU performance: x30
Memory size: 512MB → 2GB
Native API Calls
Plugin Registry (Over 1000 plugins)
Apche foundation
Vue + Cordova saves your life!?
Operating System
Native SDK
Your Logic
Operating System
WebView
Web Browser
Your Logic
MISSING!!
onsen.io
Location: Jigokudani, Japan
Taken by Marsel van Oosten
CSS Components
Web Components
Vue.js Bindings
Supplements framework features.
Written in pure JavaScript (ES2017).
All components are exposed as HTML elements.
TypeScript ready.
Written in pure CSS (cssnext, PostCSS)
<link rel="stylesheet" href="onsenui.css">
<link rel="stylesheet" href="onsen-css-components.css">
<script src="vue.js"></script>
<script src="onsenui.js"></script>
<script src="vue-onsenui.js"></script>
// Webpack CSS import
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
// JS import
import Vue from 'vue';
import VueOnsen from 'vue-onsenui'; // This already imports 'onsenui'
Vue.use(VueOnsen);
Or for Webpackers:
vue-onsenui 2.0.0-rc.1
vue-onsenui 2.0.0 🎉
vue-onsenui 2.0.0-rc.1
Relaxing mobile app development with Onsen UI!