Best practices for mobile apps with Vue and Onsen UI

VueConf 2017

Masa Tanaka

MASA TANAKA

Founder, Monaca

Tokyo, Japan

@massie

masahirotanaka

MOBILE APP with Web TECH

PWA

Mobile Web App

Progressive Web App

Hybrid App

Web

Native

WHAT IS A HYBRID?

Operating System

WebView

Your App in HTML5

Lots of improvements

Device Spec

HTML5 & Browser

• position:fix
• will-change: attribute
• window.requestIdleCallback()
• WebGL
• SVG2
• Evergreen Chrome (Android 5+)
• SPA frameworks
• Dev tools & inspector
• ...

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!?

The Uncanny Valley

WHAT's CHALLENGING

Operating System

Native SDK

Your Logic

Operating System

WebView

Web Browser

Your Logic

MISSING!!

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.

温泉 (Onsen) = SPA!

App with Onsen UI

THE ARCHITECTURE

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)

Fully Customizable

USING WITH VUE

<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:

COMPONENTS

Kitchensink

See Source

DEMO

STILL missing something?

TOOLchain

ANOTHER DEMO

LATEST RELEASE

More Features TO COME!

• Swipable tab & navigator
• More application templates & patterns
• Full SSR support
• Vetur support

Relaxing mobile app development with Onsen UI!

Thank you!