Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.js移行プロジェクトの話
Search
tic40
October 24, 2018
Technology
4
2.8k
Nuxt.js移行プロジェクトの話
note engineer meetup#1
2018/10/23
tic40
October 24, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
150
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
170
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
230
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
250
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
320
React19.2のuseEffectEventを追う
maguroalternative
2
470
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
230
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
It's Worth the Effort
3n
187
28k
Designing Experiences People Love
moore
142
24k
Six Lessons from altMBA
skipperchong
29
4k
For a Future-Friendly Web
brad_frost
180
10k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
Balancing Empowerment & Direction
lara
5
690
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
4 Signs Your Business is Dying
shpigford
185
22k
Thoughts on Productivity
jonyablonski
70
4.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Transcript
Nuxt.js移行プロジェクトの話 Taishi Inoue note engineer meetup #1
Taishi Inoue / @tic40 2018/06〜 piece of cake, inc note.muの
フロントエンドリプレイスを担当 Who am I
In progress
note.mu/konpyu/n/n9b7bf4343514 Background
Agenda プロジェクト開始から今日までの取り組み/TIPSを紹介 ・フロントエンドのキャッチアップ ・コードの秩序を保つ ・コンポーネント設計方針を決める ・SSR起因のエラーを解消する ・コンポーネントを管理する ・パフォーマンス向上への取り組み
> フロントエンドのキャッチアップ ・コードの秩序を保つ ・コンポーネント設計方針を決める ・SSR起因のエラーを解消する ・コンポーネントを管理する ・パフォーマンス向上への取り組み
チーム体制 ・エンジニア3名(リモート2、オフィス1) ・UI周りの調整には都度デザイナーも加わる ・Vue.js、Nuxt.jsの社内知見は少ない。 フロントエンドキャッチアップの必要性
フロントエンドのキャッチアップ ・社内ハンズオンの開催 es2015復習-Vue.js入門-Nuxt.js入門ハンズオンを社内開催 ・社外交流 社外から知見のある人物を招いて情報交換、レビュー ・知見の共有 得られた知見は社内wikiへ集約
・フロントエンドのキャッチアップ > コードの秩序を保つ ・コンポーネント設計方針を決める ・SSR起因のエラーを解消する ・コンポーネントを管理する ・パフォーマンス向上への取り組み
コードの秩序を保つ 開始当初はVue.jsのスタイルガイドに沿っていないコードが散見 されていた。 ← v-forの要素に対して v-bind:key が指定されていない。 *ref: jp.vuejs.org/v2/style-guide/
コードの秩序を保つ ・ESLintに `vue/recommended` ルールを適用 ・CIで自動化、Vue.jsスタイルガイド違反のコードを撲滅 .eslintrc.js
・フロントエンドのキャッチアップ ・コードの秩序を保つ >コンポーネント設計方針を決める ・SSR起因のエラーを解消する ・コンポーネントを管理する ・パフォーマンス向上への取り組み
コンポーネント設計 状態管理にVuex コンポーネントデザインにAtomic Designを採用
コンポーネント設計の揺らぎ デザインパターンを取り入れたとはいえ、実装者によって設計に 差があった。 ・単一コンポーネントの再利用性と責務 ・atom vs molecule、molecule vs organism ・状態管理(vuex
state/コンポーネント内data/$emit)使い分け
設計の揺らぎをなくす 揺らぎがある部分は明確にガイドライン化 ・単一コンポーネントの再利用性と責務 再利用性のために責務を増やさない。責務が増える場合はコンポーネント を分割する ・atom vs molecule、molecule vs organism
atomは他のコンポーネントを含まない、stateless、vuexを参照しない... 等々
・フロントエンドのキャッチアップ ・コードの秩序を保つ ・コンポーネント設計方針を決める > SSR起因のエラーを解消する ・コンポーネントを管理する ・パフォーマンス向上への取り組み
SSR起因のエラー コードをそのまま移行するとSSR(server-side-rendering)起因のエラーが 多発してしまった ・window is not defined SSR時には、window関数をはじめクライアントサイドの リソースにはアクセスできない。 ・cookieの参照
これも上記と同じくSSR時に参照できないので嵌った。
エラーログの収集 sentry-moduleプラグイン github.com/nuxt-community/sentry-module slack連携してエラーが起きたら通知。クライアントサイドで予想外なことが 起こっていないかチェック
・フロントエンドのキャッチアップ ・コードの秩序を保つ ・コンポーネント設計方針を決める ・SSR起因のエラーを解消する > コンポーネントを管理する ・パフォーマンス向上への取り組み
コンポーネント把握できない問題 ← 再利用可能なコンポーネントが増 え、もはや把握ができなくなってしまっ た開発者
コンポーネントカタログの導入 Storybook: github.com/storybooks/storybook ・運用コストはかかるが、 コンポーネントが把握できなくなることによる弊害 > 運用コスト *Nuxt v2で Storybook
v3.xが動かなくなる問題があったが、現在はStorybook v4.0rc バージョンを使うことで回避
・フロントエンドのキャッチアップ ・コードの秩序を保つ ・コンポーネント設計方針を決める ・SSR起因のエラーを解消する ・コンポーネントを管理する > パフォーマンス向上への取り組み
パフォーマンス計測 gas-webpagetest: github.com/uknmr/gas-webpagetest webpagetestで定期的に自動計測 > data studioでログの可視化 *SpeedCurveも検討(将来的には導入したい)
bundleファイル分析 ・webpack-bundle-analyzerを活用 ・モジュール単位のファイルサイズを可視化。ファイルサイズの大きいも のから最適化
まだまだあります高速化施策 パフォーマンス向上は地道な取り組み ・画像サイズの最適化 ・リソースの遅延ロード ・リクエスト数を減らす ・PWA対応 ・APIパフォーマンスの向上 高速なnoteを目指して、 継続してチューニングしていきます
最後に
リリースノート公開中 note.mu/noteeng/m/me7637ba82821
; Vue Fes Japan@11/3 https://vuefes.jp/
ありがとうございました