React Tokyo Plusメモ

React Tokyo Plus | Meetup

Talk by Mercari

資料: https://speakerdeck.com/nullpoo/26

  • PHP + SPAからReact + Apollo + Node.js + Next.jsへリアーキテクチャ中
  • Be Professional Dayいいなと思った

Expo side React SSR

資料: https://talks.leko.jp/expo-side-react-ssr/#0

  • Service workerでSSRするのを応用
  • ExpoでSSRして、ExpoのPrint APIに渡してあげるとスマホアプリ内で印刷できるPDFを生成できる
  • SSR用のエンドポイントも不要になる

Large react product with 20+ FrontEnd Engineers in Rakuten Travel

資料: https://speakerdeck.com/taka66/large-react-product-with-20-plus-frontend-engineers-in-rakuten-travel

  • 各サービス共通のフルスタックフレームワークを用意したらしい

  • 自前にしたけどいまならnext.jsあるね、とも言ってた

  • yarn with-stub でアプリとスタブサーバーができる、injectionでドメイン切り替えられるようになってる

  • Consumer Driven Contractsなテストをやっていきたいらしい

  • 自前のUIライブラリ、storybook + storyshotsで運用しているそう

  • 直面した課題

    • 自前のライブラリ運用しつつ機能開発でプルリクが2重に
    • 管理ツールとプロダクトでロジックを共通化しにくかった

      • 管理ツールはライブラリ使用をやめた
    • デザイナーとの認識違いがおきた

      • デザイナーとの認識合わせと、Atomic Design導入
  • Unit Test: Jest + Enzyme

  • System Test: cypress

    • Stubにも切り替えられるようになっている
  • monorepo

    • 割愛
  • organization

    • 割愛
  • KPIを見ながらDX / UX改善をやってく話

User-Centric-TDD with react-testing-library

資料: https://slides.com/yoshihironakamura/deck#/

  • TDDのワークフローの話
  • react-testing-libraryの件

    • ユーザーが実際に操作するようにテストできる
    • enzymeは内部実装に依存してる

      • react-testing-libraryを使うと、挙動が変わらなければテストもキープされる
  • User Centric TDD

    • ユーザーの振る舞いベースでテストコードを書いてく
    • TDD Docsを作成して、仕様をチームで確認し合う
    • jest cliで出力したjsonから静的サイトとしてTDD DOcsを作成すればいい
  • jest

    • jestのit.todo / it.skipが便利
    • スキップの理由をちゃんと書く
    • あとで動作確認する時にskipされている部分を厚めにやればよいことがわかる
    • バグのときの原因切り分けも簡単になる
  • tips

    • 仕様を記述するので、エンジニア以外でも分かる言葉でテストコードを書いていく
    • テストコードを書いてく優先度もユーザーがどう使うかで決めていけばいいのでは

React Create App + SSR + firebase

Next.js / TypeScript でリニューアル運用におけるハマりどころ

資料: https://tkdn.github.io/slides/2019-06-26-nextjs-and-typescript/#0

  • 施策の中心がフロントエンド寄りだったので、効率的な仕組みにしたかったところから技術スタックを変えたらしい
  • パフォーマンスをちゃんと計測してるのがすごかった
  • context api使ってABテストを効率化(変更容易性を保ったcomponentができた
  • next.config.jsの運用が(WebpackとNext.jsのダブルスタンダード感)

    • プラグインの読み込み順を気にしなきゃいけないとか(自分でconfigにプッシュしてく
  • Next.jsのBUILD_IDが毎回ランダム生成らしい

    • postbuildでgitのハッシュを使うことで対応
    • 今ならgenerateBuildId関数が使える
  • パフォーマンス問題があってクライアントサイドでReact使ってないらしい

雑感

  • SSRというかNext.js + TypeScriptは素振りしておこうと思った
  • テストもreact-testing-library / cypressあたり素振りしようと思う
  • User Centric TDDも、チームで仕様を握り合ってから開発ができるワークフローめっちゃいいと思った
  • パフォーマンスへの意識がほぼ0なので、どこかで成長していかないといけないなと思った

    • React.hydrateとか全然分からなかった
  • @tkdnさんの前の資料も気になる