今後のWeb開発の未来を考えてangular jsにしました(拡大版)

今後のWeb開発の未来を考えて AngularJSにしました
2014/11/12html5jエンタープライズ部
小川充(@mitsuruog)
拡大版

はじめに
内容はいまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念イベントにて発表した内容の拡大版です。
http://www.slideshare.net/mitsuruogawa33/webangularjs
併せてイベントのレポート記事も参照してください。
http://html5experts.jp/albatrosary/10855/

話すこと
Web開発トレンドとAngularJS選定
なぜAngularJSを選択したのか
現在のAngularJS開発スタイル
AngularJS開発を効率的にするツールたち
AngularJSとその先
今後のWeb開発とAngularJS
AngularJS開発からSIerは何を学ぶのか
(注意)
AngularJSの細かい技術的なことは出てきません。あしからず。
所属組織を代表する意見ではありません。あくまで個人の意見です。
AngularJS導入で悩めるSIerのヒントに…

Whoam I？
小川充(おがわみつる)
株式会社クレスコ技術研究所
フロントエンドエンジニア
2011年よりHTML5の可能性に魅了されてフロントエンドエンジニアへ転身。最新のフロント技術を業務システムの現場に浸透させるために、技術調査・評価、アーキテクチャ設計、現場に合わせたテーラリング、メンバー教育など、業務システムエンジニア目線で活動している。 html5jエンタープライズ部スタッフを行うかたわら、enja-oss、html5j英語部にも所属している。
2014年8月よりHTML5 Experts.jpコントリビューター
https://github.com/mitsuruog
Twitter: @mitsuruog

Web開発トレンドと AngularJS選定

エンタープライズWeb開発のトレンド
デスクトップ主体からモバイルへシフト
IT投資はバックヤードからよりビジネス(金儲け)に直結するシステムへ
Web開発
デスクトップ
・新しいUX
・新しい開発手法
スマートデバイス
主にBtoC向け
エンタープライズでは
企業間の濃淡が激しい

エンタープライズWeb開発のトレンド
デスクトップ主体からモバイルへシフト
IT投資はバックヤードからよりビジネス(金儲け)に直結するシステムへ
Web開発
デスクトップ
・新しいUX
・新しい開発手法
スマートデバイス
マルチプラットフォーム
開発手法
主にBtoC向け
エンタープライズでは
企業間の濃淡が激しい

マルチプラットフォームとしてのHTML5
レスポンシブデザイン
http://theme-fusion.com/avada/advanced-admin-panel/lots-of-shortcodes/

マルチプラットフォーム開発の主役はHTML5
AngularJSは実現方法の1つ
様々な活用シーンがあるHTML5

デスクトップ
モバイル
ブラウザ
ブラウザ
Web開発

デスクトップ
モバイル
ブラウザ
ブラウザ
ネイティブ
Cordova
ブラウザ
ネイティブ
ブラウザ
Web開発
ハイブリッド開発
ネイティブ開発

デモ１
HTML5を有効活用したマルチプラットフォーム対応の例
ブラウザだけじゃない！
Cordovaを上手に利用し、既存のHTML5資産を使ってローコストでモバイル対応

JSフレームワーク規模と標準化の関係
規模が大きい
学習コストが比較的高い。フレームワークの形にはまれば効果が高い。UIのカスタマイズ性に劣る場合がある。
規模が小さい
学習コストが比較的低い。自由できる範囲が多いため標準化するための労力が大きい。
フロントエンド開発の基礎的スキル
フレームワークの規模
標準化までの労力

Yeoman
Yeomanなどの開発支援ツールを導入することで
標準化コスト軽減

Yeoman
現在存在する
サブセットの中では
Betterかな…と

AngularJS選定の要因
フレームワークの機能(構造化、生産性)
特にモジュール化、DI、データバインディング
Yeomanを利用したさらなる生産性アップ(期待)
開発サイクルに取り込むことで標準化コストの削減
ツールによる標準化ルールの強制
(ドキュメントなんて読まないでしょ…)
世界標準のノウハウを借りる

AngularJS選定の要因
フレームワークの機能(構造化、生産性)
特にモジュール化、DI、データバインディング
Yeomanを利用したさらなる生産性アップ(期待)
開発サイクルに取り込むことで標準化コストの削減
ツールによる標準化ルールの強制
(ドキュメントなんて読まないでしょ…)
世界標準のノウハウを借りる
自社(SIer)のWeb開発要件にマッチ
派手なBtoCゲームには向かないが、地味なCRUDアプリには最適

現在のAngularJS 開発スタイル

generator-angular-fullstackを試用
話題のMEANスタック
Mongodb, express, AngularJS, Node.js
https://github.com/DaftMonk/generator-angular-fullstack
Yeoman

generator-angular-fullstackを試用
話題のMEANスタック
Mongodb, express, AngularJS, Node.js
機能
AngularJS開発のScafold
コードジェネレータ
開発用Webサーバ、DB(mongodb)が付属
Mongodbはテスト用DBとしても利用できる
認証(oAuth)テンプレート、Socket.ioテンプレート
https://github.com/DaftMonk/generator-angular-fullstack
Yeoman

