angular X designer - デザイナからみたAngularJS #ten1club

angular X designer - デザイナからみたAngularJS #ten1club

• 1.
  AngularJS x designer デザイナからみたAngularJS 2014/07/11 天下一クライアントサイドJSMV*フレームワーク武道会 @silver_s / silvers
• 2.
  で デザイナ(※)にアプリを作ってもらったはなし ※ 主に画像作る人 HTML, CSSはある程度書ける javascriptは触ったことない
• 3.
  背景 • 株式会社モバイルファクトリー • ソーシャルゲームの開発 ! エンジニア ! デザイナ perl html js css img design 1.javascriptもデザインも両方で きる人が少ない！ 2.エンジニアが頑張ってjavascript 書く！ 3.デザイナがHTMLとCSSを書いて デザイン当てる！ 　＿人人人人人人＿ 　＞動かない！ ＜ 　 Y^Y^Y^Y^Y^￣
• 4.
  そうだ、 にしよう
• 5.
  AngularJS • MVW (Model-View-Whatever) •モデルとコントローラーが疎 • javascriptのロジックを書かなくてもなんか動く • 設計や実装の自由度が低い • ググれば「Stack Overflow」が出てくる 公式ドキュメント
• 6.
  デザイナからみたAngularJS •Model（Service, Factory） •なんか難しいのでエンジニアにおまかせ！ •View •RouterがURLとView&Controllerの対応表代わり！分かりやすい！ （Backbone時代は分割されすぎててよくわからなかった） •Contoller •基本$scopeに突っ込むだけ！どんなデータがあるのか分かりやすい！ よくわからなければng-init使ってFIXME書いておくとエンジニアがい い感じにJSに移植してくれる
• 7.
  素晴らしいところ
• 8.
  素晴らしい #1 幅広く面倒見てくれる • フルスタック •backboneみたいに薄いのは拡張しやすいけど、いじ るとなると読まないといけない • 単品で十分いい感じのができる • ライブラリ同士の相性とか気にしなくていい • angularさんが内部で何やってるか知らなくてもなんか 扱える
• 9.
  素晴らしい #2 htmlだけでもなんかいい感じ • <%=IF %>とか書かなくていい • 普通にHTML書いている感覚 • ngRepeat, ngIf, ngShow, … <ul> <li ng-repeat= item in items >{{item.name}}</li> </ul>
• 10.
  素晴らしい #3 ngClick, ngTouch,ngAnimate, ngClass • 表現力が増す！ • こういう条件でこういう表示にしたい • ここをタップでこういう動きにしたい • が、デザイナだけで可能 <div ng-swipe-left= next() ng-swipe-right= prev() ng-click= showDetail() > <!̶ 切り替えたいやつ。バナーとか ̶> </div>
• 11.
  素晴らしい #4 自作directive • エンジニアが用意してくれる •なんか新しいタグが増えた気分 • オレオレHTML6だ！！ • デザイナは利用するだけ
• 12.
  つらいところ
• 13.
  つらい #1 何してるかわからない • 内部のロジック知りたいなと思うと、暗黒を目にする •死ぬのはエンジニアなので気にしない • 特殊なことやりたいなと思うと、暗黒を目にする • 死ぬのはエンジニアなので気にしない
• 14.
  まとめ
• 15.
  まとめ • デザイナがメインで開発するならAngularJS • 触ってもらった感じBackboneよりAngularJSの評判が 良い＆学習が早い •javascript未経験者でもVC部分は難なくいじれた • 複雑なところはいい感じに隠蔽してくれる • ngAnimate, ngClassの虜！
• 16.
  ありがとうございました