Efficient development with GraphQL

Efficient development with GraphQL

My talk at GraphQL Osaka 2019

D8cd979e90361eb5ca5414dd15b35d0f?s=128

murajun1978

October 13, 2019
Tweet

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