Vue + Nuxt + Serverless の開発で得た知見 (主につらみ) / JSer.info 400th Memorial Event

5d715b858124e0dd59af1a92e4397acd?s=47 Yuki Terashima
September 22, 2018

Vue + Nuxt + Serverless の開発で得た知見 (主につらみ) / JSer.info 400th Memorial Event

スライド内のURL

・About ALIS:https://alismedia.jp/ja/
・【ALISのシステム】サーバサイドアーキテクチャ:その1 〜ALIS サーバサイド構成〜:https://alis.to/AB2/articles/KBXeJ1VgwzNB
・Atomic Designの考え方と利点・欠点
:https://blog.kubosho.com/entry/using-atomic-design/
・ALISのGitHub:https://github.com/AlisProject

5d715b858124e0dd59af1a92e4397acd?s=128

Yuki Terashima

September 22, 2018
Tweet

Transcript

  1. Vue+Nuxt+Serverlessの 開発で得た知見(主につらみ) +4FSJOGPճه೦Πϕϯτ !Z@UFNQ

  2. About me • Yuki Terashima • Twitter/@y_temp4 • ALIS Co.,

    Ltd. • 4月から東京に来た新卒
  3. About ALIS https://alismedia.jp/ja/

  4. 今回話すこと

  5. 実際にALISのフロントエンドを
 開発する中で得た知見 主につらみ

  6. 主なトピック • Vue / Nuxt / Serverless(AWS Lambda) • Atomic

    Design • CSS Grid Layout • Vuex • Cognito
  7. Vue / Nuxt / Serverless

  8. ALISの初期開発スケジュール(概要) 2018/01中旬くらい 2018/04/23 〜設計 クローズドβ版リリース 開発〜

  9. とにかく時間がなかった • 自分がジョインするタイミングでは不安しかなった • 本当に間に合うのか? • 開発速度が求められた • とにかく時間がない

  10. ALISの初期開発スケジュール(概要) 2018/01中旬くらい 2018/04/23 〜設計 クローズドβ版リリース 開発〜 このへんがヤバかった

  11. (そんな中で)Vue / Nuxtの開発

  12. 開発速度が保てた •Nuxtがいろんなことをやってくれて便利!!! などなど…

  13. Nuxtを選定して(特に)よかったこと •規約があり、設計で迷いにくい •オレオレアーキテクチャの排除 •便利機能が本当に便利 •かんたんSSR •pages/以下でルーティング

  14. Vueの生産性が高かった • 初めてでもすぐ書き始められる • 公式ドキュメントが充実しており、
 迷いにくい

  15. Serverlessの話

  16. Nuxt on Lambda • ALISのNuxtはLambda上に乗っている • mya-ake/nuxt-on-lambda が非常に参考になった

  17. • 他に必要な設定は severless.yml くらい • デプロイは
 yarn build して sls

    deploy するだけ
  18. 【ALISのシステム】サーバサイドアーキテクチャ:その1 〜ALIS サーバサイド構成〜 - https://alis.to/AB2/articles/KBXeJ1VgwzNB

  19. 選定した技術の話

  20. ALISのフロントエンドのトピック • Atomic Design • CSS Grid Layout • Vuex

    • Cognito • これらの功罪について見ていきます
  21. Atomic Design

  22. None
  23. None
  24. None
  25. ArticleCard.vue ArticleCardImage.vue ArticleCardContent.vue ArticleCardContentTitle.vue ArticleCardContentOverView.vue ArticleCardContentData.vue ArticleCardContentTokenAmount.vue ※一部省略

  26. よかったこと • コンポーネントの責務を意識して開発できる • 再利用性のあるコンポーネントかどうか、など • BEMとか使う必要がない • セレクタの詳細度が平坦に近づくため •

    参考:Atomic Designの考え方と利点・欠点
 https://blog.kubosho.com/entry/using-atomic-design/
  27. 現実 • スピードが求められる現場では
 「なんちゃってAtomic Design」になる • 大きすぎるAtom • 切り分けられていないコンポーネント •

    正直、最初はディレクトリ構成だけ切ってあとで
 キレイにする、で良い気がしている(時間がない場合)
  28. CSS Grid Layout

  29. None
  30. None
  31. None
  32. app-header article-card-list

  33. • 複雑なレイアウトにも比較的簡単に対応できる • grid-areaによる名前付けでレイアウトがイメージしやすい • 想定よりも、学習コストが低い よかったこと

  34. • 無駄にGrid Layoutで実装してしまった部分があった • コンポーネント粒度によっては、flexboxのほうが効果的 • 使い分けが大切 • 可変の値を駆使したほうが良い部分があった •

    auto、frなど 学び
  35. Vuex

  36. None
  37. • データの管理がしやすい • バケツリレー不要 • そこまで厳格に書く必要がない • 必要に応じてVueの双方向バインディングと組み合わせて
 使える 良かったこと

  38. •型 •複雑なAction •巨大なModule つらみ

  39. • 現状、ない • 実装当初に検討したが、いろいろとつらそうだったのでやめた • 人数が増えてきたときに心配、できれば導入したいが
 ベストプラクティスがない • 詳しい方、教えてください 型

  40. 複雑なAction

  41. 複雑なAction •Actionで非同期処理しつつデータの保存をすると
 どうしても肥大化しがち •この領域にはベストプラクティス的な規約がない
 ため、煩雑になりがち

  42. 巨大なModule •700行 over •さすがに分割したい

  43. Cognito

  44. None
  45. つらみ • 提供されているnpm packageがやや使いにくい • Promiseを返してほしい…! • 融通が効かない • 最初に気合いを入れて設計する必要がある

  46. まとめ

  47. Nuxtについて • (何度も言われているが)
 Nuxtはふつうに使ったほうが良い • SSRしなくてもメリットは大きい

  48. Serverlessについて • 運用負荷が減るのは大きい • ただし設計の難易度が高い • 情報も少ないので、気合いが必要

  49. Atomic Design / CSS Grid Layoutについて • Atomic Designはともかく、CSS Grid

    Layoutは採用している ところをあまり聞かない • ふつうに便利なので、試してみてもいいと思う • 対応ブラウザにもよるが… • 両者の相性は良いと感じた
  50. Vuexについて • 型との相性の悪さが絶望的 • 頑張ればいけるっぽい話もあるが・・・ • ここを諦めるかどうかで結構意見が分かれそう • 今のプロジェクトは現状大丈夫だけど、今後がかなり心配

  51. Cognitoについて • 使うなら、覚悟して使ったほうが良さそう?

  52. さいごに

  53. ALISのソースコードはオープンソースなので、 ぜひ見てみてください! github.com/AlisProject