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
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
23
6.1k
JOAI発表資料 @ 関東kaggler会
joai_committee
1
330
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
12
1.8k
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
270
Webアクセシビリティ入門
recruitengineers
PRO
1
260
株式会社ARAV 採用案内
maqui
0
350
モバイルアプリ研修
recruitengineers
PRO
3
260
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
190
Browser
recruitengineers
PRO
4
330
Claude Code x Androidアプリ 開発
kgmyshin
1
580
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
The Invisible Side of Design
smashingmag
301
51k
YesSQL, Process and Tooling at Scale
rocio
173
14k
KATA
mclloyd
32
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Building Adaptive Systems
keathley
43
2.7k
Rails Girls Zürich Keynote
gr2m
95
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
RailsConf 2023
tenderlove
30
1.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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/
ありがとうございました