[2021/08/10] Frontend Night

[jjenko]

Policy

• 資料の準備をがんばらない
• 参加・途中退席は自由
• スキップしない

話したい・聞きたいネタを書いてく ✏️

ハッシュタグ #frontend_night

Prev: #155

Created from #65 by issue-creator

[kobayang]

メルカリShops の技術スタックと、その選定理由

• GraphQL / NestJS

Microservices アーキテクチャを採用する場合、Microservices へのアクセスをシンプルにするためにも BFF (Backend for Frontend) のレイヤーは必須です。 メルカリ Shops では、GraphQL をBFFのインターフェイスとし、NestJS フレームワークを採用しました。多くの依存したコンポーネントにアクセスするために、NestJS の持つ DI(Dependency Injection) のアプローチは相性が良いからです。

また、GraphQL のスキーマ管理は悩ましい課題ですが、NestJS の Code First アプローチはコードに集中することができる良い手法でした。これによってエンジニアはスキーマとコードを同期する必要がなくなり、コードだけを管理すればよくなりました。

• Next.js

メルカリShopsのフロントエンドは全てWebベースになっています。これは、メルカリという既存のアプリに組み込む手段として、独立した環境でシステムを柔軟に構築する手段でもありました。

Webのフレームワークとして選定したのは next.js です。Webである以上ページ表示の速度は何よりも優先されます。CSR, SSR, ISR などの機構を持ち、CDN との構成とも相性が良い next.js はベストな選択でした。

[izumin5210]

HookViewController.md

React Component の実装が持つ責務を Views / Hooks / Controllers の3レイヤに分けることで、よりテスタブル（Jest, Storybook が書きやすく）になる。
さらに、開発者の責務も分けやすく（UX を見る人・ステートマシンを見る人）なる … という主張

[izumin5210]

React コンポーネントの書き方をチームで統一する

React component をどう書くか選手権
この記事が扱う「書き方」は「arrow で書くか関数定義で書くか」とか「型を React.(V)FC で当てるか、その他か」みたいな話
MECE になるようにリストアップ・検討してて偉い

自分は返り値ミスが怖くて React.FC 使い続けてたんだけど、それは心配ないって書かれてるのでなるほどーっておもった

[kobayang]

TypeScript * GraphQLのバックエンド設計プラクティス

依存性の注入を採用する

context に connection が渡ってしまう問題を InversityJS を使って解決している部分がエレガントに感じた。

[kobayang]

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md
react/function-component-definition で react component の定義の lint ができる