コンポーネント開発で変わったフロントエンドとrecompose
- 石橋啓太
- DMM.com クリプトマイニング開発部
- @usagi-f
- 本書いた人(React開発現場の教科書)
フロントエンドの今昔
ターニングポイント
React + Atomic Design
React
- UI構築を抽象化
- 宣言的関数実装
- 小さく作って組み合わせる思想
- 副作用はどうする
- 責務の分離
- DOMの書き換えはReactに隠蔽される
- UIの構築に注力できる
AtomicDesign
- UIを分類して定義付け
- UIデザインも含めて設計できる
- 全てを準拠させるようなものではない
- デザイナーとエンジニアのコミュニケーションがしやすくなる
higher order component
- HOC
- 関数を引数にとって関数を返す関数
// 副作用が逃げる
const withSome = (component) => {
return {
}
}
const Button = (props) => <button>{props.label}</burron>
const NewButton = () => withSome(Button)
recompose
- recompose
- reactが用意してるもの
- UIコンポーネントから余計な実装を省きやすい
- 再利用性が高まる
- AtomicDesignにも準拠しやすくなる
まとめ
- コンポーネント開発が普及しそう
- WebComponents
- react-native-dom
- material-ui
- Polymer
- lit-html
- preact
- alibaba/rax
Alternative Atomic Designをさがして(仮)
- 吉竹遼
- よりデザイン
AtomicDesignおさらい
- ページやインターフェイスに含まれる要素を5段階で構成した
- それを組み合わせることでアプリを作る
5要素
- Atoms
- それ以上分解できない
- Molecules
- 一つのことをうまくできること
- Organisms
- Template
- Pages
AtomicDesignへの疑問
- Atomsからほんとに作れるの？
- MoleculesとOrganismsの違いがわからない
Alternative Atomic Design
- 作者
- AtomicDesignは厳格に守るものではない
GE
- GE Predix Design System
- https://medium.com/ge-design/ges-predix-design-system-8236d47b0891
Futuerlearn
- MoleculesとOrganismsの違いがわからない
- 分ける必要あるのか
- helpers
- それ単体で意味をなさないもの
- standalone
- それ単体で独立したコンテンツ
Lewis ...
- 用語が混乱を招く
Airbnb DLS
Back...
- 楽譜からメタファーを持ってきた
- ハーモニー
- メロディー
- リズム
まとめ
- MoleculesとOrganismsの違いにみんな悩んでる
- 化学用語馴染みづらい
- チームに合った構造を試してる
React360でVR
- 堀川豊
- ピックアップ株式会社
- DMMの関連会社
- http://picappinc.jp
React360とは
- 3DとVRのUIフレームワーク
- ReactVRから改名した
- Web実装とOculus実装を分けた
- Web版がReact360
- メリット
- Reactの考え方でVRのUIを構築可能
GetStarted
yarn add react-360-cli react-360 init sample cd sample && yarn startコンポーネントはRNっぽい
- ViewとかTextとか
- AppRegistryとか
