Closed3

BARフロントえんどう #1 「フロントエンドリアーキテクト」

hanetsukihanetsuki

リアーキテクトと開発生産性について

https://speakerdeck.com/yosuke_furukawa/riakitekutotokai-fa-sheng-chan-xing-nituite

手段メトリクスについて

開発生産性 > リアーキテクト
開発生産性 ≠ リアーキテクト

開発生産性のよくある誤解

  • 開発生産性 ≒ 開発者満足度 ← 終わりない旅
  • 開発生産性 ≒ Activity ← ハックされやすい
  • 開発生産性 ≒ パフォーマンス ← 開発に直結しない
  • 開発生産性 ≒ 協調
  • 開発生産性 ≒ チームの集中

上記いずれかではなく、複数の要素を組み合わせて表現する必要がある。

これのことを S.P.A.C.E.フレームワーク という。

https://r-kaga.com/blog/about-space-of-developer-productivity

LeanとDevOpsの科学と同じ著者が出した論文

S.P.A.C.E.フレームワーク

https://queue.acm.org/detail.cfm?id=3454124

事例)

  • 広告を導入
  • システムを安定稼働させるため開発ツールやフレームワークを慣れたもので統一する
  • GitHub社が実施したコパイロットの実例

リアーキテクトはなんのメトリクスに効くのか?

  • 短期的には、効果が出にくい。長期的なメリットとなる。
  • 推進していく上で、コードにオーナーシップを持っておく必要がある。

組織の技術継承の話

式年遷宮という考え方がある。システムのリアーキテクトもここが狙いであることが多い。

hanetsukihanetsuki

エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例

https://speakerdeck.com/undefined_name/ensiniatoqatekorahosuruhurontoentoriakitekutiyakai-fa-noshi-li

kintoneをリアーキテクチャしている。

フロリアとは

(フロントエンドリアーキテクチャ)
Closure Tools → React

開発手順

画面・機能単位で既存の仕様再現するように書き換えを行う。

エンジニアとQAのコラボレーション

QAは既存仕様への理解が深い。

職能を跨いだコラボレーションのために

  • 共通のチームの目標を設定する。
    • チームメンバーが目標のためにそれぞれのタスクを進めあう。
  • 職能で仕事を区切らずお互いの仕事を食い合う

質問

  • バックエンドのリアーキテクトについて
    • バックエンドのリアーキテクトは現在行っていない。
  • 画面数について
    • 数えられないくらいにある。
  • Chromaticの対象
    • 全ページではなく、コンポーネントを絞って対応している。
  • 新規機能開発と並行することに対して
    • ページ毎に素早くリアーキテクトして細かくリリースしていく。
hanetsukihanetsuki

出前館Webフロントエンドリプレイスプロジェクトの取り組みと反省について

2021年からビッグリライト中。PHP→Next.jsへのビッグリプレイス。
仕様をそのままにコードをリライトしている。

PHPを内製化するに伴い、フロントエンドチームPHPを扱えなかった。
内製化に伴うフロントエンドエンジニアの採用も視野に入れた。
Next.jsの採用に満足している。

このスクラップは2日前にクローズされました