Slide 1
Slide 1 text
Efficient development
with GraphQL
GraphQL Osaka 2019
Slide 2
Slide 2 text
{ me: { name, avatar, jobs, communities } }
{
me: {
name: “murajun1978”,
avatar: ,
jobs: [“Web developer”],
communties: [
“Shinosaka.rb”, “Rails Follow-up Osaka”,
“Osaka Web Developers Meetup”, “Open Source Software Developers Osaka”
]
}
}
Slide 3
Slide 3 text
リーンソフトウェア開発
● ムダを排除する
● 知識を作り出す
● 決定をできるだけ遅らせる
● できるだけ早く提供する
● チームに権限を移譲する
● 全体を最適化する
● 品質を作り込む
Slide 4
Slide 4 text
いかに効率よく最速で
かつ
必要最低限のコストで
高品質なアプリケーションを
継続的に開発できるのか
Slide 5
Slide 5 text
ムダを排除する
Slide 6
Slide 6 text
アプリケーションを開発するたびに
フロントエンドで
バックエンドAPIのClientを作る
Slide 7
Slide 7 text
まじめんどくさいし
コストもかかる
Slide 8
Slide 8 text
Apollo GraphQL
Slide 9
Slide 9 text
Apollo Server
● GraphQL.jsベースのGraphQL Server
● Web Frameworkに対応
○ Express
○ Koa
○ Hapi
○ Hastify
○ Amazon Lambda
○ Micro
○ Azure Functions
○ Google Cloud Functions
● OSS
Slide 10
Slide 10 text
Apollo Server Demo
Slide 11
Slide 11 text
アプリケーションを開発するたびに
フロントエンドで
バックエンドAPIのClientを作る
Slide 12
Slide 12 text
GraphQL Code Generator
https://graphql-code-generator.com/
Slide 13
Slide 13 text
GraphQL Code Generator
● GraphQLのschemaから型定義やクライアント用のコードを生成
● ResolverのTypeScript型定義
● React Apolloのコード生成
● 他にもpluginがある
○ https://graphql-code-generator.com/docs/plugins/
Slide 14
Slide 14 text
GraphQL Code Generator Demo
Slide 15
Slide 15 text
できるだけ早く提供する
Slide 16
Slide 16 text
バックエンドの開発が終わるまで
フロントエンドの開発に着手できない
もしくは
できるけど手戻りがあったりする
Slide 17
Slide 17 text
Mocking
Slide 18
Slide 18 text
Apollo Server Mocking
● Apollo Serverをモックサーバにできる
● 実装が終わったResolverを順次適用していくことができる
Slide 19
Slide 19 text
Apollo Server Mocking Demo
Slide 20
Slide 20 text
品質を作り込む ✨
Slide 21
Slide 21 text
Apollo Server Integration Testing
● 結合テスト用のクライアントを提供
● Jestのスナップショットを使って、Apollo Serverの振る舞いをテストする
Slide 22
Slide 22 text
Apollo Server Integration Testing Demo
Slide 23
Slide 23 text
開発初期は資金も不足がち
最低限のインフラコストで運用したい
Slide 24
Slide 24 text
Apollo Serverは関係ない？
Slide 25
Slide 25 text
Apollo ServerはServerlessとお友達です
Slide 26
Slide 26 text
Google Cloud Functions
Slide 27
Slide 27 text
Google Cloud Functions
● Googleのサーバレスコンピューティング
● 毎月無料枠があって、お金がないプロジェクトにはやさしい料金体系
● Node.js v8, v10 (beta) 環境で実行できる
● Firebase Toolsで簡単デプロイ
Slide 28
Slide 28 text
Firebase Hosting
Slide 29
Slide 29 text
Firebase Hosting
● Googleのホスティングサービス
● CloudflareなどのCDNに配信できる
● Firebase Toolsで簡単デプロイ
Slide 30
Slide 30 text
まとめ
● GraphQL Code Generatorで型定義、クライアントコードを自動生成してくれるの
で、めんどうな実装やコストを削減できる
● 開発初期はモックサーバとして活用し、実装が終わったResolverを適用していくこ
とができるので、フロントエンドとバックエンドが同時に開発できる
● フロントエンド、バックエンドともTypeScriptでかけるので、学習コストを抑えることが
できる
● Serverlessで動作可能なので、インフラコストも削減できる
● 運用面でもServerlessはメリット大です
Slide 31
Slide 31 text
Thank you