CROOZ TECH BLOG

~読んだらわかるSHOPLISTの裏側~

CROOZ TECH BLOGとはクルーズ株式会社の開発チームが技術について共有するブログです
開発の中での発見や知識を広めてオモシロカッコイイ〇〇をツクリます。

SHOPLISTのクライアントサイドフレームワークの導入を検討している話

こんにちは。クルーズ株式会社CTOの鈴木です。

 

過去のテックブログにて「今後を見据えてFlutterの検証を始めた話」でも触れたとおり、インフラ構成を変える構想を今考えています。

あらためて要点でいうと、MVCアーキテクチャ、特にテンプレートエンジンの利用をやめるサーバはAPIの結果のみを返し、ブラウザの場合はフロントエンドフレームワークがHTMLを組み立てブラウザに返すというものです。

上記を実現するものとしてフロントエンドフレームワークの導入を検討しているというのが今回の話です。本ブログではその検証手順までの進捗をお話しします。

背景


背景としてはいくつかありますが、大きいものから順に記載すると

⓵表示速度やUI/UXの視点で見ると約半数のページに対して何かしらの改善できる項目があるのでそれを直していきたい。

②上記を実現するのであれば何かしらの手段でフロントエンド開発の生産性を高められる仕組みを導入したい。 です。

 

⓵についてはあまり今回のフロントエンドフレームワークの話というよりは、フロントエンドフレームワークを導入する際に書き直して問題を解消したいよねという話のほうがニュアンスとしては大きいです。

但しどうせ解決するのであれば、Client Side RenderingやServer Side Renderingのように生成済みHTMLに対し仮想 DOM で差分だけを更新できる仕組みのあるものを使った方が表示速度を早められるので書き直してユーザ体感を上げる&表示速度を早められる仕組みがあるものを採用したいという考え方です。

②についてはコンポーネントベースの組み合わせで作ることによる生産性を高めたいというのが実現したいことです。現状だと一部smarty plugin でタグを返していますが、基本的にはsmarty上でHTMLやjava scriptを画面ごと書いている状態なのでこれの脱却を目指しています。

検証にあたり


今回この話をおこなうにあたり、Flutter同様で社内に十分な知見がある人がいない(全くないというと語弊があります、当然エンジニアなので興味関心があり、前職で趣味などで触っていた人はいます。)状況だったため、メジャーどころのreact.js(next.js)、vue.js(nuxt.js)について当社のフロントエンドエンジニアに、開発効率、パフォーマンス、手軽さ、開発効率、学習コスト、堅牢さなど10項目についてスコアリングを行ってもらい、スコアの高かったreact.js(next.js)でFlutterの時と同じように特定の機能を実装してみて生産性、学習コストを評価するという形で進めることとしました。

現在も進めている状況ですので、終わり次第、進捗をアップしようと思います。

次回は、本検証プロジェクトの結果は10月ごろにおこなう予定です。