• @hanak1a_ さん
  • pixiv VRoid Hub チーム
  • Web 製映像編集ソフト Delir の開発経験を元に、ステート管理フレームワーク Fleur を開発
  • 【SSRも】Fleur − 新しいFluxフレームワーク【イケる】 - pixiv inside
• @uhyo_ さん
  • LINE フィナンシャル開発センター Web開発室
  • 個人ブログ: uhyo/blog
  • 【LINE証券 FrontEnd】LINE証券フロントエンドの全体像 - LINE ENGINEERING

Recoil の概要

• https://recoiljs.org
• Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
• Facebook が開発を進めている、React 向けの新しいステート管理ライブラリ
• Redux とは違い、全ての状態が 1 つの Store としてまとまっておらず、atom の組み合わせで状態を表現
• Recoil が提供する機能は非常にシンプルで、使い方はユーザー次第

実利用から作られた Fleur

• Fleur は多機能な SPA である Delir や、VRoid Hub、pixiv Sketch の開発経験を元に設計
  • Operation という副作用層や組み込みの router が特長
  • 中規模以上の開発時に必要となる機能をあらかじめ提供
  • store 管理の実装として immer.js を採用
• 大規模な開発でも堅牢な開発ができる一方、若干小回りが効きづらい点も感じている

Recoil 私ならこう使う

• Recoil は React と親和性の高い API ではあるものの、提供する機能はとてもシンプルで原始的
  • Recoil をベースとしたメタライブラリも容易に作れる
  • 特に Redux における Actions などの副作用は、各人がルールを決めて使わなければならない
• 3 人が現時点での Recoil を使ったアプリケーションやライブラリを作るとするなら、どのような使い方で活用してみたいか？
  • spring_raining: Selector の set property を何かに活用できないか？ → set 専用の selector を作ってみる？
  • Hanakla: Recoil が求められる状況はシングルページで複雑なステート管理が必要な場面
    • Reduxほど大げさではなく導入が楽
  • uhyo: get/set がどこからでも処理できるからこそ、外部から見える副作用の手段をうまく隠すことが重要 → Hooks を活用して直接副作用を実行させない
• アプリケーションが複雑になった場合キーの管理はどうするか？
• SSR の環境では動かなかったという報告もあり、まだ完全には SSR に対応できていない点は課題
• API call などの非同期処理の状態を Recoil で表現する方法について

Refs

• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic