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

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のシステム】サーバサイドアーキテクチャ：その１ 〜ALIS サーバサイド構成〜 - https://alis.to/AB2/articles/KBXeJ1VgwzNB
19. 選定した技術の話
20. ALISのフロントエンドのトピック • Atomic Design • CSS Grid Layout • Vuex • Cognito • これらの功罪について見ていきます
21. Atomic Design
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
32. app-header article-card-list
33. • 複雑なレイアウトにも比較的簡単に対応できる • grid-areaによる名前付けでレイアウトがイメージしやすい • 想定よりも、学習コストが低い よかったこと
34. • 無駄にGrid Layoutで実装してしまった部分があった • コンポーネント粒度によっては、flexboxのほうが効果的 • 使い分けが大切 • 可変の値を駆使したほうが良い部分があった • auto、frなど 学び
35. Vuex
37. • データの管理がしやすい • バケツリレー不要 • そこまで厳格に書く必要がない • 必要に応じてVueの双方向バインディングと組み合わせて
 使える 良かったこと
38. •型 •複雑なAction •巨大なModule つらみ
39. • 現状、ない • 実装当初に検討したが、いろいろとつらそうだったのでやめた • 人数が増えてきたときに心配、できれば導入したいが
 ベストプラクティスがない • 詳しい方、教えてください 型
40. 複雑なAction
41. 複雑なAction •Actionで非同期処理しつつデータの保存をすると
 どうしても肥大化しがち •この領域にはベストプラクティス的な規約がない
 ため、煩雑になりがち
42. 巨大なModule •700行 over •さすがに分割したい
43. Cognito
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