Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
READYFORのフロントエンドを2019年末から全体像を構想してどうしていくか検討した話
Search
ken_o
February 05, 2021
2
2.2k
READYFORのフロントエンドを2019年末から全体像を構想してどうしていくか検討した話
ken_o
February 05, 2021
Tweet
Share
Featured
See All Featured
BBQ
matthewcrist
85
9.3k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Testing 201, or: Great Expectations
jmmastey
38
7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Side Projects
sachag
452
42k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
How STYLIGHT went responsive
nonsquared
95
5.2k
Building Adaptive Systems
keathley
38
2.2k
Raft: Consensus for Rubyists
vanstee
136
6.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Transcript
1
2 2019年末から全体像を構想してどうしていくか検討した話
3 岡村 謙 @resqwork エンジニアリングマネージャー フロントエンド組織を組成しつつアプリケーション基盤の設計などに従事 ClubhouseにジョインしてやってることといえばAmong Usです #readyfor_meetup
4 READYFOR ご存知ですか? #readyfor_meetup
5 Vision 誰もがやりたいことを 実現できる世の中をつくる Mission 想いの乗ったお金の流れを増やす
#readyfor_meetup
6 クラウドファンディングサービス「READYFOR」 充実したサポートで業界最高水準の達成率を誇る、国内最大級のクラウドファンディングサービスです。 ※1 大手クラウドファンディング企業で 2018/1/1〜2018/12/31の間に終了したプロジェクトの比較 ※2 2021年1月時点 ※3 2021年1月時点
No.1 1.5 万件以上 180 億円
7 クラウドファンディングとは インターネットを介して自分の夢や想いを世の中へ発信し、 その活動を応援したいと思ってくれた不特定多数の人々から少額ずつ資金を募る仕組みです。 #readyfor_meetup
8 2019年末のREADYFORの状況とアーキテクチャ #readyfor_meetup
9 近い将来におこること - トラフィックの増加 - 開発人数の増加 - 技術的負債による問題 -
プロダクトの新規開発 組織状況 2018年の資金調達を機に、ビジネスを一気にスケールしていくフェーズに #readyfor_meetup
10 職能 2019年8月 2021年2月(現在) フロントエンド 3名 8名 バックエンド 3名 10名
SRE 1名 2名 合計 7名 20名 組織状況 #readyfor_meetup
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 READYFOR (Rails) RF Admin オペレーター向け
EC2 実行者 View 支援者 View 当時のアーキテクチャ UIライブラリ #readyfor_meetup
13 フロントエンドの課題 ExecJSがつらい テストコードが少なくリファクタリングがしづらい アプリケーションの実行パフォーマンスを監視できるようにしたい API設計や連携がスムーズにできる世界 テストデータ作成に時間がかからない世界 #readyfor_meetup
14 フロントエンドの課題 ExecJSがつらい テストコードが少なくリファクタリングがしづらい アプリケーションの実行パフォーマンスを監視できるようにしたい API設計や連携がスムーズにできる世界 テストデータ作成に時間がかからない世界 #readyfor_meetup
15 フロントエンドの課題 特に React on Rails を利用を続けることに課題があった。 - ExecJS
では require が出来ない。 require は CommonJS の API となりサポートされていない 一部の Node.js を利用したライブラリが PreRender 時に利用出来なかった - 技術的な課題への対応コストが発生していた ノウハウを貯めていくよりもリスクをなくしたい #readyfor_meetup
16 フロントエンドの課題 ExecJSがつらい テストコードが少なくリファクタリングがしづらい アプリケーションの実行パフォーマンスを監視できるようにしたい API設計や連携がスムーズにできる世界 テストデータ作成に時間がかからない世界 そうだ、分離しよう!!
#readyfor_meetup
17 どこから進めるのか? #readyfor_meetup
18 READYFOR (Rails) RF Admin オペレーター向け
EC2 UIライブラリ 実行者 View 支援者 View 当時のアーキテクチャ #readyfor_meetup
19 READYFOR (Rails) RF Admin オペレーター向け
EC2 API 実行者 View 支援 View APIを作り、コアドメインを分離 UIライブラリ #readyfor_meetup
20 READYFOR (Rails) RF Admin オペレーター向け
EC2 API 実行者 View 支援 View APIを作り、コアドメインを分離 UIライブラリ #readyfor_meetup
21 エンジニアリング基盤チームを発足 フロントエンド・バックエンド・SREで結成 #readyfor_meetup
22 直近で取り組むことを決めた フロントエンドロジックの分離 バックエンドロジックのAPI化 コンテナ基盤の実現 #readyfor_meetup
23 こうして フロントエンド分離を進める事になったが リソースの問題は解決していない #readyfor_meetup
24 とはいえ やることは愚直に進める #readyfor_meetup
25 READYFOR (Rails) RF Admin オペレーター向け
EC2 UIライブラリ 支援者 View #readyfor_meetup 分割方法の例
26 #readyfor_meetup 分割方法の例 Step1 分割対象のViewのコンポーネントをUIライブラリに委譲し、 RailsのRenderに乗る形でコンポーネントをリファクタする LayoutはRailsのまま利用 API化を見越してRailsからViewに渡されていたインスタンス変数を出 来る限り滅ぼしておく Step2
27 READYFOR (Rails) RF Admin オペレーター向け
EC2 UIライブラリ 支援者 View #readyfor_meetup 分割方法の例
28 READYFOR (Rails) RF Admin オペレーター向け
EC2 UIライブラリ 支援者 View #readyfor_meetup 分割方法の例
29 #readyfor_meetup 分割方法の例 Step3 RailsのController・Modelのリファクタを行いAPI化する READYFOR (Rails)
RF Admin オペレーター向け EC2 UIライブラリ 支援者 View API
30 #readyfor_meetup 分割方法の例 Viewの分離する、APIの分離を行う Step4 READYFOR (Rails) RF Admin オペレーター向け
EC2 API 支援 View ECS UIライブラリ
31 分離に向けた技術スタック
32 READYFORは10年の歴史があるプロジェクト 捨てられるコードは捨てる ドメインに合うアーキテクチャを選定しやすい環境 得たいソフトウェア特性を得やすい環境 リファクタしていくことで 品質や開発に大きく影響すると思い取り組んでいます! さいごに
33