TechTrain しくじり先生 - Nuxt.js, Vue.js -

始めたばかり、リリースしたばかりのサービスでも、技術負債が発生しないわけはないので、しくじり先生としてこうはするな！という戒めの資料です。
改めて考えるフロントエンドライブラリAngular, Vue, React, jQuery etc... 〜何を利用してる？共有LT会〜
の登壇資料。

Transcript

1. TechTrain しくじり先生 - Nuxt.js, Vue.jsにおけるしくじり -
2. 自己紹介 新卒: EC系 2社目: TechBowl Now! 株式会社TechBowl 好きな Color Scheme は One Dark Twitter: @gurusu_program
3. TechTrain とは。
4. 対象 • スタートアップに所属している • これからVue.jsのプロジェクトにアサインされる • 新しい環境だから大丈夫っしょ！と思ってる
5. 油断するとこうなるよ・・・？
6. TechTrain 2019.4 Refactor Release! 2019.6 TypeScript, SSR 2019.10 Start! Start!
7. TechTrain 2019.4 Refactor Release! 2019.6 TypeScript, SSR 2019.10 Start! Start! ここのリファクタが必要になった。
8. ワイルドだろうぉ〜。
9. まずは起こったしくじりから。 • 意味のないページをまたがるグローバルなストアが混沌としている • 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い • SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない • ページ遷移時の UI チラツキが頻発
10. リリースして2ヶ月のプロダクト・・・
11. まずは起こったしくじりから。 • 意味のないページをまたがるグローバルなストアが混沌としている • 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い • SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない • ページ遷移時の UI チラツキが頻発
12. グローバルなストアが混沌としている こういう処理がたくさんある • ログイン • ログアウト • Firebase以外の処理も etc...
13. グローバルなストアが混沌としている こういう処理がたくさんある • ログイン • ログアウト • Firebase以外の処理も etc... ちなみにこれ pages です。
14. まずは起こったしくじりから。 • 意味のないページをまたがるグローバルなストアが混沌としている • 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い • SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない • ページ遷移時の UI チラツキが頻発
15. まずは起こったしくじりから。 • 意味のないページをまたがるグローバルなストアが混沌としている • 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い • SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない • ページ遷移時の UI チラツキが頻発
16. 関係ないページ用のストアの冗長なロードが起きパ フォーマンスが悪い 原因 • 行数の多いdata()の定義(数百行。。。) • APIとの通信がN+1となっているメソッド • templateにたくさん書かれている式
17. まずは起こったしくじりから。 • 意味のないページをまたがるグローバルなストアが混沌としている • 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い • SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない • ページ遷移時の UI チラツキが頻発
18. SEO が重要にも関わらずサーバーサイドレンダリングを 導入できていない • SPAで作成していた ◦ metaタグなし ◦ リッチカードの対応などももちろんしてない
19. まずは起こったしくじりから。 • 意味のないページをまたがるグローバルなストアが混沌としている • 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い • SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない • ページ遷移時の UI チラツキが頻発
20. まずは起こったしくじりから。 • 意味のないページをまたがるグローバルなストアが混沌としている • 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い • SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない • ページ遷移時の UI チラツキが頻発
21. 対策一覧だけ共有 • ページをまたがるグローバルなストアが混沌としている ◦ 状態管理をNuxtとTypeScriptを導入し、Actionから必ず状態を触る • 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い ◦ 余計なロード部分を削りまくる。 • SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない ◦ 導入。一部書き換え (clientタグなど)が必要 • ページ遷移時の UI チラツキが頻発 ◦ v-cloakやloadingIndicatorの導入など • ~永遠にログインできない致命的なバグの発生 ◦ そもそもロジックのミスなので修正
22. TechTrain - U30 で楽しく開発したい方 -