2019/04/17 に公開4070 views
@potato4d が LINE NEWS チームの @aloerina_ と @atomer に LINE NEWS での React.js の悩みについて話を聞きました。
今回のゲスト
Otsuki tomoaki
- @aloerina_
- LINE NEWS Team
Ryota Agata
- @atomer
- LINE NEWS Team
LINE NEWS について
- 今回の対象は「NEWS TAB」
- LINE アプリの右から二つ目
- WebView ベースの React
- 2 年以上前の初期リリースからアーキテクチャ変更はなし
- React, flux-utils の構成
- エンジニアチームは初期が 2 名、現在 8 名体制
- 今回は React.js × Flux にて props のバケツリレーが必要かという話題がでた
- tl;dr
- React+Fluxアプリケーションにpropsバケツリレーは必要か
- Pull Request から議論が開始
- props tree に対して Container を作りたいという PR
- これまでは root だけが Container をもち、すべて props で渡す形式
- ファーストインプレッション
- 大槻さん
- これまでの React 設計が破綻しないか？を精査したい
- 縣さん
- Vue.js に似ている記法だとは感じつつも、違和感はなかった
- 共通して
- Vue.js / Vuex ならこうするよねという肌感
- 大槻さん
アーキテクチャの見直しから気づいた方針転換の選択肢
- まずは資料から探った
- 再度公式ドキュメントを見直した結果、 Container が一つである必要はなかった
- React Document
- Flux Document
- 現場やネットの情報では props バケツリレーがやはり多い
- 実際にこれまでもやっていた
- 一方で煩雑さを感じる点もあった
- 再度公式ドキュメントを見直した結果、 Container が一つである必要はなかった
大人数のチームでの課題の吸い上げと合意形成
- バケツリレーをやめることに対して
- よくある React 設計なのでやめる必要もないのでは？という意見もあった
- トレードオフの部分はあるのでチーム全体の意見をまずは取る
- 考えた視点
- 既存設計と違うものがあった場合に修正工数が増えないか
- テスタビリティはどうか
- 最終的には「問題ないなら変えても良い」
- もともと課題意識をメンバーが持っていたことの現れなのでは
- みんな煩雑だと思っていたものが対応された良い事例
NEWS TAB における現時点での決定
- Pull Request はマージされた
- 大きめの修正なので書き直すよりはまずは入れて試してみたい
- 一方で全体としての正解かはわからないので走りつつ決定していく
- チームで合意をとって全体で解決していきたい
- モブプログラミングなどを駆使して合意をとりつつ進めていく
今後の改善について
- デグレしないためのレビュー体制の構築が課題
- テストをより強化したいモチベーション
- それ以前に型についてテストを書く意義は薄いため、防げる部分には TypeScript で守りたい
- ここもモブプログラミングを活用したいモチベーションがあり
- コードを触れる人を増やす
- 「ここのコードはこの人」というコードオーナー感を出さないようにつとめていく
クロージング
- 今週の Front-End