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 & CSS HTML5 Application
なぜこれが必要?
http://cordova.apache.org
HTML5をラップしてアプリへ + ♪
クロスプラットフォーム Android iOS
ウェブ技術の再利用
ストアでの配布 - 外見は普通のアプリなのでそのまま配布で きる
ネイティブの機能をJSから - CordovaがJavaScript向けのAPIを用意してくれる Android / iOS OS API
事例: http://cordova.apache.org
ハイブリッドアプリ開発の課題 - プリセットのUIキットの不在 - UIのパフォーマンス
レンダリングが重い！ - HTML5アプリの実装はできても
 レンダリングのパフォーマンスを改善でき る人はそれほどいない
http://onsen.io/
コンポーネントが沢山 - 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ツリーに追加され...
<x-hoge message=“Hello World!”> </x-hoge>
var proto = Object.create(HTMLElement.prototype); // 属性の値が変更された時に呼ばれる proto.attributeChangedCallback = function(name, old,...
<x-hoge></x-hoge> <script> var hoge = body.querySelector(‘x-hoge’); hoge.doSomething(); </script>
var proto = Object.create(HTMLElement.prototype); // 任意のメソッド、プロパティを追加する proto.doSomething = function() {…}; document.regis...
- 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ライブラリの未来
Onsen UI 2.0とUIライブラリの未来
Upcoming SlideShare
Loading in...5
×

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

71
 -1

Published on

Enterprise HTML5 Developer Meetup #2 での資料です

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
no profile picture user

  • Be the first to comment

No Downloads
Views
Total Views
71
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

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

  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×