レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ

技術部の外村（@hokaccha）です。今回はクックパッドのウェブサイトのフロントエンドを Next.js などを使って作り直している話を書きます。 この記事で紹介する新システムは、スマートフォン向けのレシピページで確認することができます。もし興味があるかたはレシピページをスマートフォンのユーザーエージェントで開いて DevTools などで確認してみてください。 Next.js と GraphQL で動いているのがわかると思います。 ご存じの方も多いかもしれませんが、クックパッドのウェブサイトはモノリシックな Rails で作られていて、10年以上 Rails で開発を続けてきました。10 年以上同じシステムで開発を重ねれば当然レガシーな部分が大量に生まれてきますが、特にフロントエンドはその影響が顕著でした。 どこから使われているかわからない CSS が大量にある、JS のコードは昔なが

[spark7]

技術者がハシャいでも経営がな...

[chinpokomon_master]

ちゃんとした理由に基づいた大人の技術選定。こないだのLINEボーイとはわけが違う。

[cyokodog]

“CoffeeScript*1 と jQuery で書かれており” これに Backbone/Marionetteが付くとつらい（今の自分）

[jay-es]

レガシーフロントエンドあるあるだなぁ “どこで読まれているかわからない CSS が大量にあって消すのが難しい、haml（Rails の View）に埋めこまれた JS が head で読まれる JS に依存していて defer できない”

[akahigeg]

10年以上生きてるだけでとりあえずすごい

[gfx]

"Rails が遅い、Next.js だと速い、というフレームワークの差ではありません。Rails でもスクラッチで書き直してチューニングすれば同程度のパフォーマンスはでます"

[h13i32maru]

この仕事を完遂させたのかっこよすぎ

[esuji5]

すごい／ブコメの技術選定理由に関心ニキおもしろい

[Keisuke69]

CofeeScript懐かし。BFFとしてのGraphQL採用。10年も経てばトレンドから何から変わってくるよな

[kazutox]

2020年12月

[gorilla213]

自分のアプリケーションのアーキテクチャはこれにしようかな〜

[d4-1977]

「Web Vitals の計測機能」そんなのがあったのか！良く書き換えたなあ、って月並みな感想になってしまった

[yokochie]

GraphQLの話聞きたい

[juve534]

リプレイスの手法を検討していたので参考になるな。"今後も適用範囲を広げていき、開発の生産性をあげることでユーザーに届ける価値を最大化していきます" これ

[iga_k]

知見〜

[ducktoon]

GraphQL なんかよーやるわ

[onesplat]

Before相当酷かったんだな。一時期クックパッドは技術力が高いみたいなイメージあったけど創業者ご乱心騒動あたりでだいぶ凋落したのかな

[kyuns]

マイグレーションの知見

[atashi9]

脂肪

[Kmusiclife]

コンテンツをまずなんとかしたほうが。。だいぶ手遅れに。。

[whisper-monkey]

Pantyってのはgetする、つまり「ギャルのパンティ送れ！」という文脈から来ているのだろうか？

[umai_bow]

FCPだからフロントエンドの読み込みが改善されたのがでかいんだろうけど、本当に今ってパフォーマンス面で重要なのはフロントエンドなんやなぁ。今みたけどガタつきも少なくてよくできてる

[posbin]

“BFF”

[cloverstudioceo]

React / Redux あたりで止まってるんだけど、この組み合わせ勉強すれば５年は持つかな？

[vvakame]

いい話ですね

[Quramy]

構成図みて、「Railsの手前にgraphql-express置くの大変そう」って思ったけど、GarageっていうのがほぼほぼGraphQLのtype定義になってるのか。GarageのDSLのSchema定義が二重メンテになりそうだけど、そこらへんどうしてるんだろ？

[programmablekinoko]

Next.jsなんかだとSSR時に読み込みのクリティカルパスなんかも考慮してくれるからレンダが早いと。フロントも素直にそういうものを使う時代になった

[tettekete37564]

技術構成的に参考になりそう

[Pasta-K]

へ〜、ちゃんと引き剥がして現代的になった結果パフォーマンスもちゃんとよく出来るように計測とかの仕組みも入ったの良い話だ

[Tomato-360]

他に関わるAPIがいろいろあるとBFFとGraphQLが生きそうだな

[sharaku3eyes]

素晴らしい

[morishin127]

僕もやりました！！！(アッピル)

[paulownia]

GraphQLのサーバ構築、簡単に書いてるけど結構大変な気がするんだがどうなんだろ