Onsen UI 2.0とUIライブラリの未来

Onsen UI 2.0とUIライブラリの未来
Enterprise HTML5 developer Meetup #2
アシアル株式会社久保田光則
Onsen UI

Agenda
- Onsen UIとは？
- v2.0-betaが出ました
- Material Design対応
- Web Components化

Onsen UIとは
- HTML5ハイブリッドアプリ用のUIライブラリ

要素を記述してUIを宣言

図
- Cordova上で使うことを想定
Cordova
Onsen UIHTML5
JavaScript & CSS
HTML5 Application

HTML5をラップしてアプリへ
+
♪

クロスプラットフォーム
Android iOS

ストアでの配布
- 外見は普通のアプリなのでそのまま配布で
きる

ネイティブの機能をJSから
- CordovaがJavaScript向けのAPIを用意してくれる
Android / iOS
OS API

事例: http://cordova.apache.org

ハイブリッドアプリ開発の課題
- プリセットの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
{

// x-hoge要素を定義
document.registerElement(
'x-hoge',
{prototype:
Object.create(HTMLElement.prototype)}
);

<x-hoge
message=“Hello World!”>
</x-hoge>

var proto =
// 属性の値が変更された時に呼ばれる
proto.attributeChangedCallback =
function(name, old, new) {…};
proto});

<x-hoge></x-hoge>
<script>
var hoge =
body.querySelector(‘x-hoge’);
hoge.doSomething();
</script>

var proto =
// 任意のメソッド、プロパティを追加する
proto.doSomething = function() {…};
proto});

- 2.0では全てのコンポーネントを 
Custom Elementsで置き換え
- 特定のフレームワークへの依存が消えた

Onsen UI 2.0で目指すもの
- どのフレームワークからも利用できるUIライブラリ
- Framework Agnostic

Material Designへの対応も

http://onsen.io/2/ で2.0 beta公開中

ご清聴ありがとうございました

Onsen UI 2.0とUIライブラリの未来

Recommended