Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

562779f94b64f72e5a6d38b637516d24?s=128

Suguru Ohki

June 05, 2020
Tweet

More Decks by Suguru Ohki

Other Decks in Programming

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 で楽しく開発したい方 -