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