generator-angular-fullstack導入の狙い
品質の安定化
コードテンプレートを利用した品質の平準化
コード生成時にspecファイルを生成
ジェネレータを利用したアーキテクチャの強要
どこに何を置くか迷わなくていい

generator-angular-fullstack導入の狙い
品質の安定化
コードテンプレートを利用した品質の平準化
コード生成時にspecファイルを生成
ジェネレータを利用したアーキテクチャの強要
どこに何を置くか迷わなくていい
開発効率向上
CIサイクル(開発、テスト、ビルド)を自動導入
ファイル監視、livereload、自動テスト
開発・本番ビルドが付属

デモ２
generator-angular-fullstackを使ってWebアプリを作ってみる

デモ２メニュー
1.Scafoldの作成
2.Listページを追加
3.ListページのCRUD機能を追加
4.RESTAPIの作成とコントローラへのDI
5.仕上げ、Filterの利用

1.Scafoldの作成
yoangular-fullstacksample

1.Scafoldの作成
angular-fullstack:routelist

1.Scafoldの作成
テンプレートとコントローラを実装

1.Scafoldの作成
angular-fullstack:factorygithub

1.Scafoldの作成
angular-fullstack:filterstar

generator-angular-fullstack導入のデメリット
Fullstackすぎ
エンタープライズのそれなりの規模の開発であれば、これくらいはあってもいいかなと…
いざとなったらカスタムする
コードテンプレート
Gruntタスク

今後のWeb開発とAngularJS
HTML5正式勧告
ES5 to ES6
この先のWeb開発に影響が大きそうな要素(アーキテクチャ目線)
Web components, Service Workers
Device API

ES5 to ES6
Device API
2014
2015
2016
2017
2018
HTML5
ES6
Web components
Service Workers
※年表は個人的な妄想です
Angular1.3

ES5 to ES6
Device API
AngularJS2.0は全くの別物としてとらえている(Struts2.0の例もあるし)
2014
2015
2016
2017
2018
HTML5
ES6
Web components
Service Workers
Angular1.3
Angular2.0

ES5 to ES6
Device API
AngularJS2.0は全くの別物としてとらえている(Struts2.0の例もあるし)
2014
2015
2016
2017
2018
HTML5
ES6
Web components
Service Workers
Angular1.3
Angular2.0
未来は予測不能
今後動向を
注視するべき

SIerがAngularJS開発から学ぶべきもの
「connecting the dots」
ジョブスが2005年にスタンフォード大学の卒業式でおこなったスピーチ
@gapingvoid＠DavidKirtlan

HTML5開発のconnecting the dots
今後の変化に対応するため「architecture」が必要
将来のAngularJSからの乗り換えを想定
Architecture≒ベストプラクティス

ひらすら文書化
開発プロセス
開発ガイド
etc…
ひたむきにトレーニング
宣教師の心得で布教活動
実際に開発してメトリクス収集
標準化に向けて
http://ja.wikipedia.org/wiki/ザビエル

標準モデルを策定
開発フローとアーキテクチャの標準モデルを策定
プロトタイプで効果を検証
開発プロセスの一例
アーキテクチャの一例
AngularJSのカバー範囲

Gitのコミットログを可視化して分析
工程予測(WBS)や見積もりで利用できるか検討
プロトタイプ開発でメトリクス収集
Gitコミットログ
データ化
可視化・分析(D3.js)
2014-11-07, Mitsuru Ogawa
client/app/app.css | 57 ++++++++++++++++++++++++++++++-----------------
client/app/main/main.css | 40 +++++++++++++++------------------
client/app/main/main.html | 2 +-
3 files changed, 56 insertions(+), 43 deletions(-)
2014-11-07, Mitsuru Ogawa
client/app/events/event/event.html | 2 +-
client/app/events/list/list.html | 2 +-
client/app/new/new.html | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
{
"date": "2014-10-03T00:00:00.000Z",
"commiter": "Mitsuru Ogawa",
"file": ".bowerrc",
"type": "code",
"changed": 3,
"insertions": 1,
"deletions": 0
}

最後に
現在ある選択肢の中ではAngularJSが一番いい
ただ、AngularJSがすべてではない
2.0はその時代にある選択肢の中から改めて選ぶ

最後に
Yeomanを使って効率化
この流れは止まらない

最後に
Yeomanを使って効率化
この流れは止まらない
AngularJS開発から学んで次に生かす
世の中にパーフェクトなものは存在しない
現時点で存在するBetterなものをうまく使う
AngularJS開発で次の変化に対応できる体力を養え
ご清聴ありがとうございました。

今後のWeb開発の未来を考えてangular jsにしました(拡大版)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to 今後のWeb開発の未来を考えてangular jsにしました(拡大版)

Similar to 今後のWeb開発の未来を考えてangular jsにしました(拡大版) (20)

More from Mitsuru Ogawa

More from Mitsuru Ogawa (13)

今後のWeb開発の未来を考えてangular jsにしました(拡大版)