Mercari x Merpay Frontend Tech Talk vol.3 に行ってきたメモ
六本木のメルカリ社にて。
Creating Serverless CMS from Scratch by @sottar_
- 海外のカンファレンスで発表したやつの再演だそうな
- CMSをつくったはなし
- 期限つきキャンペーンページを作ることがおおい
今までの業務フロー
なぜ自作したか
Vue.jsでのCSS設計 by @tacamy
念願のScoped!ただし
- ShadowDOMではない
- data属性でなされてる
- 要素セレクタへのスタイル指定はダメ
- 遅い
- クラス名を使おう
- ルート要素は親スコープの影響を受けるので非推奨
- 親から子のレイアウトをいじれるメリットもある
- クラス名が被らなければよい
- deepも避けたい
- ネストによって優先度が変わるかもしれない
- Scopedでもない
BEMのガイドライン
コンポーネントの分類について思う
- AtomicDesignは複雑すぎる説
- あれはどれでしたっけ問題
- 細かすぎる
- 粒度によって分ける案
- Part / Module
- 役割別にする案
- Container / Presentation
- プロジェクトに応じて最適な粒度を見つけるべき
- 分類に時間がかかる = too much
どうやっていくか
The Challenge of Web re-architecture using GraphQL and Apollo by @lightnet328
The challenge of Web re-architecture using GraphQL and Apollo - Speaker Deck
- 新卒では働いてます
- メルカリWebのリアーキテクトをしてる
リアーキテクト
- 新しい技術スタックで作り直す
- 機能はそのまま
- ページごとに開放していってる
- いまはトップページだけ
GraphQL
Apollo Client
Apollo Server
開発フロー
ハマるところ
まとめ
- エコシステムが出来上がってきている
- Apolloだけでなく、他のツールも使って補っていく
- 型安全に開発スピードをあげられてよい
質問
- Q. クエリが増えてきたときに、数や深さの制限はしてる?
- A. 数はしてたと思う
Practical tips for making a global EC site by @yayoc
資料はみつけたら
ユニクロのEC
それを改善する
- やりたかったこと
- コードベースの統一
- パフォーマンス改善
- アクセシビリティ
- オペコストの削減
- 2017~2019年でやってた
アーキテクチャ
- 国別リダイレクトはNginxで
- URL
- `/:country/:language`
- 位置情報
- Accept-Languageヘッダと、デフォルト言語で
- 部分SSRな理由
- CMSで管理されてる
- パフォーマンスへの取り組み
- デイリーで国別にWPT/LighthouseしてCSVに
- 結果をウィークリーでメールして意識させる
- webpack-bundle-analyserもよく見てる
- i18n
- 言語別にエントリポイントが違う
- 一部はランタイムで翻訳してる(単数形・複数形など
- Webpack Define-plugin
- 決済フローが異なるのでそれを分けたり
- Minifyするので不要な分岐は消える
- a11y
- 2018年のUSで2000件以上起訴されてるので重視
- Lighthouseのスコア以外にも
- Beyond automatic accessibility testing: 6 things I check on every website I build - Manuel Matuzović
- 画像の最適化
- 解像度は購買意欲につながる
- 最適化ももちろん
BFF
まとめ
質問
- Q. BFFでロギングしてるときマスクするセキュアな情報とは?
- 送り先も自社のマイクロサービスでは
- A. 個人情報など、ロギングの趣旨に不要なもの
- Q. 翻訳サービスなど使ってる?
- A. Excelで国ごとに管理してる
- 移行したいとは思う
- Q. WebPとか使ってるけどブラウザ差異はどこまで対応?
- A. Babelのpreset-envで見てる
- `picture`タグはフォールバックを用意したり
- Q. ABテストしてますか?
- Q. 各国の法律などをフロントエンドエンジニアとして意識したことはありますか?
- A. カナダなどシビアな国は特に注意して実装してる
すごい知見の塊だった・・!