こんにちわ！ システム本部フロント開発部の村上といいます。
12/6 ~ 12/14の9日間、福岡のカラビナテクノロジーさんでフロントエンド基盤刷新合宿を行っております。
今日は合宿の内容や、そもそもフロント基盤刷新って何やっているのかをお話させていただきます。
基盤刷新とは？
基盤刷新を一言で言うと「OisixのECサイトを今の時代に合わせて1から作り直す」ことをやっています。
OisixのECサイトは、創業当初から今まで大きな刷新はせずに、ソースコードを継ぎ足し継ぎ足し修正してきたので、かなり老朽化したものになっています。
(たとえ話ですが、1000シートあるExcelファイルが相互に参照しあってるようなものだと思ってください)
今のソースやアーキテクチャを維持したまま、サイトを改善していく方法もあります。ただ、特にパフォーマンスについては「沈みゆくタイタニックから手で水を捨てるような行為」になりかねないので、根本からの見直しを図っています。
これだと漠然としているので、基盤刷新で大きな成功した1例として日本経済新聞社さんを紹介させていただきます。
日本経済新聞社さんの日経電子版は、システムを1から作り直し、パフォーマンスやUI・UXの改善を日々行うことで、サイトのパフォーマンスは約2倍高速化し、コンバージョンは50%も増加したそうです。
https://speakerdeck.com/sisidovski/nikkei-pwa-html5conf2018
Oisixでも基盤刷新を通じてCXを改善して、お客様が快適に買い物ができるサイトを作っていきたいです。
合宿(1 ~ 2日目)
1 ~ 2日目は事前に用意した12のテーマに沿って、OisixのECサイトの運用方法の分析と最近の開発手法を元にあるべき方向を議論しました。
一番白熱した議論になったのは、ビジネスロジックをどこにどのくらい持たせるかというものです。
結論としては、デザインが頻繁に変更される + マルチデバイス対応を考えて、BFFにロジックを集約させる方向となりました。
合宿(3 ~ 9日目)
3 ~ 9日目は前半で議論した内容を元に、プロトタイピングを作成しています。
キーワードとしては以下の通りで、既存のoisixページを書き換えています。
- アプリケーション
- vuejs
- nuxt
- vuex
- atomic design
- mpa
- CI/CD
- circleci
- jest
- スナップショットテスト
- その他
- eslint + prettier
- Treasure Data
こちらが一日目終了時点のスクリーンショットです。
見た目は今のサイトと変わりませんが、実装はvuejsに書き換わっています。
最後に
まだ、基盤刷新は始まったばかりで、こんなに大規模な刷新に1から関われる機会はそう多くありません。
興味を持った方は、是非採用ページから応募お願いします！
