Slide 1

Slide 1 text

Web Re-Architecture プロジェクトにおける Web Re-Architecture プロジェクトにおける 技術的チャレンジ 技術的チャレンジ フロントエンドエンジニア @vwxyuratoooo

Slide 2

Slide 2 text

About Me About Me 宮崎優太郎 2018/05/16 入社 Front end engineer Web Re‒Architecture Project

Slide 3

Slide 3 text

Frontend ⚒ Re‒Architecture

Slide 4

Slide 4 text

今日話すこと 今日話すこと どのように最新技術を取り入れているのか どのような技術的チャレンジをしているのか プロダクト開発と技術イノベーションとの関係

Slide 5

Slide 5 text

Web Re-Architecture Project Web Re-Architecture Project

Slide 6

Slide 6 text

の前に、メルカリで進められている 2つの Project に関して...

Slide 7

Slide 7 text

Re-Architecture Project Re-Architecture Project Frontend 以外でも行われている 古くなった技術スタックの刷新 OKR と共に全社的に周知され 高い優先度で進められている

Slide 8

Slide 8 text

Microservices Project Microservices Project 巨大なモノリシックサービスを 独立した複数のサービスに分割 大きくなったエンジニア組織に対して 一人ひとりにオーナシップ 変化や障害にも強い組織とプロダクト目指す

Slide 9

Slide 9 text

今の技術と組織を考えてベストな選定をしようとすると 勝手に Microservices になってくる

Slide 10

Slide 10 text

Frontend における Re-Architecture Frontend における Re-Architecture https://speakerdeck.com/sota1235/road‒to‒migrate‒jp‒web‒as‒a‒microservice

Slide 11

Slide 11 text

Frontend における Re-Architecture Frontend における Re-Architecture アプリに追いついていない未実装機能 + α PC・SP 共に最適化しきれていない UI ⬇ ⬇ ⬇ 開発スピードの向上 チームの変化 Web に求められているものと 立ち位置の変化

Slide 12

Slide 12 text

Architecture Frameworks Architecture Frameworks https://speakerdeck.com/sota1235/road‒to‒migrate‒jp‒web‒as‒a‒microservice

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

ここまでのまとめ ここまでのまとめ これから先更にプロダクトを進めていくための Re‒Architecture と Microservices Re‒Architecture と Microservices 化が新しい技術挑戦の 場にもなっている これから先新しい技術をすばやく取り入れていくための 基盤づくりでもある

Slide 16

Slide 16 text

どのように進めているのか どのように進めているのか

Slide 17

Slide 17 text

スケジュールとか スケジュールとか ページ毎にリプレイスしていく アーキテクチャに問題があれば早めに気付ける リリーススケジュールを都度細かく調整

Slide 18

Slide 18 text

技術選定 技術選定 Issue, Slack, 口頭で議論 必要があればプロトタイプを作って比較検証 チームのメンバーが近くの席にいる ❌ 誰かが決める、これ使えって言われる ⭕ 各自がオーナーシップを持ち決定できる ディスカッションをしていく中でベストなソリューション が共通認識として出来上がってくる

Slide 19

Slide 19 text

SET (Software Engineer in Test) や セキュリティなど、プロに相談できる

Slide 20

Slide 20 text

今後のフロントエンド 今後のフロントエンド PWA でできること Microfrontend の可能性 メルカリ、メルペイと定期的に勉強会をしながら 技術の共有やディスカッション

Slide 21

Slide 21 text

まとめ まとめ 組織と仕組み オーナーシップ, チャレンジ, コードを新しく保つことへ の理解 一緒に課題解決できるメンバー プロフェッショナル, 目的意識と手段 世の中を変えていくチャンスや文化 プラットフォーム, 基盤を作る2つのプロジェクト

Slide 22

Slide 22 text

ありがとうございました