俺聞け9 で発表した資料です。 Web 業務アプリケーションの新しい潮流として、Single Page Application と Sencha フレームワークについて紹介します。

1. Web業務アプリの新しい潮流
Single Page Application そして Sencha

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

3. 業務アプリの歴史

4. メインフレーム
全てはホスト側で
端末はダム端末

5. クラサバ

6. クラサバ
やれることはクライアント側で
インターフェースもリッチでいいね
クライアント重すぎ
管理が大変

7. Web アプリ

8. Web アプリ
クライアントの管理が楽
ブラウザ互換で苦しむ
見た目と操作性が犠牲に

9. Single Page App

10. Single Page App
クライアントの管理が楽 ブラウザ互換はいまだに問題
見た目と操作性は飛躍的に向上

11. Single Page App
• ページ遷移をなくして、HTML5 / JavaScript の仕組みを
使ってクライアント側で画面を書き換え
• クライアントリッチな方向へ
• かわりにサーバーサイドは Thin になる
• MVC などのアーキテクチャがクライアント側に

12. MVなんとかのフレームワーク

13. たくさんあります
他にもたくさん十種類以上！！

14. たくさんあります
他にもたくさん十種類以上！！

15. ＿人人人人人人＿
＞ Sencha!! ＜
￣Y^Y^Y^Y^Y￣

16. Sencha ってなに？
(´･ω･`)

17. • カリフォルニア州レッドウッドシティにある企業
• HTML5について先駆者として取り組み
• フレームワーク／ツール／サービスを提供
Sencha 社

18. Sencha 製品
Sencha Ext JS
Sencha Touch
Sencha GXT
Sencha Architect
Sencha Cmd
Sencha Animator
Support
Training
Sencha Space
フレームワーク層 ツール層 サービス層

19. Sencha 製品
Sencha Ext JS
Sencha Touch
Sencha GXT
Sencha Architect
Sencha Cmd
Sencha Animator
Support
Training
Sencha Space
フレームワーク層 ツール層 サービス層

20. Sencha Ext JS

21. Sencha Ext JS 5
• 豊富なUIコンポーネント
• 堅牢なクラスシステム
• クロスブラウザ対応
• プラグイン不要のチャート
• MVC / MVVM アーキテクチャ
全てのブラウザでリッチなアプリを作成するための
HTML5 / JavaScript フレームワーク

22. オールインワン
• アプリケーションの構造 ̶ Backborn.js / Knockout.jsなど
• 画面を構成するウィジェット ̶ jQuery など
• スキャフォルディング ̶ Yoeman
• ビルド／デプロイ ̶ Grant / gulp

23. オールインワン
• アプリケーションの構造
• 画面を構成するウィジェット
• スキャフォルディング
• ビルド／デプロイ
すべてを
Sencha で

24. HTMLほとんど書かない
• Web アプリなのに HTML はほとんど書きません
• 画面にコンポーネント配置するのも全部 JavaScript
• プログラマ向け、クラサバから転職もありかも
• デザインの当て込みには SASS / Compass

25. JSのプロトタイプとか…
• 独自のクラスシステムを JavaScript 上に構築
• そのシステムを使ってフレームワークを構成
• アプリケーションを書くときもそのクラスシステムのルール
で書いてゆく

26. Sencha UG
• 定期的に Sencha の勉強会とかやっています
• http://www.meetup.com/Japan-Sencha-User-Group/
• https://atnd.org/users/160956

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