noteのフロントエンドをNuxt.jsへ刷新します｜こんぴゅ｜note

webサービスのUXを向上させるために、表示速度は非常に大切です。 しかしながら、noteはリリース当初からフロントエンドの実行速度が遅い=表示が遅いという構造的な問題を抱えており、継続率や離脱率など重要指標に悪影響を及ぼすリスクが強くありました。 noteチームはnoteを本格的なメディアプラットフォームへ成長させるスピードを加速していきます。それを踏まえ、手遅れになる前に技術的な負債を解消し、最新のベストプラクティスに沿ったフレームワークに移行することで、高性能なサービスを提供する基盤を作っていくという決断をしました。 本ポストでは、移行プロジェクトの技術的背景や移行手順を説明します。また、途中成果のデモをUPしているのでご紹介します。 技術的な背景noteの現在のフロントエンドはAngular.js 1系で構築されたSPAです。Angular 1系はかなり複雑なUIでも簡単に構築でき

[gowithyou]

そもそもnoteってSPAにする必然性あるのかね？Angular1.xのSPAにしたせいでSEOにも失敗したのがオチなんじゃない？

[threetea0407]

そもそもなんでSPAにしてんのか解説して欲しい

[nana4gonta]

なぜNuxtを選んでAngular 2+を選ばなかったのかも記事化してほしい

[nismit]

Angular1からSSRのNuxt.jsへの移行。まずは小さく、ページ単位で移行していくとのこと。SPAにしている理由なども書いてくれると嬉しい。

[kksg]

もう5年も経ってるの

[jokknch]

メディアサイトで超重要なSEOが弱く、しかも5年も放置してたからビジネスでの機会損失はかなりでかい。完全に技術選択のミスだったがこの変更でかなり改善するだろうな。

[headless_pasta]

ここでの知見はマジでがっつり共有してくれると嬉しい。マジで。

[dala]

なんと、Angular1か。変な時期に作り始めちゃったんだなぁ。

[KoshianX]

ほう、 nuxt とな。vue はまあまあ使ってるけど nuxt 触ってないなあ。

[renowan]

angular1.x は闇

[for-my-internet-demo]

事故ったっぽいのでmemo

[bellking]

“ラリ設定をよしなにしてくれているため、開発に集中しやすいことです。フロントエンドガチ勢でなくても開発に参加しやすいことは嬉しいポイントです。”

[hisasann]

BFF！

[ryo_n574]

楽しそうだな

[kikuchi1201]

きたけさんや！！

[kaz_hiramatsu]

デモページだいぶ速いね

[hate1229]

いい流れ。スマホサイトは点数高いけどPCは低いのは画像圧縮はいれてないからなのか。 google pagespeed https://goo.gl/hHsHMy

[kimromi]

BFFっていうのを始めて知って調べて見たけど、この図はBFFじゃないっぽい。そしてサーバーサイドでしかAPIを叩かないように見えてしまうけど、本当はもっと複雑なアーキテクチャになってるんだろうなと予想。

[uunfo]

ブラウザのCPUってなんだよ／SPAが限界でSSRを使うと。やっと欲しかったものが手に入る感じ

[sm_0310]

確かに描画むっちゃはええ

[yaboot]

オーソドックスなSSRに戻しますーの方が面白くない?

[tuki0918]

Rails

[naggg]

ブコメにいろいろあるけど、中の人的にはプロトタイプ作ってみて触ってみての判断なんだろうなぁ。

[efcl]

AngularJS to Nuxt.js

[fa11enprince]

一瞬Angular2系からNuxtだと思ってえっ？てなったがAngularJSだった。

[yosuke_furukawa]

次のnoteではスクロール回帰がちゃんと実装されますように。

[keijak]

速度の重要性を説くならバックエンドもRailsから変えるべきという結論に行き着く気がする。

[yasu-log]

某イベントでnoteは高速であると評価 されていた(fladdictさんがいるパネルディスカッションで,司会の人から)。Angular1も一般の人からは遅いと思われてなかったかと。

[assaulter]

ほー

[kote2kote2]

で、表示速度がどれだけ改善されたの？

[takasian_pride]

“の”

[kenichi_odo]

いいね期待

[highgrenade]

コメント欄にレガシー勢とモダン勢がハッキリ分かれているなー。レガシー勢は、未だにバックエンドをヘビーにさせる思考のようだ。

[sigwyg]

Angular更新はしないんだな。