Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

なぜ Enterprise は Sencha を選ぶのか?

3,049 views

Published on

DevLove 関西のイベント、JavaScript フレームワークは Angular JS だけじゃない! - DevLOVE関西 | Doorkeeper - http://devlove-kansai.doorkeeper.jp/events/18921 で発表した資料です。

Published in: Engineering

なぜ Enterprise は Sencha を選ぶのか?

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

×