[2021/09/14] Frontend Night

[jjenko]

Policy

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

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

ハッシュタグ #frontend_night

Prev: #160

Created from #65 by issue-creator

[kobayang]

GraphQLとクライアントサイドの実装指針

• Demand Driven Architecture(DDA)とは、データを取得する側が、どのようなレスポンスを必要とするかを宣言する方式
• ComponentとFragmentをセットで配置することをFragment Colocation と呼ぶ

📝 Component の 木構造と Fragment の依存関係は同じになる

[izumin5210]

TypedDocumentNode: the next generation of GraphQL and TypeScript - The Guild Blog

• pre-compile された GraphQL Operation（DocumentNode, gql`...` の返り値）に TypeScript で型を当てたもの
• (client library 側が対応していれば) アプリ側のコードは型を指定しなくても、Operation から型を推論してくれるようになる

かなり良さそうだったので、おもむろに突っ込んでみている https://github.com/wantedly/wantedly-frontend/pull/3345

[kobayang]

フロントエンドテストプラクティス in open 8

• テストとは?
  • 品質を上げるもの
  • 将来の変更を容易にしてくれるもの
  • 不具合を見つけてくれるための未来への投資
• test = check + explore
  • 理想のテストは確認(Check)と探索(Explore)の両方しているテスト
  • 開発者、QAの両方が check の状態では test にならない。探索して発見するプロセスを入れる必要がある。
• フロントエンドのテストのベストプラクティス

wantedly の構成で考えると...

• unit test → src/components 以下に書く
• integration test → src/pages 以下に書く
• e2e → /cypress に書く
• a11y / Performance → ???

合わせて読む: フロントエンドのテストは皆のためのもの