iOS app meets GraphQL

StudySapuri Meetup #4 の発表資料です。
https://techplay.jp/event/764168

Transcript

1. #sapurimeetup iOS app meets GraphQL @manicmaniac Study Sapuri/Quipper Product Meetup #4
2. #sapurimeetup Agenda | 01 02 03 04 05 自己紹介 & プロジェクト紹介 GraphQL と 良かったこと 困ったこと まとめ 71 iOS app meets GraphQL
3. #sapurimeetup 自己紹介 & プロジェクト紹介 01 72 iOS app meets GraphQL
4. #sapurimeetup @manicmaniac / 伊東良輔 ➔ iOS Engineer at Quipper ➔ iOS エンジニア歴7年くらい ➔ 2019年4月から中途で Quipper 入社 ◆ 2019年11月まで 主に新規事業 iOS アプリ開発 ◆ 2019年12月から Study Sapuri iOS アプリ開発 73 iOS app meets GraphQL
5. #sapurimeetup 新規事業プロジェクト ➔ 製品 ◆ Study Sapuri と同じような目的を持つ別アプリ ◆ 完全新規開発 ◆ フロント iOS み ◆ 開発期間1年半くらい 74 iOS app meets GraphQL
6. #sapurimeetup 新規事業プロジェクト ➔ チーム構成 ◆ Product Manager 1人 ◆ Web developer 2人 → 7人 ◆ iOS developer 1人 → 2人 ◆ ほぼ全員 GraphQL 経験なし 75 iOS app meets GraphQL
7. #sapurimeetup 新規事業プロジェクト ➔ GraphQL 利用状況 ◆ API ほぼ全て GraphQL ◆ type (≒ resource) 50 種類くらい 規模 76 iOS app meets GraphQL
8. #sapurimeetup 新規事業プロジェクト ➔ なぜ GraphQL ? ◆ モチベーション高いメンバーがいた ◆ 新規開発にかこつけて知見を貯めたかった • Micro Services 化も 77 iOS app meets GraphQL
9. #sapurimeetup GraphQL と 02 78 iOS app meets GraphQL
10. #sapurimeetup GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. * https://graphql.org/learn/ API ため クエリ言語とそ 実行環境 79 iOS app meets GraphQL
11. #sapurimeetup GraphQL 略歴 ➔ 2012年 Facebook 社内で開発開始 ◆ モバイルアプリ API 改善 ため ➔ 2015年 React.js conf にて公開 ➔ 2016年 OSS として正式リリース ◆ Airbnb, GitHub, Twitter などが採用 80 * https://engineering.fb.com/core-data/graphql-a-data-query-language/ iOS app meets GraphQL
12. #sapurimeetup ここから誤解を恐れない GraphQL 簡単な説明 81 iOS app meets GraphQL
13. #sapurimeetup GraphQL vs RESTful API (+ JSON Schema) ➔ 共通点 ◆ HTTP 上に構築される規約 ◆ 強力な型を持つ Schema ◆ ドキュメント自動生成 82 iOS app meets GraphQL
14. #sapurimeetup GraphQL vs RESTful API (+ JSON Schema) ➔ 相違点 ◆ 原則 エンドポイント 1つだけ /graphql ◆ 原則 POST みでやりとり ◆ ステータスコード 常に 200 OK ◆ ネストしたリソースが取り扱える 83 iOS app meets GraphQL
15. #sapurimeetup Schema type Query { hero(episode: Episode): Character } type Character { name: String! appearsIn: [Episode!]! } 84 iOS app meets GraphQL
16. #sapurimeetup Query Request (GraphQL) { hero { name appearsIn } } 85 Response (JSON) { "data": { "hero": { "name": "R2-D2", "appearsIn": [ "NEWHOPE", "EMPIRE", "JEDI" ] } } } iOS app meets GraphQL
17. #sapurimeetup 良かったこと 03 86 iOS app meets GraphQL
18. #sapurimeetup 良かったこと ➔ 強力な型とコード自動生成 ◆ API クライアント 開発が不要に • クライアントライブラリ (Apollo) が必要 ➔ 動作する API ドキュメント 87 iOS app meets GraphQL
19. #sapurimeetup Apollo iOS 88 iOS app meets GraphQL
20. #sapurimeetup Apollo iOS ➔ GraphQL クライアントライブラリ ◆ GraphQL Schema → Swift コード自動生成 • API クライアント 開発が不要 ◆ ローカルキャッシュ機能 • ネットワーク通信が最小限に抑えられる 89 iOS app meets GraphQL
21. #sapurimeetup query AllPosts { posts { title author { name } } } 強力な型とコード自動生成 90 こういう query をあらかじめ定義してお くと iOS app meets GraphQL
22. #sapurimeetup public final class AllPostsQuery: GraphQLQuery { public struct Data: GraphQLSelectionSet { public var posts: [Post] { get set } public struct Post: GraphQLSelectionSet { public var title: String { get set } public var author: Author { get set } public struct Author: GraphQLSelectionSet { public var name: String { get set } } } } } 強力な型とコード自動生成 91 こんな感じ Swift コードに変換 iOS app meets GraphQL
23. #sapurimeetup 強力な型とコード自動生成 92 iOS app meets GraphQL
24. #sapurimeetup 良かったこと ➔ 強力な型とコード自動生成 ◆ API クライアント 開発が不要に • クライアントライブラリ (Apollo) が必要 ➔ 動作する API ドキュメント 93 iOS app meets GraphQL
25. #sapurimeetup 動作する API ドキュメント ➔ GraphiQL (ɡrafək(ə)l), Altair など GraphQL クライアントを利用 ◆ Open API (Swagger) ようなも ◆ query を直接発行して確認できる ◆ Schema を利用して補完が利くエディタ付き 94 iOS app meets GraphQL
26. #sapurimeetup 95 iOS app meets GraphQL
27. #sapurimeetup 困ったこと 04 96 iOS app meets GraphQL
28. #sapurimeetup メンバーに知見がなかった 97 iOS app meets GraphQL
29. #sapurimeetup RESTful API に戻す？ 98 iOS app meets GraphQL
30. #sapurimeetup 99 iOS app meets GraphQL
31. #sapurimeetup 困ったこと ➔ デバッグ 困難 ◆ サーバーとクライアント 原因切り分けが困難 ◆ スキーマ 不一致 ➔ API 設計 困難 ◆ 後方互換性 担保 100 iOS app meets GraphQL
32. #sapurimeetup デバッグ 困難 ➔ サーバーとクライアント 原因切り分けが困難 ◆ クライアント側で query を自由に組み立て可能 • 「こ query どういう場面で使ってる？」 ◆ URL やステータスコードからエラーが推測できない • ログ 全部 /graphql で 200 OK 101 iOS app meets GraphQL
33. #sapurimeetup デバッグ 困難 ➔ サーバーとクライアント 原因切り分けが困難 ◆ デバッグツールを検証環境 アプリに仕込んだ ◆ 全員が GraphQL 通信を見られるように 102 iOS app meets GraphQL
34. #sapurimeetup デバッグツールについて ➔ Apollo Client Developer Tools を利用 ◆ 検証用 iOS 端末に HTTP サーバーを立てる • React Native Debugger を参考 ◆ ブラウザからアクセスする ◆ そ 場で query 編集→発行できる 103 iOS app meets GraphQL
35. #sapurimeetup 104
36. #sapurimeetup https://quipper.hatenablog.com/entry/2019/08/13/making-tool-to-debug-graphql-client 105 iOS app meets GraphQL
37. #sapurimeetup デバッグ 困難 ➔ Schema 不一致 ◆ コード生成に必要な で、コンパイル時点で Schema を使う • サーバー環境によって Schema が違う ◦ staging / develop / release / production ◆ わかりにくいエラーにつながる 106 iOS app meets GraphQL
38. #sapurimeetup デバッグ 困難 ➔ Schema 不一致 ◆ Circle CI を使って release 環境 schema 変更を監視 • 変更があったら自動で PR を作成してテストを回す ◆ 作業ブランチで 手動で任意 schema に書き換えて良い 107 iOS app meets GraphQL
39. #sapurimeetup 108 iOS app meets GraphQL
40. #sapurimeetup API 設計 困難 ➔ GraphQL で 原則 API バージョニングしない ◆ 代わりに deprecation を使う ◆ 名前 変更や、型 変更をしたい場合にちょっと面倒 109 iOS app meets GraphQL
41. #sapurimeetup まとめ 05 110 iOS app meets GraphQL
42. #sapurimeetup まとめ ➔ 高 かつ堅牢な開発を支援する機能が揃っていた ◆ Schema・コード自動生成・API ドキュメント ➔ デバッグ 難しかったが、工夫してなんとかできた ➔ 本番運用 知見が十分に得られた 111 iOS app meets GraphQL
43. #sapurimeetup まとめ ➔ Quipper における GraphQL 未来 ◆ Study Sapuri 本体でも一部 GraphQL を導入し始めている • まだモバイルと 通信部分 すべて RESTful API • 既存 API から 移行 大変… 112 iOS app meets GraphQL
44. #sapurimeetup 113 iOS app meets GraphQL
45. #sapurimeetup 114 iOS app meets GraphQL
46. #sapurimeetup ご清聴ありがとうございました 115 iOS app meets GraphQL