Sencha UG @大阪

自己紹介• 中村久司 • Sencha UG Co-Organizer • 株式会社ゼノフィ関西事業所 事業所長 • Sencha オフィシャルトレーナー • 著書 • Sencha Touch 2 実践開発ガイド

@martini3oz

2010Sencha Touch 1.0

2012Sencha Touch 2.0

タッチデバイスのサポート• Ext JS 4 までは、ブラウザ用フレームワークと言うことで、タッチデバイスのサポートはなかった。

• Ext JS 4 のアプリをタブレットで動かすことはできたが、一部おかしいところとか

操作できないところがあった。

イベント正規化• タッチイベント／ポインターイベント／マウスイベント • mousedown リスナーをセットすると • タッチをサポートする場合は touchstart • ポインターをサポートする場合は pointerdown • 自動的に変換してくれる

ジェスチャー• 複雑なジェスチャーイベントも標準でサポート • drag、 swipe、 longpress、 • pinch、 rotate、 tap • someElement.on(‘swipe’, …) と簡単に使える

代わりがないイベント• mouseover, mouseenter, mouseout, mouseleave • タッチデバイスではこれらに替わるものはないので、使っている場合は、なんらかの代替策を考える

• Grid のヘッダーメニュー • PCのブラウザ → ヘッダへのmouseoverで表示される • タブレット → ヘッダの longpress で表示される

MVVM アーキテクチャ• MVC から MVVM へ • SPA では、保持している値と画面表示 (DOM) の同期をとるためのコードであふれることがある

• その対策として考えられたのがデータバインディングであり、MVVM アーキテクチャ

• ViewModel による View への双方向データバインディング

ViewModel• View の viewModel コンフィグで指定する • ViewModel が保持するデータが変更されたら、それが自動的に View に反映される (表示が更新される)

• フォームにバインドされた場合は、フィールドの値が変えられたら、ViewModelのデータも更新される

• data / stores / formulas

ViewController• View の controller コンフィグで指定する • イベントハンドラ • View では ViewController にあるイベントハンドラ名を文字列で指定するだけ。

• reference と lookupReference()

ライフサイクル• どちらも View のインスタンスと一蓮托生 • View のインスタンスが作られると、ViewModel も ViewController も作られ、破棄されるとなくなる

• 通常の Controller は、アプリが終わるまで存在しつづける • 通常の Controller の利用場面は限定的になる

DEMO

ルーティング• Ext JS アプリはSPAだからページ遷移はない • # によるディープリンクをつけることでブラウザの履歴を記録できる

• ディープリンク以降の文字列を解釈して、アプリのある局面を表示させる手段

• 実際にはメソッドが呼び出される

レスポンシブ• 一つのアプリで全てのデバイス・場面に対応する • 小さい画面、大きい画面、横向き、縦向き • CSS のメディアクエリでの切り替え • リキッドレイアウト • で実現

レスポンシブコンフィグ• Sencha は JavaScript で解決する。 • Sencha Touch ではデバイスプロファイル。 • Ext JS 5 ではレスポンシブコンフィグ • デバイスの様々な情報を組み合わせて、コンポーネントの設定が変更できるようになっている

DEMO

データパッケージの改善• rawData の廃止 • fields 定義が基本的に不要 • チェーンドストア • 他のストアを参照するストア、独自のフィルタ、ソート • カスタムフィールド • 独自のフィールドタイプを設定できる、コード重複回避

Sencha チャート• Sencha Touch に採用されていた HTML5 ベースの新しいチャートパッケージ

• Canvas を使うことで表現力UP • スワイプ／ズームなどのインタラクションにも対応

• チャートの種類も増えた

グリッドの進化• セル内のコンポーネント • セルアップデーター • レンダリングの高速化 • ウィジェット

他にも沢山• タグフィールド

• セグメンテッドボタン

• トリガー

• ダッシュボード

• Ext.mixin.Mashup

• private メソッド

• コンフィグシステム

• アソシエーション

• Sencha Cmd

ご清聴ありがとうございました