iOS app meets GraphQL - Speaker Deck

iOS app meets GraphQL

by Ryosuke Ito

Slide 1

Slide 1 text

#sapurimeetup iOS app meets GraphQL @manicmaniac Study Sapuri/Quipper Product Meetup #4

Slide 2

Slide 2 text

#sapurimeetup Agenda | 01 02 03 04 05 自己紹介 & プロジェクト紹介 GraphQL と良かったこと困ったことまとめ 71 iOS app meets GraphQL

Slide 3

Slide 3 text

#sapurimeetup 自己紹介 & プロジェクト紹介 01 72 iOS app meets GraphQL

Slide 4

Slide 4 text

#sapurimeetup @manicmaniac / 伊東良輔 ➔ iOS Engineer at Quipper ➔ iOS エンジニア歴7年くらい ➔ 2019年4月から中途で Quipper 入社 ◆ 2019年11月まで主に新規事業 iOS アプリ開発 ◆ 2019年12月から Study Sapuri iOS アプリ開発 73 iOS app meets GraphQL

Slide 5

Slide 5 text

#sapurimeetup 新規事業プロジェクト ➔ 製品 ◆ Study Sapuri と同じような目的を持つ別アプリ ◆ 完全新規開発 ◆ フロント iOS み ◆ 開発期間1年半くらい 74 iOS app meets GraphQL

Slide 6

Slide 6 text

#sapurimeetup 新規事業プロジェクト ➔ チーム構成 ◆ Product Manager 1人 ◆ Web developer 2人 → 7人 ◆ iOS developer 1人 → 2人 ◆ ほぼ全員 GraphQL 経験なし 75 iOS app meets GraphQL

Slide 7

Slide 7 text

#sapurimeetup 新規事業プロジェクト ➔ GraphQL 利用状況 ◆ API ほぼ全て GraphQL ◆ type (≒ resource) 50 種類くらい規模 76 iOS app meets GraphQL

Slide 8

Slide 8 text

#sapurimeetup 新規事業プロジェクト ➔ なぜ GraphQL ? ◆ モチベーション高いメンバーがいた ◆ 新規開発にかこつけて知見を貯めたかった ● Micro Services 化も 77 iOS app meets GraphQL

Slide 9

Slide 9 text

#sapurimeetup GraphQL と 02 78 iOS app meets GraphQL

Slide 10

Slide 10 text

#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

Slide 11

Slide 11 text

#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

Slide 12

Slide 12 text

#sapurimeetup ここから誤解を恐れない GraphQL 簡単な説明 81 iOS app meets GraphQL

Slide 13

Slide 13 text

#sapurimeetup GraphQL vs RESTful API (+ JSON Schema) ➔ 共通点 ◆ HTTP 上に構築される規約 ◆ 強力な型を持つ Schema ◆ ドキュメント自動生成 82 iOS app meets GraphQL

Slide 14

Slide 14 text

#sapurimeetup GraphQL vs RESTful API (+ JSON Schema) ➔ 相違点 ◆ 原則エンドポイント 1つだけ /graphql ◆ 原則 POST みでやりとり ◆ ステータスコード常に 200 OK ◆ ネストしたリソースが取り扱える 83 iOS app meets GraphQL

Slide 15

Slide 15 text

#sapurimeetup Schema type Query { hero(episode: Episode): Character } type Character { name: String! appearsIn: [Episode!]! } 84 iOS app meets GraphQL

Slide 16

Slide 16 text

#sapurimeetup Query Request (GraphQL) { hero { name appearsIn } } 85 Response (JSON) { "data": { "hero": { "name": "R2-D2", "appearsIn": [ "NEWHOPE", "EMPIRE", "JEDI" ] } } } iOS app meets GraphQL

Slide 17

Slide 17 text

#sapurimeetup 良かったこと 03 86 iOS app meets GraphQL

Slide 18

Slide 18 text

#sapurimeetup 良かったこと ➔ 強力な型とコード自動生成 ◆ API クライアント開発が不要に ● クライアントライブラリ (Apollo) が必要 ➔ 動作する API ドキュメント 87 iOS app meets GraphQL

Slide 19

Slide 19 text

#sapurimeetup Apollo iOS 88 iOS app meets GraphQL

Slide 20

Slide 20 text

#sapurimeetup Apollo iOS ➔ GraphQL クライアントライブラリ ◆ GraphQL Schema → Swift コード自動生成 ● API クライアント開発が不要 ◆ ローカルキャッシュ機能 ● ネットワーク通信が最小限に抑えられる 89 iOS app meets GraphQL

Slide 21

Slide 21 text

#sapurimeetup query AllPosts { posts { title author { name } } } 強力な型とコード自動生成 90 こういう query をあらかじめ定義しておくと iOS app meets GraphQL

Slide 22

Slide 22 text

#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

Slide 23

Slide 23 text

