elurra.info

フロントエンド技術勉強会

フロントエンド技術勉強会
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)の設計思想
2でも採用されている
徐々にコンポーネント指向に

Thinking in React

コンポーネント=DOMとJSをセット、UI部品
再利用性
カプセル化・責務の分離
複雑なものの単純化
メンテナンス性

AngularJSでも実践可能(限界はある)
Reactの推奨するレベルでの細かい部品化はできない
辛くならない大きさのコンポーネントを見極める
コンポーネントのライフサイクルを見極める
Tooltip

Flux
Facebookが提唱
特定のライブラリやFWではなく、アーキテクチャの呼称

– TypeScriptとES6

– Gulp

Share Button

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

4 × three =