enterprise x angularjs

Enterprise x AngularJS

Enterprise x HTML5 Web Application Conference 2014

{{ about me }}

AngularJS Japan User Group 管理人 html5j Web先端技術味見部部長

金井　健一

フリーランスフロントエンド方面のお仕事

can_i_do_web

facebook/can.i.do.web

{{ agenda }}

• 開発環境

• demo

• エンタープライズと AngularJS

• まとめ（参考サイトの紹介）

{{ note }}

今回の内容は、あくまでも AngularJS をエンタープライズな業務で使うために、のお話です。

{{ environment }}

詳しくはWEBで

{{ environment }}

try

{{ environment }}

無理をしてまで使わない！

{{ environment | test }}

Karma http://karma-runner.github.io/0.8/index.html


テストの自動化には GRUNT が便利！



テストは目視でチェックだろjk！な

プロジェクトには不要です



テストコードの品質はどう担保するの？

→エンプラ案件だと検討事項かも

{{ environment }}

以上が巷で噂されている

開発効率アップツール達のご紹介でした。

{{ environment }} 環境構築での最小構成 AngularJS 関連ファイルのみ！必要に応じてツールを追加していくのもアリです。

{{ demo | keyword }}

• ng-view

• ng-repeat

•  form バリデーション

•  factory

•  filter

• カスタムタグ


追記：このデータ間違えてるかもしれません…

{{ Enterprise x AngularJS }} BACKBONE AngularJS Knockout Sencha

設計思想シンプルフルスタックシンプルフルスタック

学習コスト低い高い※ 低い高い

自由度高い低い高い低い

• シンプルなフレームワーク •  サードパーティ製のプラグインでの拡張がほぼ必須

• フルスタックなフレームワーク •  基本的に用意された機能でまかなえる

•  サードパーティ製のプラグインでの拡張も可能

{{ Enterprise x AngularJS }} BACKBONE AngularJS Knockout Sencha

設計思想シンプルフルスタックシンプルフルスタック

学習コスト低い高い※ 低い高い

自由度高い低い高い低い

• もちろん、学習コストは低いに越したことはない

• コードの品質管理のため、自由度が低い方が好ましい

{{ Enterprise x AngularJS }} • コードの品質管理のため、自由度が低い方が好ましい

•  自由度が高いとコードがカオスになる

•  メンテナンスが大変

•  デスマモード突入

•  お家に帰りたい

•  「 … 」


学習コスト：高い※ の理由

•  （体感的にですが）ある一定までは誰でも簡単に覚えられる

•  Controller の定義・処理の書き方

•  ng-xxx の使い方（built-in directive）

•  そこからは急に難しくなります

•  custom directive

•  service


学習コスト：高い※ の理由

•  （体感的にですが）ある一定までは誰でも簡単に覚えられる

•  Controller の定義・処理の書き方

•  ng-xxx の使い方（built-in directive）

•  そこからは急に難しくなります

•  custom directive

•  service

役割分担


AngularJS で機能を「使う人」

AngularJS で機能を「作る人」

{{ Enterprise x AngularJS }} jQuery から AngularJS

• AngularJS + オプショナルな JS ファイルの導入で開発可能

• 自由度は低いため、コードの品質は保ちやすい

• 学習コストは高いが、段階的である

•  一定段階までは学習コストが低いため、機能を使う側の人への負担が

少ない（jQuery や BACKBONE を覚えるより簡単かも。）

{{ Enterprise x AngularJS }} jQuery から BACKBONE.JS / Knockout

• サードパーティ製のライブラリの導入がほぼ必須

•  （社内的な手続きやライブラリの検討・検証が面倒？）

• 学習コストは低いが、自由度が高い

•  jQuery 利用時に抱えていた問題は解決できないのでは？

•  ライブラリを導入していく度に縛りをきつくなり、学習コストが増す

{{ Enterprise x AngularJS }} jQuery から Sencha

• Sencha Ext.js 単体のみで開発可能

• 自由度が低いため、コードの品質が保ちやすい

•  VBのようなドラッグ＆ドロップでUIを構築していくツールもある

•  メンテナンスが大変なコードが、自動生成される可能性あり

• 学習コストは高く、開発者全員の高い Sencha スキルが必須

•  ただし、有償サポートをうけることも可能


AngularJS はかなりエンプラ向き！

{{ conclusion }}

AngularJS Batarang Chrome ウェブストアからダウンロード

{{ conclusion }}

AngularJS Ninja http://angularjsninja.com/

{{ conclusion }}

js STUDIO http://js.studio-kingdom.com/angularjs

{{ conclusion }}

Qiita http://qiita.com/tags/angularjs

{{ conclusion }}

Onsen UI http://onsenui.io/

{{ conclusion }}

AngularJS Japan User Group https://groups.google.com/forum/#!forum/angularjs-jp

AngularJS に乗り換えよう

ご清聴ありがとうございました。

enterprise x angularjs

Technology