Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sencha Touch 2 vs jQuery Mobile

16,146 views

Published on

SenchaUG 勉強会 第2回@東京 での発表資料。
http://www.meetup.com/Japan-Sencha-User-Group/events/81279312/

ネタなので大目に見てやって下さい

Published in: Technology
  • Be the first to comment

Sencha Touch 2 vs jQuery Mobile

  1. 1. Touch 2 vsjQuery Mobileが許されるのは素人までだよねww DeveloperならやっぱりSencha Touch! 2012.11.08 SenchaUG 勉強会 第2回@東京 @dsuket
  2. 2. ABOUT ME高岡大介お仕事 フリーエージェント Inkpod Webの開発 @ITに記事かきました (HTML5アプリのタッチ UX) Inkpod Web Twitter: @dsuket
  3. 3. ABOUT ME高岡大介お仕事 フリーエージェント Inkpod Webの開発 new! @ITに記事かきました (HTML5アプリのタッチ UX) Inkpod Web Twitter: @dsuket
  4. 4. いきさつ
  5. 5. いきさつSencha Touch Lover です。
  6. 6. いきさつSencha Touch Lover です。最近は jQuery Mobileのお仕事も増えた。
  7. 7. いきさつSencha Touch Lover です。最近は jQuery Mobileのお仕事も増えた。jQM 使いづれーーー!!!
  8. 8. いきさつSencha Touch Lover です。最近は jQuery Mobileのお仕事も増えた。jQM 使いづれーーー!!!Sencha ならもっと るのに。。。
  9. 9. いきさつSencha Touch Lover です。最近は jQuery Mobileのお仕事も増えた。jQM 使いづれーーー!!!Sencha ならもっと るのに。。。jQuery Mobileを全力でdisるお! (`・ω・́)
  10. 10. そのまえに、少しおさらい
  11. 11. SENCHA TOUCH 2THE BEST FRAMEWORK JUST GOT BETTER
  12. 12. SENCHA TOUCH 2✴ 洗練されたデザイン✴ 高いパフォーマンス✴ 50以上の豊富なコンポーネント✴ 柔軟なADAPTIVE LAYOUTS✴ NATIVE PACKAGING✴ HISTORY状態管理✴ 拡張性のあるクラスシステム✴ 堅牢なビルトインMVC✴ and more...
  13. 13. by kawanoshinobu
  14. 14. 最高のパフォーマンスと 驚きの体験を圧倒的な速さで実現します。
  15. 15. 最高のパフォーマンスと 驚きの体験を圧倒的な速さで実現します。そう Sencha Touch 2 ならね
  16. 16. ここがイケてないよ!
  17. 17. ここがイケてないよ!
  18. 18. ここがイケてないよ! jQuery Mobile 1.デザインがダサイ
  19. 19. JQUERY MOBILE DESIGN
  20. 20. なんでこんなに丸いの?
  21. 21. なんでこんなに丸いの?ドロップシャドウ付けすぎ!
  22. 22. なんでこんなに丸いの?ドロップシャドウ付けすぎ!アイコン小さすぎ&種類少なすぎ
  23. 23. 最近のデザインは何も考えずに角丸とかドロップシャドウ付けすぎ。いかに削るかが重要。 by mskwtnb
  24. 24. SENCHA TOUCH 2 DESIGNSimpleかつElegantなデザイン高品質な300個以上のビルトインアイコン!
  25. 25. SENCHA 圧勝
  26. 26. SENCHA 圧勝 ちょっとまて
  27. 27. JQM 3RD PARTY PLUGINS3rd party plugins/extensions で色々あるよ! jQuery Mobile Icon Pack iOS inspired theme jQuery-Mobile-Bootstrap-Theme
  28. 28. ここがイケてないよ! jQuery Mobile 2.テーマのカスタマイズ が難しい
  29. 29. ThemeRoller
  30. 30. JQUERY MOBILE THEME
  31. 31. JQUERY MOBILE THEMEThemeRoller 使いにくい!
  32. 32. JQUERY MOBILE THEMEThemeRoller 使いにくい! いっぺんに全部変更スンナ
  33. 33. JQUERY MOBILE THEMEThemeRoller 使いにくい! いっぺんに全部変更スンナ 俺が欲しいのはボタン1個なんだよ!
  34. 34. JQUERY MOBILE THEMEThemeRoller 使いにくい! いっぺんに全部変更スンナ 俺が欲しいのはボタン1個なんだよ!LESS/SASS ほすぃ
  35. 35. SENCHA TOUCH 2 THEMECompass/Sass で楽々カスタマイズ変数、Mix-In など便利機能満載Theme Contest
  36. 36. JQM 3RD PARTY EXTENSIONSjQuery Mobile Less Version コンポーネント毎にLESSで定義 変数、Mix-Inも使える
  37. 37. JQM 3RD PARTY EXTENSIONSjQuery Mobile Less Version コンポーネント毎にLESSで定義 変数、Mix-Inも使える あれ?結構つかえるかも・・
  38. 38. ここがイケてないよ! jQuery Mobile 3.コンポーネントが 少ない!!
  39. 39. JQUERY MOBILE WIDGETform系は結構充実ActionSheetやOverlay、AlertがないTab、Carouselもない
  40. 40. SENCHA TOUCH 2 COMPONENT50以上のコンポーネントOverlayはもちろん、Tab、Carouselも!
  41. 41. どうせ 3RDにあるんでしょ?
  42. 42. ありました
  43. 43. ありましたむしろ本体(1.2)でOverlayできるようになってた...
  44. 44. ありましたむしろ本体(1.2)でOverlayできるようになってた...ver1.4 でTab、1.5でCarousel対応予定
  45. 45. ありましたむしろ本体(1.2)でOverlayできるようになってた...ver1.4 でTab、1.5でCarousel対応予定その他便利なPlugins
  46. 46. ありましたむしろ本体(1.2)でOverlayできるようになってた...ver1.4 でTab、1.5でCarousel対応予定その他便利なPlugins jQM Pagenation
  47. 47. ありましたむしろ本体(1.2)でOverlayできるようになってた...ver1.4 でTab、1.5でCarousel対応予定その他便利なPlugins jQM Pagenation jquery.mobile.actionsheet
  48. 48. ありましたむしろ本体(1.2)でOverlayできるようになってた...ver1.4 でTab、1.5でCarousel対応予定その他便利なPlugins jQM Pagenation jquery.mobile.actionsheet JQuery-Mobile-Slide-Menu
  49. 49. ここがイケてないよ! jQuery Mobile 4.レイアウトが貧弱、 貧弱ゥ!!
  50. 50. JQUERY MOBILE LAYOUTui-grid-x でグリッドレイアウト ui-grid-b (3 column) ui-block-a ui-block-b ui-block-c <div class="ui-grid-b"> ! <div class="ui-block-a">Block A</div> ! <div class="ui-block-b">Block B</div> ! <div class="ui-block-c">Block C</div> </div>
  51. 51. JQUERY MOBILE LAYOUT
  52. 52. JQUERY MOBILE LAYOUTaが2カラム、bが3カラムってどうなのよ。。
  53. 53. JQUERY MOBILE LAYOUTaが2カラム、bが3カラムってどうなのよ。。2∼5カラムまでしかない
  54. 54. JQUERY MOBILE LAYOUTaが2カラム、bが3カラムってどうなのよ。。2∼5カラムまでしかないoffsetやカラムサイズを指定できない (入れ子にすればいいけど、めんどくさい)
  55. 55. JQUERY MOBILE LAYOUTaが2カラム、bが3カラムってどうなのよ。。2∼5カラムまでしかないoffsetやカラムサイズを指定できない (入れ子にすればいいけど、めんどくさい)Responsive Web Design 非対応
  56. 56. SENCHA TOUCH 2 LAYOUTAdaptive Layout HBox, VBox, Card, Fit, Docking Pack and Align
  57. 57. あきらめないで!jQM 次期リリース 1.3 でRWD対応! レスポンシブテーブル グリッドレイアウトの動的変更 レスポンシブグリッド
  58. 58. ここがイケてないよ! jQuery Mobile 5.AJAXページロード の落とし穴
  59. 59. JQUERY MOBILE AJAXjQMは基本Ajaxでページ遷移する。これが諸々問題を引き起こす HEAD BODY Page1
  60. 60. JQUERY MOBILE AJAXjQMは基本Ajaxでページ遷移する。これが諸々問題を引き起こす HEAD HEAD BODY BODY Page1 Page2
  61. 61. JQUERY MOBILE AJAXjQMは基本Ajaxでページ遷移する。これが諸々問題を引き起こす HEAD HEAD ajaxでロード BODY BODY Page1 Page2
  62. 62. JQUERY MOBILE AJAXjQMは基本Ajaxでページ遷移する。これが諸々問題を引き起こす HEAD HEAD ajaxでロード BODY BODY bodyだけ入れ替え Page1 Page2
  63. 63. JQM AJAX PROBLEM
  64. 64. JQM AJAX PROBLEMHEADは全体で一回しか読まない CSS、JavaScriptは全体で共通 Google Analyticsなどは注意!
  65. 65. JQM AJAX PROBLEMHEADは全体で一回しか読まない CSS、JavaScriptは全体で共通 Google Analyticsなどは注意!直前のページはキャッシュされる ID被りに注意! イベントリスナー登録に注意!
  66. 66. JQM AJAX BEST PRACTICE
  67. 67. JQM AJAX BEST PRACTICEイベントリスナーの登録
  68. 68. JQM AJAX BEST PRACTICEイベントリスナーの登録$(document).ready()
  69. 69. JQM AJAX BEST PRACTICEイベントリスナーの登録$(document).ready()
  70. 70. JQM AJAX BEST PRACTICEイベントリスナーの登録$(document).ready()$(document).on( pageinit , #page-id , ...)
  71. 71. JQM AJAX BEST PRACTICEイベントリスナーの登録 $(document).ready() $(document).on( pageinit , #page-id , ...)Google Analyticsの使い方
  72. 72. JQM AJAX BEST PRACTICEイベントリスナーの登録 $(document).ready() $(document).on( pageinit , #page-id , ...)Google Analyticsの使い方 jQuery Mobile Best Practice みてください
  73. 73. 注意:これはSencha勉強会です。
  74. 74. 彼れを知りて己を知れば、百戦して殆うからず。
  75. 75. 彼れを知りて己を知れば、百戦して殆うからず。双方のメリット/デメリットを知ればバッチリ!
  76. 76. 彼れを知りて己を知れば、百戦して殆うからず。双方のメリット/デメリットを知ればバッチリ! もう、何も恐くない
  77. 77. ここがイケてないよ! jQuery Mobile 6.規模が大きくなると破綻する
  78. 78. JQUERY MOBILE ARCHITECTURE
  79. 79. JQUERY MOBILE ARCHITECTUREMVC Architecture とか特にない
  80. 80. JQUERY MOBILE ARCHITECTUREMVC Architecture とか特にないコンポーネント(widget)の継承とかしない
  81. 81. JQUERY MOBILE ARCHITECTUREMVC Architecture とか特にないコンポーネント(widget)の継承とかしない規模が大きくなるとごちゃごちゃに。。。
  82. 82. JQUERY MOBILE ARCHITECTUREMVC Architecture とか特にないコンポーネント(widget)の継承とかしない規模が大きくなるとごちゃごちゃに。。。 (効果には個人差があります)
  83. 83. SENCHA TOUCH2 ARCHITECTURE Sencha MVC Architecture Sencha Architect / SDK Tools 柔軟なClassとConfigシステム
  84. 84. JQUERY MOBILE X MVC他のMVC Frameworkとの組み合わせ jQM x JavaScriptMVC jQM x Backbone.js jQM x Ember.js
  85. 85. 結 論
  86. 86. jQuer y Mobileやればできる子!
  87. 87. jQuer y Mobileやればできる子!DISる相手間違えた・・・ (́・ω・`)
  88. 88. JQUERY MOBILE PROS
  89. 89. JQUERY MOBILE PROSHTMLだけで簡単にそれっぽいの作れる!
  90. 90. JQUERY MOBILE PROSHTMLだけで簡単にそれっぽいの作れる!対応Platformが多い
  91. 91. JQUERY MOBILE PROSHTMLだけで簡単にそれっぽいの作れる!対応Platformが多いjQuery に慣れていれば簡単
  92. 92. JQUERY MOBILE PROSHTMLだけで簡単にそれっぽいの作れる!対応Platformが多いjQuery に慣れていれば簡単Plugin/Extensionが沢山!
  93. 93. JQUERY MOBILE CONS
  94. 94. JQUERY MOBILE CONS取っ付きやすいように見えて、実は癖が強い しっかり仕組みを理解しないとハマる
  95. 95. JQUERY MOBILE CONS取っ付きやすいように見えて、実は癖が強い しっかり仕組みを理解しないとハマる3rd Party ライブラリ必須 実用ではカスタマイズ必須 いろいろあるけど品質チェックが必要
  96. 96. JQUERY MOBILE CONS取っ付きやすいように見えて、実は癖が強い しっかり仕組みを理解しないとハマる3rd Party ライブラリ必須 実用ではカスタマイズ必須 いろいろあるけど品質チェックが必要まだまだ発展途上 バグ・パフォーマンス問題も多い
  97. 97. Sencha Touch 2 こそ至高
  98. 98. SENCHA TOUCH 2 PROS
  99. 99. SENCHA TOUCH 2 PROSなんでもできる優等生 全部これ一本で完結! 品質・パフォーマンスも良い
  100. 100. SENCHA TOUCH 2 PROSなんでもできる優等生 全部これ一本で完結! 品質・パフォーマンスも良い高い拡張性と保守性 ビルトインMVC 豊富なドキュメント Sencha Market
  101. 101. SENCHA TOUCH 2 CONS
  102. 102. SENCHA TOUCH 2 CONS最初のハードルが高い 全てJSで生成 Sencha Architect という手も
  103. 103. SENCHA TOUCH 2 CONS最初のハードルが高い 全てJSで生成 Sencha Architect という手もファイルサイズがでかい 最初のロードがやや遅い(パフォーマンスとのトレードオフ)
  104. 104. SENCHA TOUCH 2 CONS最初のハードルが高い 全てJSで生成 Sencha Architect という手もファイルサイズがでかい 最初のロードがやや遅い(パフォーマンスとのトレードオフ)サポートPlatformがやや劣る Firefox、Opera 非サポート(Windows 8は対応!)
  105. 105. 文化の違い
  106. 106. 文化の違いjQuery Mobile
  107. 107. 文化の違いjQuery Mobile pluginどんどん入れて、ユーティリティ関数増やす
  108. 108. 文化の違いjQuery Mobile pluginどんどん入れて、ユーティリティ関数増やす phpぽい
  109. 109. 文化の違いjQuery Mobile pluginどんどん入れて、ユーティリティ関数増やす phpぽいSencha Touch 2
  110. 110. 文化の違いjQuery Mobile pluginどんどん入れて、ユーティリティ関数増やす phpぽいSencha Touch 2 クラスベースのオブジェクト指向
  111. 111. 文化の違いjQuery Mobile pluginどんどん入れて、ユーティリティ関数増やす phpぽいSencha Touch 2 クラスベースのオブジェクト指向 Javaぽい
  112. 112. WINNER
  113. 113. WINNERどっちもやれば良いと思うよ
  114. 114. WINNER どっちもやれば良いと思うよモバイルサイトはjQM、アプリ部分はSencha
  115. 115. WINNER どっちもやれば良いと思うよモバイルサイトはjQM、アプリ部分はSencha 組み合わせて利用することもあり。
  116. 116. WINNER どっちもやれば良いと思うよモバイルサイトはjQM、アプリ部分はSencha 組み合わせて利用することもあり。エンジニアとしてはどっちも知っとくとよいよ
  117. 117. EXTRA TOPIC
  118. 118. WEB APP VS NATIVE
  119. 119. WEB APP VS NATIVEWebAppの適用範囲が広がっている &そもそも高機能性が必要ないアプリも多い。
  120. 120. WEB APP VS NATIVEWebAppの適用範囲が広がっている &そもそも高機能性が必要ないアプリも多い。 簡単にjQMでも作れそうなアプリが沢山
  121. 121. WEB APP VS NATIVEWebAppの適用範囲が広がっている &そもそも高機能性が必要ないアプリも多い。 簡単にjQMでも作れそうなアプリが沢山 優れたUXが必要なら Sencha Touch で
  122. 122. WEB APP VS NATIVEWebAppの適用範囲が広がっている &そもそも高機能性が必要ないアプリも多い。 簡単にjQMでも作れそうなアプリが沢山 優れたUXが必要なら Sencha Touch で今後もますますWebAppFrameworkは熱い!
  123. 123. WEB APP VS NATIVEWebAppの適用範囲が広がっている &そもそも高機能性が必要ないアプリも多い。 簡単にjQMでも作れそうなアプリが沢山 優れたUXが必要なら Sencha Touch で今後もますますWebAppFrameworkは熱い!今のうちに勉強しておきましょう!
  124. 124. ONE MORE THING
  125. 125. XTemplate の可能性
  126. 126. XTEMPLATE
  127. 127. XTEMPLATEもともと「XTemplateでデザイナーさんとも協業!」というタイトルでした。
  128. 128. XTEMPLATEもともと「XTemplateでデザイナーさんとも協業!」というタイトルでした。XTemplate とは Senchaのテンプレートシステム 文字列とデータからHTMLを生成 XTemplate#from でdom要素からもできる
  129. 129. XTEMPLATE
  130. 130. XTEMPLATESencha Touch の Weak Point 全てJSで作るのでサイトは苦手
  131. 131. XTEMPLATESencha Touch の Weak Point 全てJSで作るのでサイトは苦手モバイルサイト(not App)は jQM に軍配
  132. 132. XTEMPLATESencha Touch の Weak Point 全てJSで作るのでサイトは苦手モバイルサイト(not App)は jQM に軍配Sencha Touch でもモバイルサイトができないか jQMとの比較を考えてたら今回のになった・・・
  133. 133. XTEMPLATE
  134. 134. XTEMPLATEXTemplate 応用すれば、HTMLベースでスマホサイトが作れる!かも Sencha Touch 1本でアプリもサイトも!
  135. 135. XTEMPLATEXTemplate 応用すれば、HTMLベースでスマホサイトが作れる!かも Sencha Touch 1本でアプリもサイトも!jQuery Mobile テンプレートから、Sencha コンポーネントを構築できるとおもしろい!
  136. 136. COMING SOON

×