Efficient development with GraphQL

Transcript

1. Efficient development with GraphQL GraphQL Osaka 2019

2. { 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” ] } }

3. リーンソフトウェア開発 • ムダを排除する • 知識を作り出す • 決定をできるだけ遅らせる • できるだけ早く提供する •

   チームに権限を移譲する • 全体を最適化する • 品質を作り込む

4. いかに効率よく最速で かつ 必要最低限のコストで 高品質なアプリケーションを 継続的に開発できるのか

5. ムダを排除する

6. アプリケーションを開発するたびに フロントエンドで バックエンドAPIのClientを作る

7. まじめんどくさいし コストもかかる

8. Apollo GraphQL

9. Apollo Server • GraphQL.jsベースのGraphQL Server • Web Frameworkに対応 ◦ Express

   ◦ Koa ◦ Hapi ◦ Hastify ◦ Amazon Lambda ◦ Micro ◦ Azure Functions ◦ Google Cloud Functions • OSS

10. Apollo Server Demo

11. アプリケーションを開発するたびに フロントエンドで バックエンドAPIのClientを作る

12. GraphQL Code Generator https://graphql-code-generator.com/

13. GraphQL Code Generator • GraphQLのschemaから型定義やクライアント用のコードを生成 • ResolverのTypeScript型定義 • React Apolloのコード生成

    • 他にもpluginがある ◦ https://graphql-code-generator.com/docs/plugins/

14. GraphQL Code Generator Demo

15. できるだけ早く提供する

16. バックエンドの開発が終わるまで フロントエンドの開発に着手できない もしくは できるけど手戻りがあったりする

17. Mocking

18. Apollo Server Mocking • Apollo Serverをモックサーバにできる • 実装が終わったResolverを順次適用していくことができる

19. Apollo Server Mocking Demo

20. 品質を作り込む ✨

21. Apollo Server Integration Testing • 結合テスト用のクライアントを提供 • Jestのスナップショットを使って、Apollo Serverの振る舞いをテストする

22. Apollo Server Integration Testing Demo

23. 開発初期は資金も不足がち 最低限のインフラコストで運用したい

24. Apollo Serverは関係ない？

25. Apollo ServerはServerlessとお友達です

26. Google Cloud Functions

27. Google Cloud Functions • Googleのサーバレスコンピューティング • 毎月無料枠があって、お金がないプロジェクトにはやさしい料金体系 • Node.js v8,

    v10 (beta) 環境で実行できる • Firebase Toolsで簡単デプロイ

28. Firebase Hosting

29. Firebase Hosting • Googleのホスティングサービス • CloudflareなどのCDNに配信できる • Firebase Toolsで簡単デプロイ

30. まとめ • GraphQL Code Generatorで型定義、クライアントコードを自動生成してくれるの で、めんどうな実装やコストを削減できる • 開発初期はモックサーバとして活用し、実装が終わったResolverを適用していくこ とができるので、フロントエンドとバックエンドが同時に開発できる •

    フロントエンド、バックエンドともTypeScriptでかけるので、学習コストを抑えることが できる • Serverlessで動作可能なので、インフラコストも削減できる • 運用面でもServerlessはメリット大です

31. Thank you