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.
開発ライフサイクルから見た 
#ng_jp
#ng_jp 
ng-self 
酒巻 瑞穂 
Enterprise Engineer 
html5jエンタープライズ部 
(スタッフ) 
html5jWebプラットフォーム部 
(スタッフ) 
FirefoxOSコードリーディング 
(ヒラ)...
サーバサイドテンプレートとSPA 
#ng_jp 
VS?
開発プロセスから振り返る 
#ng_jp 
 Angularなおもひで 
要求設計 
基本設計 
機能設計 
詳細設計 
受入テスト 
結合テスト 
機能テスト 
単体テスト 
コーディング
Angularな開発ライフサイクル 
〔計画 : project planning〕 
AngularJSをメインキャストに! 
Web開発のメリットを殺すような開発サイクルはなるたけ避けたほうが良い 
昨今まではフロントはサーバーと同じサイク...
Angularな開発ライフサイクル 
〔設計 : application design〕 
相棒はどんな eco system? 
● AngularJSの開発はeco systemをどれだけ活用するかも重要でした。 
ossな子、ベンダー製の...
Angularな開発ライフサイクル 
〔製造 : development〕 
分業と、共通認識と 
AngularJSという共通の認識土台で作業できることのすばらしさ 
AngularJSを知っているデザイナー最強説 
LT程度でこのすばらしさ...
Angularな開発ライフサイクル 
〔試験 : software test〕 
おどろきのテスト書きやすさ 
AngularJSはテストを重視したフレームワーク 
Angularチームもテストに真摯に取り組んでいる。 
AngularJS用の...
Angularな開発ライフサイクル 
〔運用 : operations〕 
Webの進化の大恩恵 
運用メンバーは開発メンバーと違う事が多い 
引き継ぎや運用者のことも考えるとシンプルなほうがいい 
I. npmを使った環境構築 
II.ブラウ...
開発はより早く、安く! 
#ng_jp 
開発者 
KAIHATUSHA
#ng_jp 
MEAN stack
シンプルなアーキテクチャ 
3段変形は男の子のロマンかもしれないけど、実用的じゃないよね。 
やはりデータはシンプルに! 
Popular 
System 
#ng_jp 
RDB(table) Server 
(Plain Object) 
...
まずはJavaScriptを覚えよう 
#ng_jp 
エンジニアが居ないから選択肢を取れないと言うのはナンセンス 
フロントエンジニアを増やし 
手札としてAngularJSしいてはMEAN stackを選べるように! 
そのために自分たちで...
9月28日ハッカソンやります! 
#ng_jp
ご清聴ありがとうございました。 
#ng_jp
Upcoming SlideShare
Loading in …5
×

開発ライフサイクルから見たAngularJS

AngularJS出版記念イベントLTです

  • Login to see the comments

開発ライフサイクルから見たAngularJS

  1. 1. 開発ライフサイクルから見た #ng_jp
  2. 2. #ng_jp ng-self 酒巻 瑞穂 Enterprise Engineer html5jエンタープライズ部 (スタッフ) html5jWebプラットフォーム部 (スタッフ) FirefoxOSコードリーディング (ヒラ) AngularJS Japan User Group (スタッフ)
  3. 3. サーバサイドテンプレートとSPA #ng_jp VS?
  4. 4. 開発プロセスから振り返る #ng_jp  Angularなおもひで 要求設計 基本設計 機能設計 詳細設計 受入テスト 結合テスト 機能テスト 単体テスト コーディング
  5. 5. Angularな開発ライフサイクル 〔計画 : project planning〕 AngularJSをメインキャストに! Web開発のメリットを殺すような開発サイクルはなるたけ避けたほうが良い 昨今まではフロントはサーバーと同じサイクルで管理される事が多かったが、近代のフロ ントエンドは十分アーキテクチャとして完成している。 プロジェクト管理体制の独立している、バックエンドの開発サイクルのついでに、jenkins からGruntを叩くだけというのは、開発速度の低下を招く為個人的にお勧めできない CIも粗結合! フロントエンドの生産性や柔軟性を損ねず従来と同じレベルのCIが実現できる。 バックエンドCI、統合CIと連携する場合はフロントエンド等からの連携で #ng_jp
  6. 6. Angularな開発ライフサイクル 〔設計 : application design〕 相棒はどんな eco system? ● AngularJSの開発はeco systemをどれだけ活用するかも重要でした。 ossな子、ベンダー製の子、身内の子。 ● 様々なコンポーネントを組み合わせ、どのように結合するかというコンポーネントベー スの設計になりました。 ● それ以外にも、モック画面が動くので。プロトタイピングなどの動作を見せる開発がよ り容易になり見落としが減る、顧客からの要件調整がより効率的に。 ● UIの要件がコンポーネントとして定義できるすばらしさ(direcrive) ● API設計 ▶︎ リソースモジュール設計 ▶︎ リソースモジュールを使用した開発 リソースモジュール ▶︎ odbcのラッパ、DAOのように直接APIコールではなく、より 開発者たちに使いやすい、再利用できるようAPIをラッピングできる。 #ng_jp
  7. 7. Angularな開発ライフサイクル 〔製造 : development〕 分業と、共通認識と AngularJSという共通の認識土台で作業できることのすばらしさ AngularJSを知っているデザイナー最強説 LT程度でこのすばらしさは伝えられないので、ぜひ皆さん実践して経験してください。 #ng_jp
  8. 8. Angularな開発ライフサイクル 〔試験 : software test〕 おどろきのテスト書きやすさ AngularJSはテストを重視したフレームワーク Angularチームもテストに真摯に取り組んでいる。 AngularJS用のテスト補助ライブラリangular-mock、Protractorを用いたテストでより、効 率的なテストを! #ng_jp
  9. 9. Angularな開発ライフサイクル 〔運用 : operations〕 Webの進化の大恩恵 運用メンバーは開発メンバーと違う事が多い 引き継ぎや運用者のことも考えるとシンプルなほうがいい I. npmを使った環境構築 II.ブラウザ開発ツール III.TraviceやGruntなどのCIの充実 #ng_jp
  10. 10. 開発はより早く、安く! #ng_jp 開発者 KAIHATUSHA
  11. 11. #ng_jp MEAN stack
  12. 12. シンプルなアーキテクチャ 3段変形は男の子のロマンかもしれないけど、実用的じゃないよね。 やはりデータはシンプルに! Popular System #ng_jp RDB(table) Server (Plain Object) Frontend (javascript object) MongoDB (javascript object) NodeJS (javascript object) AngularJS (javascript object) 変換! 変換! object json
  13. 13. まずはJavaScriptを覚えよう #ng_jp エンジニアが居ないから選択肢を取れないと言うのはナンセンス フロントエンジニアを増やし 手札としてAngularJSしいてはMEAN stackを選べるように! そのために自分たちで触って覚えよう!
  14. 14. 9月28日ハッカソンやります! #ng_jp
  15. 15. ご清聴ありがとうございました。 #ng_jp

×