なぜ enterprise は sencha を選ぶのか？
TRANSCRIPT
なぜ Enterprise は
Sencha を選ぶのか株式会社ゼノフィ 中村久司
自己紹介• 中村久司 • Sencha UG Co-Organizer • 株式会社ゼノフィ関西事業所 事業所長 • Sencha オフィシャルトレーナー
著書• Sencha Touch 2 実践開発ガイド • HTML5/JavaScriptモバイル アプリケーション フレーム
ワークであるSencha Touchは、 iOS、Androidを始めとす
る多くのプラットフォーム上で、ネィティブに負けないアプ
リをスピーディに開発できる唯一のフレームワークであるこ
とで、世界中のデベロッパーの関心を集めています。
• 本書では、Sencha Touchを使ってのモバイル アプリケー
ション作成を手助けする、実践的な内容を盛り込みました。
はじめに
はじめに• Angular JS などのオープンソースプロジェクトは、どれも素晴らしいものです。
• 素晴らしい開発者が開発して管理されています。
• Web の世界をより良くしようと作られています。
• それは今日の他の方達の発表でも分かるでしょう。
得手・不得手• それぞれのフレームワークやライブラリには「得意とするところ」があるはずです
• 「得意とするところ」を理解して適したフィールドで使う
• それこそが今日のイベントの目的です
• そして、Sencha にとってのそれは、
Enterprise Web Application
企業用アプリケーションを作るのであれば Sencha を使うのが
一番ふさわしい (Arthur Kay)
なぜか
HTML5
SPA作成の現状
現在の主流
複数の小さなフレームワーク／ライブラリを組み合わせて使う。
Angular JS
• Angular JS のトップページには次の説明があります
• AngularJS is a toolset for building the framework most suited to your application development.
• 「フレームワークを構築するためのツールキット」
自分で組み合わせる
「あなたのアプリケーションに最適なフレームワークを作る」
必要がある
組み合わせること..
• それぞれのアーキテクチャに共通点がない • さまざまなソースコードスタイル • 機能の重複 • 自力で組み合わせた結果、オレオレフレームワークが • 統合するためのツールが必要
広汎な知識が
• アプリケーションの構造 ̶ Backborn.js / Angular.jsなど • 画面を構成するウィジェット ̶ jQuery / Bootstrap など • 依存性管理 ̶ Require.js など • スキャフォルディング ̶ Yoeman • ビルド／デプロイ ̶ Grant / gulp
オープンソースの世界
• Github の JavaScript リポジトリ -> 120万超
• CSS リポジトリ -> 20万以上
• そのうち 98% は 1年経過するだけで管理されなくなる
• 長く使われるアプリに適用するにはリスクが伴う
企業アプリが求めるもの
企業アプリが求めるもの
• 長期間にわたって安定して稼働すること
• 継続して機能追加や改良が行えること
• 大きなチームで開発できる統一された開発ルールがあること
• しっかりとしたサポートがあること
企業用アプリケーションの寿命
• 短くても 5年
• 長ければ 10年以上
• 保守にはソフトウェアのコストの40%～80% (平均60%) がかかる。(ロバート・L・グラス)
Enterprise Web Application
企業用アプリケーションを作るのであれば Sencha を使うのが
一番ふさわしい (Arthur Kay)
Sencha とは
• カリフォルニア州レッドウッドシティにある企業
• HTML5について先駆者として取り組み
• フレームワーク／ツール／サービスを提供
Sencha 社
Sencha 製品
Sencha Ext JS Sencha Touch Sencha GXT
Sencha Architect Sencha Cmd
Plugins
Support Training
Sencha Space
フレームワーク層 ツール層 サービス層
Fortune 100 の 50% の企業が Sencha を採用しています
なぜ Enterprise は
Sencha を選ぶのか
オールインワン
• フレームワーク - Ext JS / Sencha Touchch
• 開発ツール - Sencha Cmd / Architect
• 教育 - Training (日本でもやってます)
• サポート
すべてを Sencha で
2010Sencha Touch 1.0
2012Sencha Touch 2.0
最新のトレンドを取り込みながら進化を続けている
REST
MVC MVVM
フレームワーク
Sencha Ext JS 5
• 豊富なUIコンポーネント
• 堅牢なクラスシステム
• マルチデバイス／クロスブラウザ
• タッチ操作対応、テーマ操作
• MVC / MVVM アーキテクチャ
• 依存性管理、動的ローディング
全てのブラウザでリッチなアプリを作成するためのHTML5 / JavaScript フレームワーク
統一されたアーキテクチャ• クラスシステム、MVC/MVVM、動的ローディングで、チームでの分業が可能に
• 明確なコーディングルールで、単一のコードスタイル
• フレームワークの守備範囲が広く、単一のアーキテクチャの中での開発ができる
HTMLほとんど書かない• Web アプリなのに HTML はほとんど書きません • テンプレートとかでほんの少し書くぐらい • 画面にコンポーネント配置するのも全部 JavaScript • プログラマ向け、クラサバから転職もありかも • デザインが苦手でもそれなりの見た目のアプリが • デザインのカスタマイズも SASS / Compass で可能
1 <!DOCTYPE HTML>! 2 <html manifest="">! 3 <head>! 4 <meta http-equiv="X-UA-Compatible" content="IE=edge">! 5 <meta charset="UTF-8">! 6 ! 7 <title>MyApp</title>! 8 ! 9 <!-- The line below must be kept intact for Sencha Cmd to build your application -->!10 <script id="microloader" type="text/javascript" src="bootstrap.js"></script>!11 !12 </head>!13 <body></body>!14 </html>!
1 /**! 2 * Define view class! 3 */! 4 Ext.define('MyApp.view.Grid', {! 5 extend: 'Ext.grid.Panel',! 6 requires: ['Ext.selection.CheckboxModel'],! 7 title: 'Simpsons',! 8 bind: {! 9 store: 'simpsonsStore',!10 },!11 selModel: 'checkboxmodel',!12 columns: [!13 { text: 'Name', dataIndex: 'name' },!14 { text: 'Email', dataIndex: 'email', flex: 1 },!15 { text: 'Phone', dataIndex: 'phone' }!16 ]!17 });!
Class 定義
継承
依存するクラス
1ファイルに 1クラス
開発ツール
CUI ツール - Sencha Cmd
• アプリケーションの雛形をスキャッフォルディング • アプリケーションの部品を生成 • アプリケーション／パッケージ／テーマをビルド • 必要な JS ファイルのみを集めて最小化 • 必要な SASS ファイルのみをコンパイル
GUIツール - Sencha Architect• ドラッグ＆ドロップで部品を配置 • Visual Studio のようなインターフェースで画面を作成 • テンプレートでアプリケーションの雛形を作成 • Sencha 社のベストプラクティスなコードを生成
• そのままビルドも可能
教育とサポート
教育とサポート• 世界中でトレーニングを開催 (もちろん日本も) • 最初の 1週間で集中的に学ぶことで Sencha での開発パターン
を身につける
• サポートフォーラムでの質問 • ライセンスに付帯するクレジットで質問 • 企業ユーザーにはさらにプロフェッショナルサービスも
日本では？• トレーニングは日本でも開催中 (Xenophy) • 日本法人が設立される予定 • サポート問合せは残念ながら英語のみ • プロフェッショナルサービスは英語のみだが、Xenophy では、コンサルティングサービスを提供中。
• Sencha 公式サイト
• http://www.sencha.com/ • Xenophy • http://www.xenophy.com/ • Sencha Learning Place • http://www.xenophy.com/learning_place/
• 動画 - なぜ Sencha を選ぶべきか
• https://vimeo.com/116213369
• 動画 - 企業ソフト開発でのJavaScriptのROIを分析する
• https://vimeo.com/116823544
Sencha UG
• 定期的に Sencha の勉強会とかやっています
• http://www.meetup.com/Japan-Sencha-User-Group/
• https://atnd.org/users/160956
ご清聴ありがとうございました