- freee Tech Night #2 「大規模SaaSを支えるフロントエンドの話」に参加してきました。
freee-tech-night.connpass.com
- freeeのシステムは歴史があってかなり大規模だということを初めて知りました。
- 多くのエンジニアで大規模なシステムを開発してい、普段のフロントエンドの勉強会ではあまり得られない考え方を得られました。
- yarnからnpmに戻した理由なんかは大規模ならではだなと思いました。
- デザインシステム作って効率的に開発できるようにする、なんていう夢はいろんな人が考えると思いますがそれを実現する段階まできていてすごいと思いました。
会計freee7年目のフロントエンド開発
会計freee
- 単一リポジトリで7年くらいやってきた
- モノリシックなRailsアプリ
- フロントエンドもそこに含む
- もともとcoffeeだったのを置き換えていってる
- フロント/サーバの区分はなくみんなRailsとReactスキルが必須
初期 - 2014年の構成
2015年- の構成
現在
- ほぼReact
- SPAではなく小さなSPAの集合みたいな感じ
- ESLint/Prettier
- Storybook
- flowtype
- jest
- Reduxではなくflux(アーキテクチャではなくライブラリの方)を使っている
- 当時はReduxロックインを懸念してより薄いfluxを採用
- 薄いがゆえにいろいろできすぎてしまう
- 情報量が少ない
- コード量が大きくなりすぎてReduxへの移行は厳しくなった
コンポーネントの状態をStoreで管理してしまった
- 例えば
- UIStoreというのを作ってそこで管理した
- 非同期処理でAction2つ呼ぶのがつらい
Reactコンポーネントを継承して使ってしまっていた
振り返って
- 初期の設計や規約がちゃんと整備できてなかった
- 大規模ゆえに軌道修正が難しい
- 誰かが横断的に監視し続けるにも限界がある
- ルールの整備を勧めてる
今後
- 共通UIコンポーネントライブラリを開発してる
- フロントエンド委員会も継続的に活動中
会計freee が yarn から npm に出戻った本当の理由
yarnからnpmにで戻るというブログを書いた
npm vs yarn
npm
yarn
本当にyarnが必要なのか
yarnの利点
- 高速インストール
- ロックファイル
- パッケージが依存するパッケージのバージョンを固定できる
- package-lock.jsonが登場した
- ワークスペース
- monorepoを管理する機能
- Lernaを使えばnpmでもできる
なぜnpmに戻したか
複数バージョンのyarnが使いにくい
- プロジェクトごとにバージョン返るのがやりづらい
- yvmというものもあるけどnodeenvのように使いやすいものではなかった
2つのビルド環境
- CircleCIによるDockerベースのビルド
- Jenkinsによるビルド
- 環境ごとにyarn入れるステップが増えてしまう
エンジニア組織の巨大化
npmに出戻るまでの道のり
- yarn.lockの削除
- node_modulesの削除
npm iでパッケージ再インストール- lockの移行は素直に行かないのでE2Eで担保
まとめ
- npmの課題が解消されyarnのメリットが薄れてきた
- エンジニアが多いことによるyarn導入コストの増加した
会社の規模が急激の大きくなった
freeeのWebフロントエンド開発
- デザイナーが画面モック作ってエンジニアへ
- そこから先はエンジニア
大きくなってきた頃のWebUI
- Bootstrapあら独自UIに
- 要件が複雑化する一方で環境整備の不備が目立つ
- 微妙に違う実装がうまれてくる
- フロント不慣れな人も書くのでめちゃくちゃになってきた
- UI作るのがつらい状況に
UIの統一的なチーム
- Atomic Design and GuideLineチーム
- どのデザイナーでも統一されたUIをデザインできるようにする
- フロントエンド不慣れでも統一したUIをじっそうできるようにしたい
- 誰でも使えるサービスにしたい
- 機能がどんどん増えてるので少ない人数でやっていくの大変
- ESLintでJSXタグをチェック
- Storybookに対して自動チェック回したり
- a11yのaddonがある
今後
- デザインシステムほぼ実装完了
- サービスへ導入中
- Sketchライブラリの共有が課題
- SketchClooudで配布
- 将来的にFigmaやAdobeXDにするかも
- SCSS無秩序にオーバーライドされそうで怖い
- ReactやFlowtypeへのロックイン問題
- TS対応の検討
- Vueなど使うプロジェクトがでてきたら・・
