Scramble! 1 Frontendに参加しました

FOLIO さんにて開催されてた、Scramble! #1 Frontend に参加したので、そのまとめ。

ちょっとまとめが雑なとこあるので、あとでまたちょっと修正するかも。特にメモが取りきれてない。。。

React, Redux の話が多めで、内容の濃いイベントだった。

connpass イベントリンク

僕の Tweet

みんなの Tweet

セッションのメモ

SPA に置ける CSS についてもう一つの解 / @yoshiko_pg

技術は誰かが使うもの、デザイナーも使えるようなもの。
CSS in JS の問題点 -> CSS 書くために JS を覚えてもらう?
CSS Modules でデザイナーとの協業を解決

本題
CSS を React の世界に持ってくる手法はいくつかあるので、適切なものを選ぶ。銀の弾丸はない。

  • Styled component
  • CSS Modules

スタイルはコンポーネント単位で適用するコンポーネントには、マージンなどは設定せずに、それを利用するコンポーネントで設定する

Yet another Side Effect Layer in Redux/ @minodisk

Redux がやってくれないこと

  • 副作用のある処理を各場所の提供
    • API やトラッキング用メソッドのコールどこでやるか
  • Component でやる: 🙅‍♀️
  • Action 発行前: Redux-thunk: 🙅‍♀️
  • redux-saga: 🙆‍♀️

  • redux-sage の良さ

    • 各レイヤーが自身の責務に集中できる
  • redux-saga のつらみ

    • Generator 辛い
    • テスト辛い

Ready for Async Rendering / @koba04

  • Async Rendering を知りたければ、まず ReactFiber
  • render phsase は async で commit phase は sync
  • Lifcycle method: v16.3 では追加, v17 で破壊的な変更

スライド

redux-pluto / @yosuke_furukawa

ベストプラクティス

スライド

非同期データロード

redux-async-loader

  • CSR でも SSR でもどちらでも動くデータ Fetch 関数

Redux フロー制御

redux-effects-steps
redux や redux-saga では複雑すぎるところがあるため。

ducks

API 定義

agreed で API の mock を先に作成
Swagger は仕様を定義する、agreed は要求を定義する。

form

html, DOM に持つのを uncontrolled form。
react の state に持つのが controlled form。
controlled form がセオリー。
efemeral state なら react の state, global な state は redux の state, forever は local strage など。

仮想スクロール

無限スクロール

ユーザの回遊時間を増やしたい。無限スクロール + ページネーション。ユーザーとクローラの両方にフレンドリーにする。

Babel プラグイン

気をつける。

一粒で三度おいしい Storybook / @quramy

コンポーネントサクサク作れる導入するだけでテストかけるようになる

まとめ

僕も何か開発ツール作って登壇とかしたい。