「Frontrend Vol.11 - 2017年度フロントエンド大反省会」に参加してきました

勉強会メモ

新R25本創刊までの1年

CSS管理

  • 変数を使う
  • css var

AtomicDesign

  • 粒度の定義難しい
  • ルールをしっかり決めた
    • 必ずatomsから作る
    • atomsが含まれていたらmolecules
    • moleculesが含まれていたらorganisms
    • 使い回すことがなくてもコンポーネント化する
      • 表示の分岐があったりすると分けた方が扱いやすい
      • containerが汚れるのを防ぐ

SSR + SPA

  • SSRでhtmlサイズが大きすぎてしまう
    • SSRでどこまで表示するか
    • SEOやSNSシェアで影響でないように
  • 画面遷移時のスクロール位置
    • window.scrollTopとかする？
    • ブラウザの「進む」「戻る」
    • history.stateにページの情報を入れておく

レスポンシブデザイン

  • window.matchMedia

R25の今後

  • AMP使おうとしている

Nuxt.jsでB2Cサービスを作った話

FW選定プロセス

  • サービスの要件
  • ビジネスの要求
  • 開発側の要求

Vue/Nuxt

  • NuxtはVue公式で推している
  • 日本語ドキュメント
  • SSRも対応している
  • バックボーンが企業じゃない

Vue + Nuxtで良かったこと

  • ディレクトリ構成がそのままURLになる
  • Exporess上でNuxtをミドルウェアとして扱える
  • パフォーマンスが良い
    • FWが要因なのか？？？

Vue + Nuxtで困ったこと

  • VueとNuxtのライフサイクルを意識しないといけない所
  • 新陳代謝が激しい
    • VUPでワーニング
    • こまめにアップデートしないと大変

まとめ

  • SSR + SPAを低コストで実現できた
  • コスト/パフォーマンスどちらも満足

歴史ある巨大システム アメブロに配属された新卒トーク

AbemaTV #ホンネテレビ の本音

AbemaTVの構成

  • GCP上に構築
  • BFF
    • Nginx -> Node
  • SPA

Webサーバを死なせない

  • ダウン時に問題のあった箇所の見直し
  • CDN化
    • html含めた静的ファイルは全てGoogleCloudCDN経由に
    • UserAgentによる配信物の振り分けができない
    • Fastly移行検討中

API/配信サーバを死なせない

  • CDN化
  • リクエスト数削減
    • 視聴までに必要なAPI刷新
    • マイクロサービスの分け方を見直した
  • 解像度のコントロール

エラー発生時の適切な対応

  • エラーハンドリングの見直し
    • エラー時にエラー用のレスポンスを返す
  • メンテナンス画面の表示
    • エラー時に何も表示されないが起きないように

Unit testを書かなくて反省した話

2017年度の Vue + TypeScript

WebComponents