12/3に行われたAngularJS勉強会に行ってきました。
そのメモを載せておきます。
本当は整理してからと思ったのですが、結局整理して書こうとすると何も書かずに終わってしまうので。
気が向いたらきちんとまとめます。
あと間違いがあればご指摘いただければ修正します。
# 動機
* 最近JavaScriptの勉強していて、クライアントサイドのJSライブラリを習得したかったから。
* 勉強してみてAngularJSがよさげで、さらに理解を深めようと思ったから。
* 最初は簡単だけど、ちゃんと勉強すると難しいと聞いて
# 自分の背景知識
* ドットインストール(http://dotinstall.com/lessons/basic_angularjs )
* tutorial(http://docs.angularjs.org/tutorial )
をひと通りいじってあとは適当にアプリとかつくって遊んでいる状況
本格的にアプリつくっているわけではない
# 内容
## introduction
* 金井さんから説明
## AngularJS 20min @naoya_ito
https://speakerdeck.com/naoya/angularjs-20min-number-ng-jp
初心者向けにチュートリアル的な内容。AngularJSの特徴/主な機能の説明がメイン
* AngularJSがBackbone.jsよりもgithubで★がたくさんついてる状態
* JavaScript "MVW" Framework (Model View Watever) (MV* の議論の無駄 )
* AngularJSの基本
** HTMLそのものがテンプレート
*** HTMLに ng-xxxを埋め込んで、jsがそれに対応する処理をする
*** $scopeがHTMLとapp(js)の橋渡し
** 双方向データバインディング
** HTMLフォームを変えると$scopeのオブジェクト(app側の値)が変わる/$scopeが変わるとHTML側が変わる
** しかもリアルタイムに$scopeが変わる
* アプリがDOMの構造をしらなくてよい => HTML変更をしても動かなくなるようなことが起きづらい
* ロジックでDOMの構造を構築しないようにする
* 制約によってコードが綺麗に保たれる
* いくつかの機能
** angular-resource.js
*** サーバーサイドからデータを取得するのに使える
** フィルタがすごく簡単に書ける
** Form validation
*** 必須だとrequiredつけるとか、フォームに条件をつけてvalidation可能
* コンセプトとしてJavaScriptの構造を整理するというよりもHTMLを拡張して機能を追加している
* DIによってテストしやすい
* 雑感
** DIの仕組み
*** function()定義を文字列として扱っているから、$scopeをsとか書き換えてしまうと動かない
** JSONサーバーが後ろに控えたCRUDアプリ
** グラフィックやゲーム系が苦手
** 簡単に動かすまでは簡単だけど、本格的に学習するとコスト高め
** 制約やテストしやすさで複数人数での開発は向いてる?
## OnsenUIについて ~Angular.js+Topcoat~ Kruyさん/四方さん(アシアル株式会社)
OnsenUIがどういうものかの説明。デモ等が中心
OnsenUI => https://github.com/OnsenUI/OnsenUI
* AngularJSとTopcatを組み合わせたMobile UI
* モバイル向けのUIをHTML5で簡単につくる方法を提供したかった
** jQueryMobileだとUXがいまいち/ソースコードが冗長
* 簡単/使えるUIコンポーネント
** 独自タグをHTMLに書くだけ
** 基本的なコンポーネントがデフォルトで用意されている
* ぬるぬる動く
** CSSを利用して滑らかなアニメーション
* テーマ機能
** デザインの一括変更/Font Awesome/CSS独自カスタマイズ
* 独自タグでコンポーネントを定義して、属性でアニメーション等を設定している印象
* 今後
** Onsen UIのGUIツール「UIBuilder」の提供
** Webコンポーネントを公開・共有できるしくみ
## AngularJSを実サービスで使ってみて @sakatam
AngularJSを使った実際のプロジェクトの話
https://speakerdeck.com/sakatam/angularjs-mian-qiang-hui-number-4-shi-zhan-angularjs
* プロジェクト
** 3ヶ月
** Eコマースのリニューアル
** Mobile Firstアプローチ
** ついでにAngularJS
** うまくいった
* システム構成&人員構成
** 旧構成 => jsp/Java servlet , Legacy API(RPC), DB
** 新構成 => AngularJS APp/Node.js, Legacy API(RPC), DB
** 人員:AngularJS App => UXデザイナ2 Frontend JSエンジニア2 Backend jsエンジニア2
*** フロントエンドエンジニアがBackendも踏み込める/その逆も
* なんでAngularJS?
** backbone.js => 開発者の力量でコードの品質がばらつく等 スケールしづらい
** 柔軟性では劣る
** モジュール・ベースの開発を強制 (DI/Module・Directive)
** ビューとモデルの自動バインディングのせいでコントロールが単純化・コードのメンテナンス性が高い
** 開発がスケールし易い
* 開発フロー
** 基盤づくりに時間をかけた(3week)のが功を奏した
** チーム展開(2week)でFrontendエンジニアにしっかり慣れてもらった
*** FエンジニアはDIやモジュール志向に慣れてないため
** 開発イテレーションは一般的なウェブ開発とほとんど同じ
** テストファーストができるのがメリット (プロジェクトではUnit Testは必須にした/E2E Testはクリティカルパス確認用)
* 実戦投入次のTips
** 複雑なモデル・データの状態管理
*** モデルが複雑になるとAngularJSは管理してくれない => AngularJSの長所はシンプルなモデル
*** モデルを浅くして問題回避
** $rootScope $broadcast
*** 便利だけど使いすぎるとDIの意味がなくなるので危険
** 仮引数Minify対応の紹介
** リクエスト数の肥大化に注意する(モバイル等で)
*** ビルド時にバンドルする( webmake/angular-template)
** SEO/Crawwler対策
*** UserJSで判別してPhantomJSで対応
* ほどよい制約・モジュール化の強制
* Frontendエンジニアの底上げも
## 目指せ脱初心者！あなたの知りたかったAngularJS @agektmr
初心者が中級者になるためのセッション
AngluraJSの具体的なプラクティスの紹介(でもなんだかディレクティブの話が中心)
* Angularユーザの悩み =>ドキュメントが英語/Angular Wayがあるっぽい/日本語情報が少ない/相談相手がいない/ドキュメントがわかりにくい
* AngularJSでDOMをいじるには
** ディレクティブをつくる => ハードルが高い?
*** linkがあればDOMの操作はできる
app.directive('fileSelect',function() {
return {
link : function(scope, elem, attr) { //elemはjqueryオブジェクト
elem.bind('change', xxxx);
}
}
});
*** AngularJSはjqueryの機能を使える(JQliteというJQueryのLite版を持っている)
*** restrict:でタグ等を指定できる
** 独自タグを定義
<script type="text/ng-template"> でテンプレートを定義
*** templateUrlでテンプレートを指定すれば、定義したhtmlを呼び出せる
* コントローラ間で変数を跨って使う => moduleを使ってvalueに割り当てる
** デモ：http://demo.agektmr.com/flexbox/
* DOMの塊がオブジェクトとしてそのオブジェクトを誰が所有しているか
* Web Components
** 自分の独自のelementを作れる
* AngularはWeb Componentsをとりこもうとしている
* ディレクティブはPolymerに置き換わる
** Polymer.js (Web Componentsのは http://www.polymer-project.org/ )
## LT
メモなし
# 懇親会は体調が思わしくなかったので参加せず(残念)
# リンク
toggtter => http://togetter.com/li/598391
# 感想
* AngularJSの初心者でも勉強になった。
* ただまだまだAngularJS力が足りない
* directive周りはちゃんと勉強しようと思った。ここが使いこなせないと、ちゃんと使いこなしたことにならないと思った。
明日からもがんばろ
投稿
0 件のコメント:
コメントを投稿