フロントエンド技術勉強会
http://d-cube.connpass.com/event/25400/
D3
■CSSアーキテクチャ色々
OOCSS、SMACSS、BEM等のCSSアーキテクチャの違いや実践でのハマりどころ等を紹介します。
デモ用: https://github.com/j-nishina/css-arch-study
@mikesorae
altJS
Semantic UI
MCSS
FLOCSS ※日本人が作ってる？
実運用における問題点
ファイルの分割粒度が人によって異なる
細かすぎると逆にメンテナンスしづらい
目的のモジュールがどこにあるか分からない
似たようなモジュールが複数再発明される
そこそこ学習コストがかかる
対策
設計ドキュメント、規約作成、学習コストを考慮して導入する
BootstrapやSemantic UIなどのUI Frameworkのように、モジュールのサンプルページを作る
Amazon Multi
Wantedly Multi
Connpass Multi
Gunosy Single Layered
Conoha Multi
5サイトとも、Object Orientedだった
運用中にルールが崩壊しているケースが多そう
大事なのは全員が同じ概念や規約を共有すること
■さわってみよう、angular/react
angular1.x 2.x、reactのサンプルコードを通してそれぞれのフレームワークの特徴を紹介します。
https://github.com/KazuhiroYoshimoto/sample_react_angular
吉本和弘（zuknow、キャリアトレック）
Brackets
React.js
コンポーネントベース
バーチャルドムによるレンダリング
props
親：CommentBox → 子：Comment
state
コンポーネントの状態を持つ、ミュータブル
イベントハンドル
子のイベントを親でハンドリングする
子のイベントを親に受け渡す
イベントをハンドリングし、stateを更新する
Angular.js 1系
Angular.js 2系
1系とは別物
コンポーネント指向、バーチャルドム
パフォーマンス向上
Controllerや
ディレクティブ
■サーバサイドエンジニアが1年間まじめにSPAやってみた
AngularJS x TypeScript でSinglePageApplicationを開発、3度大きく作りなおして、得た苦労話と知見を共有します。
北川至
@kita_ly
スタンバイ
jp.stanby.co
– AngularJSとSPAの設計について
2wayデータバインディング
巨大なテンプレートにJS（Angular Expression）が散りばめられていて見通しが全く効かない
Super Fat Controller
※React
コンポーネント指向
Reactの出現で根付いたSPA（というかUI）の設計思想
２でも採用されている
徐々にコンポーネント指向に
Thinking in React
コンポーネント＝DOMとJSをセット、UI部品
再利用性
カプセル化・責務の分離
複雑なものの単純化
メンテナンス性
AngularJSでも実践可能（限界はある）
Reactの推奨するレベルでの細かい部品化はできない
辛くならない大きさのコンポーネントを見極める
コンポーネントのライフサイクルを見極める
Tooltip
Flux
Facebookが提唱
特定のライブラリやFWではなく、アーキテクチャの呼称
– TypeScriptとES6
– Gulp