Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Nuxtjs my friend

1,720 views

Published on

nuxt meetup #2 presentation slide

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Nuxtjs my friend

  1. 1. NUXTJS My Friend By Ryosuke Suzuki
  2. 2. Ryosuke Suzuki • 明治大学 総合数理学部 現象数理学科 4年 • Plaid, incでインターン1年目 • 大学では Deep Learning • 日常では Web Developer • @GentleClarinet @RyosukeCla
  3. 3. 今日の話 • Showcases • Nuxtで環境構築をしている話
  4. 4. Showcases
  5. 5. INFOGRAPHIC Static Gen 開発期間は3週間 Developer 2 Designer 1
  6. 6. HELLO! KARTE Static Gen 開発期間は2週間 Developer 1 Designer 1
  7. 7. なぜ、NUXTか • Static gen できる • Webpack 書く必要無し • 一瞬で開発環境が整うので、Nuxt を選んだ • しかも、Service Worker まで生成してくれる • 神 • Nuxtのおかげで数週間で開発できた Thanks Nuxt!
  8. 8. つまずいたところ • CSS Preprocessor のコンパイル時にエラーが起きた時
 => PostCSSの設定が怪しい • 数百枚の大量の画像の読み込みが上手く行かない時
 => Css sprite で複数の画像を一つに • Cloudfront にアップロードする時
 => Invalidation 周りで気をつけて
  9. 9. サービスを開発するために NUXTで環境構築をしている話
  10. 10. しっかりと開発したい • Netflix, Twitter, Youtube, Facebook, Medium, Dev.to, etc. • はどれも universal web application だ • サービスを開発するなら、ssr したい
  11. 11. なぜ、SSRか
  12. 12. SSRのメリット • Better User Experience • SEOがうんたら
  13. 13. ggrと出てくる、SSR不要説 • OGPしっかししてれば、SSRする必要ないのでは • コンピュータリソースも使うし • 初期表示が速くなるとはいうけど、SSRしなくても今のブ ラウザとデバイスなら直ぐレンダリングできるじゃん • 環境構築がめんどそうだし、SSRを意識してコーディング するのは大変そう
  14. 14. 確かに!
  15. 15. でも、SSRしたい
  16. 16. なぜ、SSRか • グローバル水準 • エンジニアの知的好奇心を満たす • どやりたい • 常に先端にいたい
  17. 17. – John Doe “ SSR は必要か不要かではない。やるかやらないかだ。 ”
  18. 18. いいから、NUXTやろうよ
  19. 19. どういう構成にしたか • Typescript • Nuxt • Express Proxy SSR API
  20. 20. Dir Structure • client -> Nuxt Server • server -> API Server • universal -> 共通で使うもの • Monorepoっぽく
  21. 21. なぜ、Typescriptか • jsの自由度を残しつつ、硬く書ける • 中/大規模アプリケーションを開発するのに向いてる • 補完が強い • Decoratorが強い
  22. 22. Decorator
  23. 23. Decorator
  24. 24. つまづいたところ
  25. 25. ts-loader • Nuxt 1.4.0 は webpack 3 を使用しているので、 • Ts-loader は 3.5.0 でないと動かない
  26. 26. d.ts • コンパイラに怒られる • this.$routerが存在しない • this.$storeが存在しない • process.clientが(ry
  27. 27. Tsconfig • 複数のtsconfigがある場合、vscodeの補完のため root に もtsconfigを置く必要がある • tsconfig の paths (alias) はコンパイルされたコードに影響 を及ぼさない
 => webpack にも alias を追加する必要有り
  28. 28. Test • jest, vue-jest, ts-jest 
 をインストールすれば、 jest を使えるようになる • alias も個別に設定する必要 有り
  29. 29. 終わりに
  30. 30. • Typescriptの環境構築はめんどくさい! • Nuxtは公式docsを読めば詰まることは少ない!
 しかも、直ぐにセッティングできるのは最高!
  31. 31. 👍

×