ng-mtg#4 AngularJS 勉強会

AngularJS 勉強会( http://atnd.org/event/E0021975/0 )に参加してきました。

AngularJS @naoya_ito さん

  • jsフレームワーク、最近githubのスター数１位
  • MVW (Model View Whatever)
    • MVV◯とか議論するのは時間の無駄
    • AngularJSそのものを理解するのがいいと思う。
  • AngularJSの特徴
    • HTMLそのものがテンプレート
    • 双方向データバインディング
      • HTMLを変えると$scopeの値がかわる
      • $scopeのオブジェクトの値を変えるとHTML側の値が変わる
  • 典型的な双方向バインディング。{{name}}がng-model="name"の内容を表示。inputをいじるとnameが変わる
<input type="text" ng-model="name">
<p>Hello {{name}}</p>
  • ２つの特徴によって・・・
    • アプリ側はDOMの構造を知らない
    • jQueryやBackbone.jsだとアプリ側がDOM構造を知っている。 $('#button-id button').on('click', function() {});
  • HTMLからアプリを掴みにいく
  • HTML構造の変更に強い
    • HTMLそのものがテンプレート
    • アプリ側を知らなくてもDOMの構造を変更できる
  • アプリ側から見た目を動的に変えたいときは？
    • nShowやngClassを使ってHTML/CSS側で。ロジックでDOMの構築はしない
  • ふりかえり Angular JSでの開発の流れ
  • AngularJSの「制約」
    • HTMLにロジックはかけない
    • ロジック側からDOMを操作しにいけない
    • コントローラの責務範囲は特定のHTMLブロックに限定
    • 双方向バインディングによりコードが少なくなる
  • Angular JSの機能(いくつか抜粋)
    • リモートのJSONデータもバインド(ngResouce)
    • フィルタ(ng-modelでバインとしたモデルで、ng-repeatをフィルタ)
    • Form Validation
    • Directives ng-bindやng-modelなどを自分で作れる
    • 再利用可能なモデルに(services) テスト書きやすくなる。DIによってテストがしやすい
  • Angular JS雑感
    • Angular JSのDI
      • $scope, $route, $resource, ....
      • function定義を文字列としてパースしてDIしているので、引数名は注意
  • Angular JS得意・不得意
    • １ページアプリケーション
    • JSONサーバが後ろに控えたCRUD
  • 不得意
    • グラフィック系
    • DOMいじる系
    • ゲーム
  • Angular JSの印象
    • 軽く動かすまでは簡単
    • 本格的に使おうとすると学習コストが高い
      • GruntとかYeomanなど周辺ツール知識も必要に
    • 強い制約と少ないコード量は複数人開発に向いていると思う
  • Angular JSもやもや例
    • HTMにng-modelとか書いてるからいいっていうけど、HTMLにonclick書くなっていってたような・・・
    • ドメインモデルを記述するベストプラクティスがよくわからん
  • まとめ
    • HTML拡張と双方向データバインディング
    • HTMLの変更に強よい
    • 高いテスタビリティ

OnsenUIについて

実戦! AngularJS (@sakatamさん)

  • プロジェクトについて
    • 開発期間３ヶ月
    • ECサイトのリニューアル
    • Mobile first
  • システム構成＆人員構成
    • 旧構成 - レガシーSOA (RPC)からAngularJS, Node.js(REST), LegacyAPI(RPC), DBへ
    • UX 1, Front Engineer 2, Backend Engineer 1。全部JSなので人員の流動性高かった
  • なんでAngularJS?
    • GiltのメインプロダクトはBackbone.jsベース
    • Backbone.jsは柔軟性が高い反面、コード品質がばらつく
    • モジュールベースの開発を強制
      • DI/Module, APIのmock化が可能
    • Directiveによる画面の部品化
    • コントローラが薄くなる
  • 開発フロー
    • 1-3week 開発基盤づくり
    • 4-5week チーム展開
    • 6-12week 実開発
    • 基盤づくりに時間をかけた。ファイル構成やビルドプロセスを整備
    • DI/モジュールの概念理解
    • Directiveをハンズオンで理解
  • 開発イテレーション
  • 実戦投入Tips
    • 階層化されたモデル・データの状態管理
      • viewと直結しないモデルの状態をどう管理するか？
      • Google Groupsでも議論になっているが明確な答えなし
      • モデルを浅くして問題回避
    • $routeScope.$broadcast
      • 大域ジャンプ
      • 便利だけに中毒性ある。DIの意味なくなるので注意
    • 仮引数のMinify対応
    • リクエスト数の肥大化
      • アプリ本体＆ビュー
      • httpコストが高いモバイルサイトは注意
      • ビルド時にバンドルする。webmakeとか。angular-templateでviewをバンドル
      • APIの設計を工夫
    • SEO/Crawler対策
    • 杞憂だったこと
      • Two-way Bindingによるレスポンス悪化( 変数のwatchをループで監視しているが大丈夫だった )
      • 遅延ロードによるレイアウト崩れも問題なし
      • AngularJS本体のサイズ。１回ロードされれば問題なし
  • まとめ
    • ほどよい制約・モジュール化の強制
    • Frontendエンジニアの底上げも
    • チーム開発には向いている

目指せ脱初心者！あなたの知りたかったAngularJS ( @agektmr さん )

  • 最初は超簡単だけど、いろいろやり始めると難しい
  • ユーザの悩み
    • ドキュメントが英語
    • Angular Wayがあるっぽい
    • 日本語の情報が少ない( Angular Ninjaとか出てきたけど )
    • 相談相手がいない
    • ドキュメントがわかりにくい。リファレンスはそろっているがどっから追えばいいのかわからない
    • みんなで相談だ
  • angularでDOMを弄りたいときはどうしたらいいの？
    • ファイルを扱いたい
    • angular.element(this).scope().load(this) ? これはいけてない。
    • そこで登場するのがdirectiveだが、ハードル高い
  • directive
    • linkがあればDOMの操作はできる
    • angularJSはjqLiteを内蔵しているので、bindなど簡単な操作はjQueryを使わなくてもいい。
    • restrict: 'A'とすると、attribute, 'C'にするとクラス、'E'にするとタグになる
  • angularで既存ライブラリとか使うのってあんま向いてないんでしょ？
  • controller間で変数をまたぐには
    • directiveには親子関係があり、子から親の変数は見れる
    • CSS Flexbox Please ! 本家の人が修正してくれたコード ( http://demo.agektmr.com/flexbox/ )
    • valueというのを使う。必然性はなさそう。普通の変数で共有してもいいとおもう。
  • webコンポーネント

LT

AngularJS始めました ( @Tkashiro さん )
Coffee ScriptとAngularJS ( @ntaoo さん )
  • CoffeeScript
    • Less typing, Bad readability
    • Simple, 安定
    • Class based OOP
  • Angular with coffee script sample.
    • html5mode(true)にすると楽しい
PHPとAngular JS ( @yando さん )
DirecviteにngAnimateをつけよう
  • ロード angular.module("mainModule", ["ngAnimate"]);
  • ng-repeatなどとあわせてclassで指定
  • 自作のDirectiveにもアニメーション設定可能
    • $animateで設定
AngularJSでmessagepackを使ったときに残念な思いをした話 ( @__yuunyan__ )
  • 通信まわりを後回しにしたらこれが地獄
  • JSON部分の結合がかなりつよくあとから分離できない
  • json parserでデータがパースされてしまいmesssagepackでデコードできない
  • http.jsとhttpBackend.jsに手を入れた
  • coreに手をいれたけどcontributeの仕方がわからない