Post on 16-Apr-2017
Onsen UI 2.0とUIライブラリの未来Enterprise HTML5 developer Meetup #2 アシアル株式会社 久保田光則
Onsen UI
久保田光則@anatoo
好評発売中！
Agenda
- Onsen UIとは？ - v2.0-betaが出ました - Material Design対応 - Web Components化
Onsen UIとは
- HTML5ハイブリッドアプリ用のUIライブラリ
要素を記述してUIを宣言
図
- Cordova上で使うことを想定
Cordova
Onsen UIHTML5
JavaScript & CSSHTML5 Application
なぜこれが必要?
HTML5をラップしてアプリへ
+♪
クロスプラットフォーム
Android iOS
ウェブ技術の再利用
ストアでの配布
- 外見は普通のアプリなのでそのまま配布できる
ネイティブの機能をJSから
- CordovaがJavaScript向けのAPIを用意してくれる
Android / iOS
OS API
ハイブリッドアプリ開発の課題
- プリセットのUIキットの不在 - UIのパフォーマンス
レンダリングが重い！
- HTML5アプリの実装はできても レンダリングのパフォーマンスを改善できる人はそれほどいない
コンポーネントが沢山
- JavaScriptコンポーネントが約30個 - CSSコンポーネントが約60個
Onsen UIでは
- モバイルアプリ開発に必要なUI一式を提供 - UIコンポーネントは予めチューニング
開発者がアプリ開発に フォーカスできるようにする
プロジェクトのステータス
- 2013年公開から約2年経過 - コミット数 約4000 - Githubスター数 約2400 - 今まで作成されたissue数 約1050 - プルリクエストの数 約370
事例: たくさん
1. Angularへの依存をゼロに
2. Material Designへの対応
v2.0で変わること
- 従来はAngularのdirectiveを利用 - Angularを必ず読み込む必要あり
UIライブラリ共通の問題
- フレームワークに依存してしまうこと
jQuery
jQuery Plugin
React.js
React Components
Angular1.x
Directive
色んなフレームワーク
画像出典: http://blog.bitovi.com/longevity-or-lack-thereof-in-javascript-frameworks/
移り変わりの速さ
Web Components
Onsen UIの選択
Custom Elements Templates Shadow DOM HTML Imports{
Custom Elements Templates Shadow DOM HTML Imports{
<x-hoge></x-hoge>
// x-hoge要素を定義
document.registerElement( 'x-hoge', {prototype: Object.create(HTMLElement.prototype)}
);
<body> <div> <x-hoge></x-hoge> </div> </body>
var proto = Object.create(HTMLElement.prototype);
// 要素が作成された時に呼ばれる
proto.createdCallback = function() {…};
// DOMツリーに追加された時に呼ばれる
proto.attachedCallback = function() {…};
// DOMツリーから取り除かれた時に呼ばれる
proto.detachedCallback = function() {…};
document.registerElement('x-hoge', {prototype: proto});
<x-hoge message=“Hello World!”> </x-hoge>
var proto = Object.create(HTMLElement.prototype);
// 属性の値が変更された時に呼ばれる
proto.attributeChangedCallback = function(name, old, new) {…};
document.registerElement('x-hoge', {prototype: proto});
<x-hoge></x-hoge>
<script> var hoge = body.querySelector(‘x-hoge’);
hoge.doSomething(); </script>
var proto = Object.create(HTMLElement.prototype);
// 任意のメソッド、プロパティを追加する
proto.doSomething = function() {…};
document.registerElement('x-hoge', {prototype: proto});
- 2.0では全てのコンポーネントをCustom Elementsで置き換え
- 特定のフレームワークへの依存が消えた
Onsen UI 2.0で目指すもの
- どのフレームワークからも利用できるUIライブラリ - Framework Agnostic
Material Designへの対応も
ご清聴ありがとうございました