「Mercari x Merpay Frontend Tech Talk vol.4」に参加してきました

  • Mercari x Merpay Frontend Tech Talk vol.4に参加してきました。

mercari.connpass.com

タイトル 発表者
Pros and Cons of SSR and JAMStack @_sskyu
NoCode で CMS と連携するデザインツールを作っている話 @miyaoka
TypeScriptで型安全に入門したい @atsuco_02
Web Assembly と画像・動画 @Leonardo_engr

Pros and Cons of SSR and JAMStack

  • @_sskyuさん

SSRパフォーマンス

  • キャンペーンページのSSRのパフォーマンスがでない
    • NuxtでSSRしてる
  • Podをスケールして負荷に耐えていた(20Pod)
    • 単純なLPを配信したいだけなのに...
  • 負荷試験してみた
    • コンテンツの量でrpsに差が出た
    • SSRしない範囲を増やすと多少改善できた

nuxt generate(JAMStack)

  • nuxt generate
    • NuxtでhtmlをSSR時ではなくビルド時に生成する
  • 課題
    • nuxt generate時にuseragentがとれない
      • ios/android/web/appのwebviewで画面が違う
      • navigator.userAgentSSR時はとれない
      • v-showisAndroidとか使えばSSR時はotherになるけどクライアント側で正しい値取れて画面出せる

JAMStackに移行

  • キャッシュレスキャンペーンでJAMStackに移行
    • 2019/10/1-2020/6/30に出してるキャンペーン
  • 移行手順
    • JAMStack環境作る
      • 旧版と並行稼動
      • 社内のみからアクセス
    • 本番にデプロイ
      • テスト
    • 本番有効化
      • 切り替え
  • staticなファイルなので全てFastlyで配信
    • 以前はk8s上のNodeから配信
  • URL
    • 旧版と同じオリジンにおいた
    • 新版のURLにネームスペース付けた
      • そのままだとassets読み取れないけど相対パスで指定するようにして解決

Pros and Cons

  • SSR
    • サーバを運用してる
    • オンコール体制
    • スケールアウトでコスト増
  • JAMStack
    • 静的なassetを配信するだけなのでオンコール不要
      • ぺらいちなサイトに向いてる
    • 管理画面のようなサイトは不向き
  • パフォーマンスの比較記事

developers.google.com

NoCode で CMS と連携するデザインツールを作っている話

  • @miyaokaさん

Studio

  • GUIでWebページが作れるサービス
  • やってるユーザの操作に応じてstate更新して画面に反映してるだけ
    • 操作してる人からするとGUIだけで画面が作れちゃう
  • 課題
    • 静的なサイトはこれでできる
    • 動的なデータの概念がないので動的なサイトが作れない

動的ページを作る

CMSと連携

  • zero configで使えるようにしたい
    • 独自で作った
  • CMSで作ったコンテンツをデザインに注入できるように

TypeScriptで型安全に入門したい

  • @atsuco_02さん

型安全に入門したい

  • 型安全の良さを理解したい

環境構築めんどくさそう

  • CodeSandboxで環境構築いらず

TypeScriptって何者?

  • TSはJSにコンパイルされるスーパーセット
  • コンパイル前に型チェックが行われる
  • 値に対して型が決まると実行できる操作が明確になる=型安全
    • 型があると操作が限定される=>意図せぬエラーが防げる

JSとTSの方の違い

  • JSにも型ってあるよね
  • JS
    • 実行時に型を判別
    • 自動で型変換される
  • TS
    • 実行前に型を判別

TSの型の良さ

  • 型を明示的なので可能な操作が明確
  • 暗黙的な変換がされない
  • コンパイル時にある程度エラーがわかる

Web Assemblyと画像・動画

  • @Leonardo_engrさん

JavaScriptだけで画像加工

github.com

  • PWAのアプリが増えてきている
    • 画像加工のような処理もクライアント側でやりたい
  • ImageMagickにできることならだいたいできる
  • 画像を比較してdiff出せたりする

JavaScriptだけで動画をエンコード

  • ffmpeg.js
    • あまりメンテされてない

github.com

  • スマホの処理性能上がってきてる
    • リアルタイムで画像にエフェクトとかアプリだとでてきてる
  • WebWorkerと組み合わせて使えるように用意してくれてる