• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sencha Touch 2 vs jQuery Mobile
 

Sencha Touch 2 vs jQuery Mobile

on

  • 14,568 views

SenchaUG 勉強会 第2回@東京 での発表資料。

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

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

Statistics

Views

Total Views
14,568
Views on SlideShare
14,405
Embed Views
163

Actions

Likes
50
Downloads
120
Comments
0

13 Embeds 163

http://slide.yoshiday.net 82
https://twitter.com 29
http://s.deeeki.com 18
http://blog.local 14
https://si0.twimg.com 4
http://twitter.com 4
http://wiki.onakasuita.org 4
http://www.slashdocs.com 3
http://sc.dotbranch.com 1
http://tweetedtimes.com 1
http://localhost 1
https://web.tweetdeck.com 1
https://cybozulive.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Sencha Touch 2 vs jQuery Mobile Presentation Transcript

  • Touch 2 vsjQuery Mobileが許されるのは素人までだよねww DeveloperならやっぱりSencha Touch! 2012.11.08 SenchaUG 勉強会 第2回@東京 @dsuket
  • ABOUT ME高岡大介お仕事 フリーエージェント Inkpod Webの開発 @ITに記事かきました (HTML5アプリのタッチ UX) Inkpod Web Twitter: @dsuket
  • ABOUT ME高岡大介お仕事 フリーエージェント Inkpod Webの開発 new! @ITに記事かきました (HTML5アプリのタッチ UX) Inkpod Web Twitter: @dsuket
  • いきさつ
  • いきさつSencha Touch Lover です。
  • いきさつSencha Touch Lover です。最近は jQuery Mobileのお仕事も増えた。
  • いきさつSencha Touch Lover です。最近は jQuery Mobileのお仕事も増えた。jQM 使いづれーーー!!!
  • いきさつSencha Touch Lover です。最近は jQuery Mobileのお仕事も増えた。jQM 使いづれーーー!!!Sencha ならもっと るのに。。。
  • いきさつSencha Touch Lover です。最近は jQuery Mobileのお仕事も増えた。jQM 使いづれーーー!!!Sencha ならもっと るのに。。。jQuery Mobileを全力でdisるお! (`・ω・́)
  • そのまえに、少しおさらい
  • SENCHA TOUCH 2THE BEST FRAMEWORK JUST GOT BETTER
  • SENCHA TOUCH 2✴ 洗練されたデザイン✴ 高いパフォーマンス✴ 50以上の豊富なコンポーネント✴ 柔軟なADAPTIVE LAYOUTS✴ NATIVE PACKAGING✴ HISTORY状態管理✴ 拡張性のあるクラスシステム✴ 堅牢なビルトインMVC✴ and more...
  • by kawanoshinobu
  • 最高のパフォーマンスと 驚きの体験を圧倒的な速さで実現します。
  • 最高のパフォーマンスと 驚きの体験を圧倒的な速さで実現します。そう Sencha Touch 2 ならね
  • ここがイケてないよ!
  • ここがイケてないよ!
  • ここがイケてないよ! jQuery Mobile 1.デザインがダサイ
  • JQUERY MOBILE DESIGN
  • なんでこんなに丸いの?
  • なんでこんなに丸いの?ドロップシャドウ付けすぎ!
  • なんでこんなに丸いの?ドロップシャドウ付けすぎ!アイコン小さすぎ&種類少なすぎ
  • 最近のデザインは何も考えずに角丸とかドロップシャドウ付けすぎ。いかに削るかが重要。 by mskwtnb
  • SENCHA TOUCH 2 DESIGNSimpleかつElegantなデザイン高品質な300個以上のビルトインアイコン!
  • SENCHA 圧勝
  • SENCHA 圧勝 ちょっとまて
  • JQM 3RD PARTY PLUGINS3rd party plugins/extensions で色々あるよ! jQuery Mobile Icon Pack iOS inspired theme jQuery-Mobile-Bootstrap-Theme
  • ここがイケてないよ! jQuery Mobile 2.テーマのカスタマイズ が難しい
  • ThemeRoller
  • JQUERY MOBILE THEME
  • JQUERY MOBILE THEMEThemeRoller 使いにくい!
  • JQUERY MOBILE THEMEThemeRoller 使いにくい! いっぺんに全部変更スンナ
  • JQUERY MOBILE THEMEThemeRoller 使いにくい! いっぺんに全部変更スンナ 俺が欲しいのはボタン1個なんだよ!
  • JQUERY MOBILE THEMEThemeRoller 使いにくい! いっぺんに全部変更スンナ 俺が欲しいのはボタン1個なんだよ!LESS/SASS ほすぃ
  • SENCHA TOUCH 2 THEMECompass/Sass で楽々カスタマイズ変数、Mix-In など便利機能満載Theme Contest
  • JQM 3RD PARTY EXTENSIONSjQuery Mobile Less Version コンポーネント毎にLESSで定義 変数、Mix-Inも使える
  • JQM 3RD PARTY EXTENSIONSjQuery Mobile Less Version コンポーネント毎にLESSで定義 変数、Mix-Inも使える あれ?結構つかえるかも・・
  • ここがイケてないよ! jQuery Mobile 3.コンポーネントが 少ない!!
  • JQUERY MOBILE WIDGETform系は結構充実ActionSheetやOverlay、AlertがないTab、Carouselもない
  • SENCHA TOUCH 2 COMPONENT50以上のコンポーネントOverlayはもちろん、Tab、Carouselも!
  • どうせ 3RDにあるんでしょ?
  • ありました
  • ありましたむしろ本体(1.2)でOverlayできるようになってた...
  • ありましたむしろ本体(1.2)でOverlayできるようになってた...ver1.4 でTab、1.5でCarousel対応予定
  • ありましたむしろ本体(1.2)でOverlayできるようになってた...ver1.4 でTab、1.5でCarousel対応予定その他便利なPlugins
  • ありましたむしろ本体(1.2)でOverlayできるようになってた...ver1.4 でTab、1.5でCarousel対応予定その他便利なPlugins jQM Pagenation
  • ありましたむしろ本体(1.2)でOverlayできるようになってた...ver1.4 でTab、1.5でCarousel対応予定その他便利なPlugins jQM Pagenation jquery.mobile.actionsheet
  • ありましたむしろ本体(1.2)でOverlayできるようになってた...ver1.4 でTab、1.5でCarousel対応予定その他便利なPlugins jQM Pagenation jquery.mobile.actionsheet JQuery-Mobile-Slide-Menu
  • ここがイケてないよ! jQuery Mobile 4.レイアウトが貧弱、 貧弱ゥ!!
  • 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>
  • JQUERY MOBILE LAYOUT
  • JQUERY MOBILE LAYOUTaが2カラム、bが3カラムってどうなのよ。。
  • JQUERY MOBILE LAYOUTaが2カラム、bが3カラムってどうなのよ。。2∼5カラムまでしかない
  • JQUERY MOBILE LAYOUTaが2カラム、bが3カラムってどうなのよ。。2∼5カラムまでしかないoffsetやカラムサイズを指定できない (入れ子にすればいいけど、めんどくさい)
  • JQUERY MOBILE LAYOUTaが2カラム、bが3カラムってどうなのよ。。2∼5カラムまでしかないoffsetやカラムサイズを指定できない (入れ子にすればいいけど、めんどくさい)Responsive Web Design 非対応
  • SENCHA TOUCH 2 LAYOUTAdaptive Layout HBox, VBox, Card, Fit, Docking Pack and Align
  • あきらめないで!jQM 次期リリース 1.3 でRWD対応! レスポンシブテーブル グリッドレイアウトの動的変更 レスポンシブグリッド
  • ここがイケてないよ! jQuery Mobile 5.AJAXページロード の落とし穴
  • JQUERY MOBILE AJAXjQMは基本Ajaxでページ遷移する。これが諸々問題を引き起こす HEAD BODY Page1
  • JQUERY MOBILE AJAXjQMは基本Ajaxでページ遷移する。これが諸々問題を引き起こす HEAD HEAD BODY BODY Page1 Page2
  • JQUERY MOBILE AJAXjQMは基本Ajaxでページ遷移する。これが諸々問題を引き起こす HEAD HEAD ajaxでロード BODY BODY Page1 Page2
  • JQUERY MOBILE AJAXjQMは基本Ajaxでページ遷移する。これが諸々問題を引き起こす HEAD HEAD ajaxでロード BODY BODY bodyだけ入れ替え Page1 Page2
  • JQM AJAX PROBLEM
  • JQM AJAX PROBLEMHEADは全体で一回しか読まない CSS、JavaScriptは全体で共通 Google Analyticsなどは注意!
  • JQM AJAX PROBLEMHEADは全体で一回しか読まない CSS、JavaScriptは全体で共通 Google Analyticsなどは注意!直前のページはキャッシュされる ID被りに注意! イベントリスナー登録に注意!
  • JQM AJAX BEST PRACTICE
  • JQM AJAX BEST PRACTICEイベントリスナーの登録
  • JQM AJAX BEST PRACTICEイベントリスナーの登録$(document).ready()
  • JQM AJAX BEST PRACTICEイベントリスナーの登録$(document).ready()
  • JQM AJAX BEST PRACTICEイベントリスナーの登録$(document).ready()$(document).on( pageinit , #page-id , ...)
  • JQM AJAX BEST PRACTICEイベントリスナーの登録 $(document).ready() $(document).on( pageinit , #page-id , ...)Google Analyticsの使い方
  • JQM AJAX BEST PRACTICEイベントリスナーの登録 $(document).ready() $(document).on( pageinit , #page-id , ...)Google Analyticsの使い方 jQuery Mobile Best Practice みてください
  • 注意:これはSencha勉強会です。
  • 彼れを知りて己を知れば、百戦して殆うからず。
  • 彼れを知りて己を知れば、百戦して殆うからず。双方のメリット/デメリットを知ればバッチリ!
  • 彼れを知りて己を知れば、百戦して殆うからず。双方のメリット/デメリットを知ればバッチリ! もう、何も恐くない
  • ここがイケてないよ! jQuery Mobile 6.規模が大きくなると破綻する
  • JQUERY MOBILE ARCHITECTURE
  • JQUERY MOBILE ARCHITECTUREMVC Architecture とか特にない
  • JQUERY MOBILE ARCHITECTUREMVC Architecture とか特にないコンポーネント(widget)の継承とかしない
  • JQUERY MOBILE ARCHITECTUREMVC Architecture とか特にないコンポーネント(widget)の継承とかしない規模が大きくなるとごちゃごちゃに。。。
  • JQUERY MOBILE ARCHITECTUREMVC Architecture とか特にないコンポーネント(widget)の継承とかしない規模が大きくなるとごちゃごちゃに。。。 (効果には個人差があります)
  • SENCHA TOUCH2 ARCHITECTURE Sencha MVC Architecture Sencha Architect / SDK Tools 柔軟なClassとConfigシステム
  • JQUERY MOBILE X MVC他のMVC Frameworkとの組み合わせ jQM x JavaScriptMVC jQM x Backbone.js jQM x Ember.js
  • 結 論
  • jQuer y Mobileやればできる子!
  • jQuer y Mobileやればできる子!DISる相手間違えた・・・ (́・ω・`)
  • JQUERY MOBILE PROS
  • JQUERY MOBILE PROSHTMLだけで簡単にそれっぽいの作れる!
  • JQUERY MOBILE PROSHTMLだけで簡単にそれっぽいの作れる!対応Platformが多い
  • JQUERY MOBILE PROSHTMLだけで簡単にそれっぽいの作れる!対応Platformが多いjQuery に慣れていれば簡単
  • JQUERY MOBILE PROSHTMLだけで簡単にそれっぽいの作れる!対応Platformが多いjQuery に慣れていれば簡単Plugin/Extensionが沢山!
  • JQUERY MOBILE CONS
  • JQUERY MOBILE CONS取っ付きやすいように見えて、実は癖が強い しっかり仕組みを理解しないとハマる
  • JQUERY MOBILE CONS取っ付きやすいように見えて、実は癖が強い しっかり仕組みを理解しないとハマる3rd Party ライブラリ必須 実用ではカスタマイズ必須 いろいろあるけど品質チェックが必要
  • JQUERY MOBILE CONS取っ付きやすいように見えて、実は癖が強い しっかり仕組みを理解しないとハマる3rd Party ライブラリ必須 実用ではカスタマイズ必須 いろいろあるけど品質チェックが必要まだまだ発展途上 バグ・パフォーマンス問題も多い
  • Sencha Touch 2 こそ至高
  • SENCHA TOUCH 2 PROS
  • SENCHA TOUCH 2 PROSなんでもできる優等生 全部これ一本で完結! 品質・パフォーマンスも良い
  • SENCHA TOUCH 2 PROSなんでもできる優等生 全部これ一本で完結! 品質・パフォーマンスも良い高い拡張性と保守性 ビルトインMVC 豊富なドキュメント Sencha Market
  • SENCHA TOUCH 2 CONS
  • SENCHA TOUCH 2 CONS最初のハードルが高い 全てJSで生成 Sencha Architect という手も
  • SENCHA TOUCH 2 CONS最初のハードルが高い 全てJSで生成 Sencha Architect という手もファイルサイズがでかい 最初のロードがやや遅い(パフォーマンスとのトレードオフ)
  • SENCHA TOUCH 2 CONS最初のハードルが高い 全てJSで生成 Sencha Architect という手もファイルサイズがでかい 最初のロードがやや遅い(パフォーマンスとのトレードオフ)サポートPlatformがやや劣る Firefox、Opera 非サポート(Windows 8は対応!)
  • 文化の違い
  • 文化の違いjQuery Mobile
  • 文化の違いjQuery Mobile pluginどんどん入れて、ユーティリティ関数増やす
  • 文化の違いjQuery Mobile pluginどんどん入れて、ユーティリティ関数増やす phpぽい
  • 文化の違いjQuery Mobile pluginどんどん入れて、ユーティリティ関数増やす phpぽいSencha Touch 2
  • 文化の違いjQuery Mobile pluginどんどん入れて、ユーティリティ関数増やす phpぽいSencha Touch 2 クラスベースのオブジェクト指向
  • 文化の違いjQuery Mobile pluginどんどん入れて、ユーティリティ関数増やす phpぽいSencha Touch 2 クラスベースのオブジェクト指向 Javaぽい
  • WINNER
  • WINNERどっちもやれば良いと思うよ
  • WINNER どっちもやれば良いと思うよモバイルサイトはjQM、アプリ部分はSencha
  • WINNER どっちもやれば良いと思うよモバイルサイトはjQM、アプリ部分はSencha 組み合わせて利用することもあり。
  • WINNER どっちもやれば良いと思うよモバイルサイトはjQM、アプリ部分はSencha 組み合わせて利用することもあり。エンジニアとしてはどっちも知っとくとよいよ
  • EXTRA TOPIC
  • WEB APP VS NATIVE
  • WEB APP VS NATIVEWebAppの適用範囲が広がっている &そもそも高機能性が必要ないアプリも多い。
  • WEB APP VS NATIVEWebAppの適用範囲が広がっている &そもそも高機能性が必要ないアプリも多い。 簡単にjQMでも作れそうなアプリが沢山
  • WEB APP VS NATIVEWebAppの適用範囲が広がっている &そもそも高機能性が必要ないアプリも多い。 簡単にjQMでも作れそうなアプリが沢山 優れたUXが必要なら Sencha Touch で
  • WEB APP VS NATIVEWebAppの適用範囲が広がっている &そもそも高機能性が必要ないアプリも多い。 簡単にjQMでも作れそうなアプリが沢山 優れたUXが必要なら Sencha Touch で今後もますますWebAppFrameworkは熱い!
  • WEB APP VS NATIVEWebAppの適用範囲が広がっている &そもそも高機能性が必要ないアプリも多い。 簡単にjQMでも作れそうなアプリが沢山 優れたUXが必要なら Sencha Touch で今後もますますWebAppFrameworkは熱い!今のうちに勉強しておきましょう!
  • ONE MORE THING
  • XTemplate の可能性
  • XTEMPLATE
  • XTEMPLATEもともと「XTemplateでデザイナーさんとも協業!」というタイトルでした。
  • XTEMPLATEもともと「XTemplateでデザイナーさんとも協業!」というタイトルでした。XTemplate とは Senchaのテンプレートシステム 文字列とデータからHTMLを生成 XTemplate#from でdom要素からもできる
  • XTEMPLATE
  • XTEMPLATESencha Touch の Weak Point 全てJSで作るのでサイトは苦手
  • XTEMPLATESencha Touch の Weak Point 全てJSで作るのでサイトは苦手モバイルサイト(not App)は jQM に軍配
  • XTEMPLATESencha Touch の Weak Point 全てJSで作るのでサイトは苦手モバイルサイト(not App)は jQM に軍配Sencha Touch でもモバイルサイトができないか jQMとの比較を考えてたら今回のになった・・・
  • XTEMPLATE
  • XTEMPLATEXTemplate 応用すれば、HTMLベースでスマホサイトが作れる!かも Sencha Touch 1本でアプリもサイトも!
  • XTEMPLATEXTemplate 応用すれば、HTMLベースでスマホサイトが作れる!かも Sencha Touch 1本でアプリもサイトも!jQuery Mobile テンプレートから、Sencha コンポーネントを構築できるとおもしろい!
  • COMING SOON