Download as PDF, PPTX
![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クラス](https://image.slidesharecdn.com/whysencha-150126072638-conversion-gate01/85/Enterprise-Sencha-34-320.jpg)
Uploaded by久司 中村
なぜ Enterprise は Sencha を選ぶのか？
DevLove 関西のイベント、JavaScript フレームワークは Angular JS だけじゃない！ - DevLOVE関西 | Doorkeeper - http://devlove-kansai.doorkeeper.jp/events/18921 で発表した資料です。
More Related Content
![[社内勉強会]SPAのすすめ](https://cdn.slidesharecdn.com/ss_thumbnails/spa-160304020346-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to なぜ Enterprise は Sencha を選ぶのか？
なぜ Enterprise は Sencha を選ぶのか？
- 1. なぜ Enterprise は Senchaを選ぶのか 株式会社ゼノフィ 中村久司
- 2. 自己紹介 • 中村久司 • SenchaUG Co-Organizer • 株式会社ゼノフィ関西事業所 事業所長 • Sencha オフィシャルトレーナー
- 3. 著書 • Sencha Touch2 実践開発ガイド • HTML5/JavaScriptモバイル アプリケーション フレーム ワークであるSencha Touchは、 iOS、Androidを始めとす る多くのプラットフォーム上で、ネィティブに負けないアプ リをスピーディに開発できる唯一のフレームワークであるこ とで、世界中のデベロッパーの関心を集めています。 • 本書では、Sencha Touchを使ってのモバイル アプリケー ション作成を手助けする、実践的な内容を盛り込みました。
- 4.
- 5. はじめに • Angular JSなどのオープンソースプロジェクトは、どれも 素晴らしいものです。 • 素晴らしい開発者が開発して管理されています。 • Web の世界をより良くしようと作られています。 • それは今日の他の方達の発表でも分かるでしょう。
- 7. 得手・不得手 • それぞれのフレームワークやライブラリには「得意とすると ころ」があるはずです • 「得意とするところ」を理解して適したフィールドで使う •それこそが今日のイベントの目的です • そして、Sencha にとってのそれは、
- 8. Enterprise Web Application 企業用アプリケーションを作るのであればSencha を使うのが 一番ふさわしい (Arthur Kay) なぜか
- 9.
- 10.
- 11. Angular JS • AngularJS のトップページには次の説明があります • AngularJS is a toolset for building the framework most suited to your application development. • 「フレームワークを構築するためのツールキット」
- 13.
- 14. 組み合わせること.. • それぞれのアーキテクチャに共通点がない • さまざまなソースコードスタイル •機能の重複 • 自力で組み合わせた結果、オレオレフレームワークが • 統合するためのツールが必要
- 16. 広汎な知識が • アプリケーションの構造 ̶Backborn.js / Angular.jsなど • 画面を構成するウィジェット ̶ jQuery / Bootstrap など • 依存性管理 ̶ Require.js など • スキャフォルディング ̶ Yoeman • ビルド／デプロイ ̶ Grant / gulp
- 17. オープンソースの世界 • Github のJavaScript リポジトリ -> 120万超 • CSS リポジトリ -> 20万以上 • そのうち 98% は 1年経過するだけで管理されなくなる • 長く使われるアプリに適用するにはリスクが伴う
- 18.
- 19. 企業アプリが求めるもの • 長期間にわたって安定して稼働すること • 継続して機能追加や改良が行えること •大きなチームで開発できる統一された開発ルールがあること • しっかりとしたサポートがあること
- 20. 企業用アプリケーションの寿命 • 短くても 5年 •長ければ 10年以上 • 保守にはソフトウェアのコストの40%∼80% (平均60%) がかかる。(ロバート・L・グラス)
- 21. Enterprise Web Application 企業用アプリケーションを作るのであればSencha を使うのが 一番ふさわしい (Arthur Kay) Sencha とは
- 22. • カリフォルニア州レッドウッドシティにある企業 • HTML5について先駆者として取り組み •フレームワーク／ツール／サービスを提供 Sencha 社
- 23. Sencha 製品 Sencha ExtJS Sencha Touch Sencha GXT Sencha Architect Sencha Cmd Plugins Support Training Sencha Space フレームワーク層 ツール層 サービス層
- 24. Fortune 100 の50% の企業が Sencha を採用しています
- 25.
- 26. オールインワン • フレームワーク -Ext JS / Sencha Touchch • 開発ツール - Sencha Cmd / Architect • 教育 - Training (日本でもやってます) • サポート すべてを Sencha で
- 27. 2010 Sencha Touch 1.0 2012 SenchaTouch 2.0 最新のトレンドを取り込み ながら進化を続けている REST MVC MVVM
- 28.
- 29. Sencha Ext JS5 • 豊富なUIコンポーネント • 堅牢なクラスシステム • マルチデバイス／クロスブラウザ • タッチ操作対応、テーマ操作 • MVC / MVVM アーキテクチャ • 依存性管理、動的ローディング 全てのブラウザでリッチなアプリを作成するための HTML5 / JavaScript フレームワーク
- 31. 統一されたアーキテクチャ • クラスシステム、MVC/MVVM、動的ローディングで、チー ムでの分業が可能に • 明確なコーディングルールで、単一のコードスタイル •フレームワークの守備範囲が広く、単一のアーキテクチャの 中での開発ができる
- 32. HTMLほとんど書かない • Web アプリなのにHTML はほとんど書きません • テンプレートとかでほんの少し書くぐらい • 画面にコンポーネント配置するのも全部 JavaScript • プログラマ向け、クラサバから転職もありかも • デザインが苦手でもそれなりの見た目のアプリが • デザインのカスタマイズも SASS / Compass で可能
- 33. 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>!
- 34. 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クラス
- 35.
- 36. CUI ツール -Sencha Cmd • アプリケーションの雛形をスキャッフォルディング • アプリケーションの部品を生成 • アプリケーション／パッケージ／テーマをビルド • 必要な JS ファイルのみを集めて最小化 • 必要な SASS ファイルのみをコンパイル
- 37. GUIツール - SenchaArchitect • ドラッグ＆ドロップで部品を配置 • Visual Studio のようなインターフェースで画面を作成 • テンプレートでアプリケーションの雛形を作成 • Sencha 社のベストプラクティスなコードを生成 • そのままビルドも可能
- 38.
- 39. 教育とサポート • 世界中でトレーニングを開催 (もちろん日本も) •最初の 1週間で集中的に学ぶことで Sencha での開発パターン を身につける • サポートフォーラムでの質問 • ライセンスに付帯するクレジットで質問 • 企業ユーザーにはさらにプロフェッショナルサービスも
- 40. 日本では？ • トレーニングは日本でも開催中 (Xenophy) •日本法人が設立される予定 • サポート問合せは残念ながら英語のみ • プロフェッショナルサービスは英語のみだが、Xenophy で は、コンサルティングサービスを提供中。
- 41. • Sencha 公式サイト •http://www.sencha.com/ • Xenophy • http://www.xenophy.com/ • Sencha Learning Place • http://www.xenophy.com/learning_place/
- 42. • 動画 -なぜ Sencha を選ぶべきか • https://vimeo.com/116213369 • 動画 - 企業ソフト開発でのJavaScriptのROIを分析する • https://vimeo.com/116823544
- 43. Sencha UG • 定期的にSencha の勉強会とかやっています • http://www.meetup.com/Japan-Sencha-User-Group/ • https://atnd.org/users/160956
- 44.