🦁
Souzoh Tech Talk #03: Frontend
概要
2021/09/01に開催された下記勉強会のメモです
パネルディスカッション
メルカリShopsの画面構成
- メルカリトップからwebアプリケーションで埋め込み
- タブの中がメルカリShopsのWebView
- おすすめの商品をタップで商品画面を出す個別のWebView
- 検索からのルートもある
- Androidも同じ構成
こちらの記事も参照
WebViewについて
- Chakra UI
- デフォルトで個性が強くない
- Tailwind UIとかもあるけど
- Ant, Material UIは個性が強い
- cssをあまり意識しない
- 使いやすくてすんなり実装できた
- デフォルトで個性が強くない
- Apollo
- ApolloかRelayか
- メルカリも使ってた
- Reactと相性がいい
- 開発が単純なフローになる
- Next.js
- Next.js か Gatsby
- SSRが必須だった
- なぜflutter使わなかったか
- サイクルを早く回すためWebViewにした
- 最近は週1回の頻度でリリース（以前は2週に1回）
- サイクルを早く回すためWebViewにした
- ディレクトリ構成
- フューチャーズパターン
- reduxの公式に書いてあるやつ
- フューチャーズパターン
- Bazel
- yarnのワークスケース対応を諦めた
- Bezelは別の（新しい）方法で対応しようとしている？
- Test
- テスティングライブラリ
- サイプレスでE2E
- next/imageの使い所、工夫
- 使っている
- 自分のサーバーでオプティマイズしたくなかった
- やりたいことができなかった
- pictureタグでなくdivタグで展開されてしまうのでFastryでWebPかどうか見てキャッシュとか
- Reacticve variableのデバッグやテスト
- テストのしようがないのであんまりしてない
- フロントエンジニアとデザイナーのコミュニケーション
- デザインはFigma
- 共有して使ってもらう
-
Next.jsでgetServerSidePropsしているとCSRでも遅くなる問題とか何か対処してる？
- CDNに乗ってるので遅くなるとかはあんまりないかも？
- CSRの方が遅くなるはず
-
SFSafariViewでなくWKWebViewなのか?
- タブのなかに埋め込むのでWKWebView
- クッキーで認証用のキーを渡したりがSFSafariViewだとできない
-
AndroidはオーソドックスなWebViewを使っている
- AndroidのWebViewは機能足りない
- ファイルアクセス厳しい
- セキュリティ硬い
-
キャッシュ戦略について
- max-age
- 長期的に維持する仕組み
- stale-while-revalidate
- Service Worker
- max-age
- Storybook使ってる？
- 使ってはいる
- メンテしなくなる
- もっといい方法ないか？
Discussion