Sencha Touch 2 vs jQuery Mobile

15,891 views

Published on

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

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

Published in: Technology
0 Comments
54 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,891
On SlideShare
0
From Embeds
0
Number of Embeds
257
Actions
Shares
0
Downloads
132
Comments
0
Likes
54
Embeds 0
No embeds

No notes for slide
  • Sencha Touch2 vs jQuery Mobile\njquery mobileが許されるのは素人までだよねww\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • icon pack: 173個 Retina対応\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×