Open 2018.12.03
Vue Fes Japan 2018
note のフロントエンドを Nuxt.js で再構築した話
■ 動画紹介
弊社サービス noteは、Ruby on Rails と Angular.js 1系で構築された CSR のみで動作している SPA ですが、特に低スペックなスマートフォンや PC での初期表示が遅いことが大きな課題点の 1つでした。
note が構築された 5年前に比べフロントエンドの技術は進化しており、現状の技術スタックをベースとした解決フローよりも評価を得たフロントエンドの技術で再構築することがベストと判断し、note 開発チームは現行の前段に BFF を構え、BFF を Nuxt.js（Vue.js）で構築することを決めました。
現在は一部のページを Nuxt.js ベースのシステムとして一般向けに公開（https://bit.ly/2LP8wP0）しており、以降優先度の高いページから順々に段階的リリースをしていきます。
セッションでは、
・なぜ Nuxt.js（Vue.js）を採用したのか
・既存システムとの共存と移行プロセスについて
・Atomic Design を採用したコンポーネント設計へのシフト
・デザイナーチームとの協業
・今後の課題
を中心にお話したいと思っています。
note が構築された 5年前に比べフロントエンドの技術は進化しており、現状の技術スタックをベースとした解決フローよりも評価を得たフロントエンドの技術で再構築することがベストと判断し、note 開発チームは現行の前段に BFF を構え、BFF を Nuxt.js（Vue.js）で構築することを決めました。
現在は一部のページを Nuxt.js ベースのシステムとして一般向けに公開（https://bit.ly/2LP8wP0）しており、以降優先度の高いページから順々に段階的リリースをしていきます。
セッションでは、
・なぜ Nuxt.js（Vue.js）を採用したのか
・既存システムとの共存と移行プロセスについて
・Atomic Design を採用したコンポーネント設計へのシフト
・デザイナーチームとの協業
・今後の課題
を中心にお話したいと思っています。
■ コンテンツ一覧
- Vue 3.0 Updates (50:12) >>
- Vue Designer: デザインと実装の統合 (36:52) >>
- A deep dive in SFC compilation (19:13) >>
- Vue CLI 3 and its Graphical User Interface (34:26) >>
- Vue.js と Web Components のこれから (30:10) >>
- Unit testing a Vuex store (26:12) >>
- Nuxt.js 2.0 (33:23) >>
- note のフロントエンドを Nuxt.js で再構築した話 (32:30) >>
- 1年間単体テストを書き続けた現場から送る Vue Component のテスト (34:42) >>
関連動画
