Flawless development with Vue, Monaca and Onsen UI
PhoneGap day US 2017
Masa Tanaka
https://slides.com/masa-tanaka/pgday-2017-us/
MASA TANAKA
Founder, Monaca
Tokyo, Japan
@massie
masahirotanaka
today's topic
Vue
&
Onsen UI
&
Monaca
many frameworks!
Angular
React
Vue.js
jQuery (Vanilla JS)
Why vue.js?
Personal Favor
Reason #1
Developer Friendly
- Keeping backwards compatibility.
- Great documentation.
- Incorporating goodies from React and Angular.
Reason #2
Designer Friendly
- It can load with <script> tag (Webpack is optional).
- Standard HTML template & syntax.
- Less scary code.
Reason #3
Cordova on Vue
Hello vue!
$ npm install --global vue-cli
$ vue init OnsenUI/vue-cordova-webpack hello-vue
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.
WHAT's CHALLENGING
Operating System
Native SDK
Your Logic
Operating System
Cordova
Your Logic
MISSING!!
Framework you love
温泉 (Onsen) = SPA!
Vue Kitchensink
Location: Jigokudani, Japan
Taken by Marsel van Oosten
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
For Vanilla JS
framework agnostic
For Vue.js
framework agnostic
For React
framework agnostic
For Angular
For more details
Visit Onsen UI: https://onsen.io/
Explore community: https://community.onsen.io/
and share your effort!
tooling part
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
pricing
- Commercial subscription starting $20/month/developer.
- USD payment starting next week.
free training & consultation
- On-boarding support for organization customers.
- Extended trial period.
- Includes unlimited Cordova technical support during trial.
Catch me for details!
Relaxing mobile app dev with Onsen UI and Monaca!
Thank you!
Where to go next?
Contact me for any questions: masa@monaca.io
Onsen UI for Vue: documentation and tutorial
Sign up to Monaca for free trial
Slides available at: https://slides.com/masa-tanaka/pgday-2017-us/
Flawless development with Vue, Monaca and Onsen UI ♨️
By Masa Tanaka
Flawless development with Vue, Monaca and Onsen UI ♨️
PhoneGap Day US 2017
- 1,569