#sapurimeetup 強力な型とコード自動生成 92 iOS app meets GraphQL

Slide 24

Slide 24 text

#sapurimeetup 良かったこと ➔ 強力な型とコード自動生成 ◆ API クライアント開発が不要に ● クライアントライブラリ (Apollo) が必要 ➔ 動作する API ドキュメント 93 iOS app meets GraphQL

Slide 25

Slide 25 text

#sapurimeetup 動作する API ドキュメント ➔ GraphiQL (ɡrafək(ə)l), Altair など GraphQL クライアントを利用 ◆ Open API (Swagger) ようなも ◆ query を直接発行して確認できる ◆ Schema を利用して補完が利くエディタ付き 94 iOS app meets GraphQL

Slide 26

Slide 26 text

#sapurimeetup 95 iOS app meets GraphQL

Slide 27

Slide 27 text

#sapurimeetup 困ったこと 04 96 iOS app meets GraphQL

Slide 28

Slide 28 text

#sapurimeetup メンバーに知見がなかった 97 iOS app meets GraphQL

Slide 29

Slide 29 text

#sapurimeetup RESTful API に戻す？ 98 iOS app meets GraphQL

Slide 30

Slide 30 text

#sapurimeetup 99 iOS app meets GraphQL

Slide 31

Slide 31 text

#sapurimeetup 困ったこと ➔ デバッグ困難 ◆ サーバーとクライアント原因切り分けが困難 ◆ スキーマ不一致 ➔ API 設計困難 ◆ 後方互換性担保 100 iOS app meets GraphQL

Slide 32

Slide 32 text

#sapurimeetup デバッグ困難 ➔ サーバーとクライアント原因切り分けが困難 ◆ クライアント側で query を自由に組み立て可能 ● 「こ query どういう場面で使ってる？」 ◆ URL やステータスコードからエラーが推測できない ● ログ全部 /graphql で 200 OK 101 iOS app meets GraphQL

Slide 33

Slide 33 text

#sapurimeetup デバッグ困難 ➔ サーバーとクライアント原因切り分けが困難 ◆ デバッグツールを検証環境アプリに仕込んだ ◆ 全員が GraphQL 通信を見られるように 102 iOS app meets GraphQL

Slide 34

Slide 34 text

#sapurimeetup デバッグツールについて ➔ Apollo Client Developer Tools を利用 ◆ 検証用 iOS 端末に HTTP サーバーを立てる ● React Native Debugger を参考 ◆ ブラウザからアクセスする ◆ そ場で query 編集→発行できる 103 iOS app meets GraphQL

Slide 35

Slide 35 text

#sapurimeetup 104

Slide 36

Slide 36 text

#sapurimeetup https://quipper.hatenablog.com/entry/2019/08/13/making-tool-to-debug-graphql-client 105 iOS app meets GraphQL

Slide 37

Slide 37 text

#sapurimeetup デバッグ困難 ➔ Schema 不一致 ◆ コード生成に必要なで、コンパイル時点で Schema を使う ● サーバー環境によって Schema が違う ○ staging / develop / release / production ◆ わかりにくいエラーにつながる 106 iOS app meets GraphQL

Slide 38

Slide 38 text

#sapurimeetup デバッグ困難 ➔ Schema 不一致 ◆ Circle CI を使って release 環境 schema 変更を監視 ● 変更があったら自動で PR を作成してテストを回す ◆ 作業ブランチで手動で任意 schema に書き換えて良い 107 iOS app meets GraphQL

Slide 39

Slide 39 text

#sapurimeetup 108 iOS app meets GraphQL

Slide 40

Slide 40 text

#sapurimeetup API 設計困難 ➔ GraphQL で原則 API バージョニングしない ◆ 代わりに deprecation を使う ◆ 名前変更や、型変更をしたい場合にちょっと面倒 109 iOS app meets GraphQL

Slide 41

Slide 41 text

#sapurimeetup まとめ 05 110 iOS app meets GraphQL

Slide 42

Slide 42 text

#sapurimeetup まとめ ➔ 高かつ堅牢な開発を支援する機能が揃っていた ◆ Schema・コード自動生成・API ドキュメント ➔ デバッグ難しかったが、工夫してなんとかできた ➔ 本番運用知見が十分に得られた 111 iOS app meets GraphQL

Slide 43

Slide 43 text

#sapurimeetup まとめ ➔ Quipper における GraphQL 未来 ◆ Study Sapuri 本体でも一部 GraphQL を導入し始めている ● まだモバイルと通信部分すべて RESTful API ● 既存 API から移行大変… 112 iOS app meets GraphQL

Slide 44

Slide 44 text

#sapurimeetup 113 iOS app meets GraphQL

Slide 45

Slide 45 text

#sapurimeetup 114 iOS app meets GraphQL

Slide 46

Slide 46 text

#sapurimeetup ご清聴ありがとうございました 115 iOS app meets GraphQL