Tweet
Tweet

Slide 1

Slide 1 text

TechTrain しくじり先生 - Nuxt.js, Vue.jsにおけるしくじり -

Slide 2

Slide 2 text

自己紹介 新卒: EC系 2社目: TechBowl Now! 株式会社TechBowl 好きな Color Scheme は One Dark Twitter: @gurusu_program

Slide 3

Slide 3 text

TechTrain とは。

Slide 4

Slide 4 text

対象 ● スタートアップに所属している ● これからVue.jsのプロジェクトにアサインされる ● 新しい環境だから大丈夫っしょ！と思ってる

Slide 5

Slide 5 text

油断するとこうなるよ・・・？

Slide 6

Slide 6 text

TechTrain 2019.4 Refactor Release! 2019.6 TypeScript, SSR 2019.10 Start! Start!

Slide 7

Slide 7 text

TechTrain 2019.4 Refactor Release! 2019.6 TypeScript, SSR 2019.10 Start! Start! ここのリファクタが必要になった。

Slide 8

Slide 8 text

ワイルドだろうぉ〜。

Slide 9

Slide 9 text

まずは起こったしくじりから。 ● 意味のないページをまたがるグローバルなストアが混沌としている ● 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い ● SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない ● ページ遷移時の UI チラツキが頻発

Slide 10

Slide 10 text

リリースして2ヶ月のプロダクト・・・

Slide 11

Slide 11 text

まずは起こったしくじりから。 ● 意味のないページをまたがるグローバルなストアが混沌としている ● 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い ● SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない ● ページ遷移時の UI チラツキが頻発

Slide 12

Slide 12 text

グローバルなストアが混沌としている こういう処理がたくさんある ● ログイン ● ログアウト ● Firebase以外の処理も etc...

Slide 13

Slide 13 text

グローバルなストアが混沌としている こういう処理がたくさんある ● ログイン ● ログアウト ● Firebase以外の処理も etc... ちなみにこれ pages です。

Slide 14

Slide 14 text

まずは起こったしくじりから。 ● 意味のないページをまたがるグローバルなストアが混沌としている ● 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い ● SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない ● ページ遷移時の UI チラツキが頻発

Slide 15

Slide 15 text

まずは起こったしくじりから。 ● 意味のないページをまたがるグローバルなストアが混沌としている ● 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い ● SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない ● ページ遷移時の UI チラツキが頻発

Slide 16

Slide 16 text

関係ないページ用のストアの冗長なロードが起きパ フォーマンスが悪い 原因 ● 行数の多いdata()の定義(数百行。。。) ● APIとの通信がN+1となっているメソッド ● templateにたくさん書かれている式

Slide 17

Slide 17 text

まずは起こったしくじりから。 ● 意味のないページをまたがるグローバルなストアが混沌としている ● 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い ● SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない ● ページ遷移時の UI チラツキが頻発

Slide 18

Slide 18 text

SEO が重要にも関わらずサーバーサイドレンダリングを 導入できていない ● SPAで作成していた ○ metaタグなし ○ リッチカードの対応などももちろんしてない

Slide 19

Slide 19 text

まずは起こったしくじりから。 ● 意味のないページをまたがるグローバルなストアが混沌としている ● 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い ● SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない ● ページ遷移時の UI チラツキが頻発

Slide 20

Slide 20 text

まずは起こったしくじりから。 ● 意味のないページをまたがるグローバルなストアが混沌としている ● 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い ● SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない ● ページ遷移時の UI チラツキが頻発

Slide 21

Slide 21 text

対策一覧だけ共有 ● ページをまたがるグローバルなストアが混沌としている ○ 状態管理をNuxtとTypeScriptを導入し、Actionから必ず状態を触る ● 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い ○ 余計なロード部分を削りまくる。 ● SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない ○ 導入。一部書き換え (clientタグなど)が必要 ● ページ遷移時の UI チラツキが頻発 ○ v-cloakやloadingIndicatorの導入など ● ~永遠にログインできない致命的なバグの発生 ○ そもそもロジックのミスなので修正

Slide 22

Slide 22 text

TechTrain - U30 で楽しく開発したい方 -