ng-mtg#4 AngularJS勉強会 #ng_jp

Togetter
http://togetter.com/li/598391?utm_source=dlvr.it&utm_medium=twitter

2013/12/03@サイバーエージェントでのAngularJS勉強会に行ってきました!

僕は普段JSを書きまくってるわけではないですが前回のプロジェクトでBackboneを使っていたので最近話題のAngularにも興味を持ち始めた(とはいえ触ったことは一切ない)という状態で参加しました。

楽しかったー!ほとんどメモですが書きますー。  

AngularJS 20min


AngularJS 20min #ng_jp // Speaker Deck

@naoya_ito さん
はじめにこの発表があったおかげでかなりangularが腹落ちした感じでこの後のセッションをきくことが出来ました。さすがでした。初心者or まだ触ったことがない方はぜひスライドを見てみるといいと思います!

# memo

AngulerJSはjs MVW Framework
Model View Whatever
(初期はMVVMっぽかったけどそういう議論は時間の無駄)

MVCとかっていう型よりangularjsはangularjsって思って学ぶ方がいい

特徴
・htmlそのものがテンプレート
・双方向バインディング

ng-controllerとかng-repetとかをhtmlに書いていく感じ
アプリ側に関数用意して$scopeで渡す

アプリ側(angularjs側)はDOMの構造を知らない
DOM関連の値がない。HTMLからアプリを掴みに行く

HTML構造の変更に強い
要するにtemolate-toolkitとかerbとかみたいなもの

アプリ側から見た目を動的に替えたい時はngshowとかで
なるだけDomを掴まない

制約ある
HTMLにロジックは書けない

リモートのJSONデータもバインド

フィルター機能も簡単
FormValidationもある

HTMLを拡張して動的なアプリを作るのに必要な機能をいっぱい追加してるのがangularjs

本格的に使おうとすると大変な部分もある

簡単なものをさらっと作る場合には本当に労力使わずに綺麗に高機能に作れそうだなという印象。とりあえず使ってみたい!
 

OnsenUI


続いてOnsenUIを作っているお二方の登壇。
Home | Onsen UI

OnsenUI モバイル用のUIを簡単に作れる

自衛隊員の方とカンボジア出身の方の発表でした。なんとメモを取っていない、、AngularJSを多少使っている方には良いプレゼンだったかも!AngularというよりOnsenUIに興味を持ちました! (スライドも発見できず。。見つけたら追記します!)

 

実践! AngularJS


@sakatam さん

AngularJS 勉強会 #4 - 実戦!AngularJS // Speaker Deck

実践でどうAngularを使っていくかという発表とその時のTipsなど。実務で導入できるようになったらもう一度見直したいスライドでした!開発スケジューリングも勉強になりました。

# memo

柔軟性にはbakboneに劣るが
モジュール/ベースの開発を強制
DI/Module
 APIレスポンスもmock可能

week1-3
開発基盤づくり
 ファイル構成、ビルドプロセスを調べたり
 APIクライアントなどの基底クラス
week4-5
チーム展開
 フロントエンドエンジニアにしっかり慣れてもらう
 DI/モジュール志向/テストファーストの概念理解
 ちょっとしたdirectiveを作ってみる
week6-12
実開発


普通にテストファーストでできる
モデリング→UnitTest→Viewスケルトン実装
End2EndTestはクリティカル・パス確認用

  

目指せ脱初心者!あなたの知りたかったAngularJS


@agektmr さん

Directiveの話をかなり詳しくしてくださってましたが、聞き入ってしまっていてほとんどメモとれず。。後日スライドあげてくださるようなのでこちらも追記します。

# memo

これ使うと便利
http://jsbin.com/welcome/1/edit


書き方が超勉強になると実力者の方々がおっしゃっていたもの。
本家の方々が書いたやつ
http://demo.agektmr.com/flexbox/

web-components
polymer-project

 

以下LTメモです。一人目の方のしかメモしてなかった、、

angularjs入門 @Tkashiro さん。kayacの方

social-counter <- Angularで作ったもの

【初心者が学ぶときにおすすめなリンク集】
動画で学べるサイト。これが全てといってもいい
egghead.io: Learn AngularJS with Tutorial Videos & Training @eggheadio

Page not found · GitHub Pages
AngularUI for AngularJS
Popular Modules - AngularJS Modules, Plugins and Directives

 

まとめ

JSそのものを書くことが楽になりそう。backboneよりも最初の勉強コスト低い?業務で一度使ってみたいなーー!!!って感じ!

かなり有意義な勉強会でした!
主催者のみなさん、登壇者の皆さん、ありがとうございました!