READYFORのフロントエンドを2019年末から全体像を構想してどうしていくか検討した話

Transcript

2. 2 2019年末から全体像を構想してどうしていくか検討した話
3. 3 岡村　謙 @resqwork
 エンジニアリングマネージャー
 フロントエンド組織を組成しつつアプリケーション基盤の設計などに従事
 ClubhouseにジョインしてやってることといえばAmong Usです
 #readyfor_meetup

4. 4 READYFOR ご存知ですか？
 #readyfor_meetup

5. 5 Vision
 誰もがやりたいことを
 実現できる世の中をつくる
 
 
 
 Mission
 想いの乗ったお金の流れを増やす
 
 #readyfor_meetup

6. 6 クラウドファンディングサービス「READYFOR」
 充実したサポートで業界最高水準の達成率を誇る、国内最大級のクラウドファンディングサービスです。 
 ※1 大手クラウドファンディング企業で 2018/1/1〜2018/12/31の間に終了したプロジェクトの比較 ※2 2021年1月時点　※3 2021年1月時点 No.1 1.5 万件以上 180 億円
7. 7 クラウドファンディングとは
 インターネットを介して自分の夢や想いを世の中へ発信し、 
 その活動を応援したいと思ってくれた不特定多数の人々から少額ずつ資金を募る仕組みです。 
 #readyfor_meetup

8. 8 2019年末のREADYFORの状況とアーキテクチャ
 #readyfor_meetup

9. 9 近い将来におこること
 
 - トラフィックの増加
 - 開発人数の増加
 - 技術的負債による問題
 - プロダクトの新規開発
 
 
 
 
 組織状況
 2018年の資金調達を機に、ビジネスを一気にスケールしていくフェーズに
 #readyfor_meetup

10. 10 職能
 2019年8月
 2021年2月(現在)
 フロントエンド
 3名
 8名
 バックエンド
 3名
 10名
 SRE
 1名
 2名
 合計
 7名
 20名
 組織状況
 #readyfor_meetup

11. 11 GitHub PR運用開始
 誕生
 react-rails 導入
 UIリニューアル
 erbからslimへ移行
 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 デザインシステムの導入
 リブランディング
 UIリニューアル
 UI Library集の構築
 react on rails 導入
 CTO 町野 Join
 それまでのREADYFOR

12. 12 
 
 READYFOR
 （Rails）
 
 
 RF Admin
 オペレーター向け
 EC2
 実行者
 View
 支援者
 View
 当時のアーキテクチャ
 UIライブラリ
 #readyfor_meetup

13. 13 フロントエンドの課題
 ExecJSがつらい
 テストコードが少なくリファクタリングがしづらい
 アプリケーションの実行パフォーマンスを監視できるようにしたい
 API設計や連携がスムーズにできる世界
 
 テストデータ作成に時間がかからない世界
 
 #readyfor_meetup

14. 14 フロントエンドの課題 ExecJSがつらい テストコードが少なくリファクタリングがしづらい アプリケーションの実行パフォーマンスを監視できるようにしたい API設計や連携がスムーズにできる世界 テストデータ作成に時間がかからない世界 #readyfor_meetup

15. 15 フロントエンドの課題
 特に React on Rails を利用を続けることに課題があった。
 
 - ExecJS では require が出来ない。
 require は CommonJS の API となりサポートされていない
 一部の Node.js を利用したライブラリが PreRender 時に利用出来なかった
 
 - 技術的な課題への対応コストが発生していた
 
 
 ノウハウを貯めていくよりもリスクをなくしたい
 #readyfor_meetup

16. 16 フロントエンドの課題
 ExecJSがつらい
 テストコードが少なくリファクタリングがしづらい
 アプリケーションの実行パフォーマンスを監視できるようにしたい
 API設計や連携がスムーズにできる世界
 
 テストデータ作成に時間がかからない世界
 
 そうだ、分離しよう！！
 #readyfor_meetup

17. 17 どこから進めるのか？
 #readyfor_meetup

18. 18 
 
 READYFOR
 （Rails）
 
 
 RF Admin
 オペレーター向け
 EC2
 UIライブラリ
 実行者
 View
 支援者
 View
 当時のアーキテクチャ
 #readyfor_meetup

19. 19 
 
 READYFOR
 （Rails）
 
 
 RF Admin
 オペレーター向け
 EC2
 API
 実行者
 View
 支援
 View
 APIを作り、コアドメインを分離
 UIライブラリ
 #readyfor_meetup

20. 20 
 
 READYFOR
 （Rails）
 
 
 RF Admin
 オペレーター向け
 EC2
 API
 実行者
 View
 支援
 View
 APIを作り、コアドメインを分離
 UIライブラリ
 #readyfor_meetup

21. 21 エンジニアリング基盤チームを発足
 フロントエンド・バックエンド・SREで結成
 #readyfor_meetup

22. 22 直近で取り組むことを決めた
 フロントエンドロジックの分離
 バックエンドロジックのAPI化
 コンテナ基盤の実現
 #readyfor_meetup

23. 23 こうして フロントエンド分離を進める事になったが リソースの問題は解決していない #readyfor_meetup

24. 24 とはいえ やることは愚直に進める #readyfor_meetup

25. 25 
 
 READYFOR
 （Rails）
 
 
 RF Admin
 オペレーター向け
 EC2
 UIライブラリ
 支援者
 View
 #readyfor_meetup
 分割方法の例

26. 26 #readyfor_meetup
 分割方法の例
 Step1
 分割対象のViewのコンポーネントをUIライブラリに委譲し、
 RailsのRenderに乗る形でコンポーネントをリファクタする
 LayoutはRailsのまま利用
 API化を見越してRailsからViewに渡されていたインスタンス変数を出 来る限り滅ぼしておく
 Step2

27. 27 
 
 READYFOR
 （Rails）
 
 
 RF Admin
 オペレーター向け
 EC2
 UIライブラリ
 支援者
 View
 #readyfor_meetup
 分割方法の例

28. 28 
 
 READYFOR
 （Rails）
 
 
 RF Admin
 オペレーター向け
 EC2
 UIライブラリ
 支援者
 View
 #readyfor_meetup
 分割方法の例

29. 29 #readyfor_meetup
 分割方法の例
 Step3
 RailsのController・Modelのリファクタを行いAPI化する
 
 
 READYFOR
 （Rails）
 
 
 RF Admin
 オペレーター向け
 EC2
 UIライブラリ
 支援者
 View
 API
30. 30 #readyfor_meetup
 分割方法の例
 Viewの分離する、APIの分離を行う
 Step4
 READYFOR （Rails） RF Admin オペレーター向け EC2 API 支援 View ECS UIライブラリ
31. 31 分離に向けた技術スタック
32. 32 READYFORは10年の歴史があるプロジェクト 捨てられるコードは捨てる ドメインに合うアーキテクチャを選定しやすい環境 得たいソフトウェア特性を得やすい環境 リファクタしていくことで 品質や開発に大きく影響すると思い取り組んでいます！ さいごに