🦁

Souzoh Tech Talk #03: Frontend

2021/09/14に公開

概要

2021/09/01に開催された下記勉強会のメモです
https://mercari.connpass.com/event/221978/

https://www.youtube.com/watch?v=YNLvIkqRC-g

https://engineering.mercari.com/blog/entry/20210823-a57631d32e/

パネルディスカッション

メルカリShopsの画面構成

  • メルカリトップからwebアプリケーションで埋め込み
    • タブの中がメルカリShopsのWebView
    • おすすめの商品をタップで商品画面を出す個別のWebView
      • 検索からのルートもある
  • Androidも同じ構成

こちらの記事も参照
https://engineering.mercari.com/blog/entry/20210814-6694cc7502/

WebViewについて

  • Chakra UI
    • デフォルトで個性が強くない
      • Tailwind UIとかもあるけど
      • Ant, Material UIは個性が強い
    • cssをあまり意識しない
    • 使いやすくてすんなり実装できた

https://chakra-ui.com
https://tailwindui.com
https://ant.design
https://material-ui.com

  • Apollo
    • ApolloかRelayか
    • メルカリも使ってた
    • Reactと相性がいい
    • 開発が単純なフローになる

https://www.apollographql.com
https://relay.dev/

  • Next.js
    • Next.js か Gatsby
    • SSRが必須だった

https://nextjs.org
https://www.gatsbyjs.com

  • なぜflutter使わなかったか
    • サイクルを早く回すためWebViewにした
      • 最近は週1回の頻度でリリース(以前は2週に1回)
  • ディレクトリ構成
    • フューチャーズパターン
      • reduxの公式に書いてあるやつ

https://redux.js.org/style-guide/style-guide#structure-files-as-feature-folders-with-single-file-logic

  • Bazel
    • yarnのワークスケース対応を諦めた
    • Bezelは別の(新しい)方法で対応しようとしている?
  • Test
    • テスティングライブラリ
    • サイプレスでE2E

https://testing-library.com
https://www.cypress.io

  • next/imageの使い所、工夫
    • 使っている
    • 自分のサーバーでオプティマイズしたくなかった
    • やりたいことができなかった
      • pictureタグでなくdivタグで展開されてしまうのでFastryでWebPかどうか見てキャッシュとか
  • Reacticve variableのデバッグやテスト
    • テストのしようがないのであんまりしてない
  • フロントエンジニアとデザイナーのコミュニケーション
    • デザインはFigma
    • 共有して使ってもらう

https://www.figma.com

  • Next.jsでgetServerSidePropsしているとCSRでも遅くなる問題とか何か対処してる?

    • CDNに乗ってるので遅くなるとかはあんまりないかも?
    • CSRの方が遅くなるはず
  • SFSafariViewでなくWKWebViewなのか?

    • タブのなかに埋め込むのでWKWebView
    • クッキーで認証用のキーを渡したりがSFSafariViewだとできない
  • AndroidはオーソドックスなWebViewを使っている

    • AndroidのWebViewは機能足りない
    • ファイルアクセス厳しい
    • セキュリティ硬い
  • キャッシュ戦略について

    • max-age
      • 長期的に維持する仕組み
    • stale-while-revalidate
    • Service Worker

https://slides.hiroppy.me/cache-strategy-on-mercari-shops/#slide-1

  • Storybook使ってる?
    • 使ってはいる
    • メンテしなくなる
    • もっといい方法ないか?

Discussion