Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Efficient development with GraphQL

Efficient development with GraphQL

My talk at GraphQL Osaka 2019

murajun1978

October 13, 2019
Tweet

More Decks by murajun1978

Other Decks in Programming

Transcript

  1. Efficient development
    with GraphQL
    GraphQL Osaka 2019

    View full-size slide

  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”
    ]
    }
    }

    View full-size slide

  3. リーンソフトウェア開発
    ● ムダを排除する
    ● 知識を作り出す
    ● 決定をできるだけ遅らせる
    ● できるだけ早く提供する
    ● チームに権限を移譲する
    ● 全体を最適化する
    ● 品質を作り込む

    View full-size slide

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

    View full-size slide

  5. ムダを排除する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Apollo GraphQL

    View full-size slide

  9. Apollo Server
    ● GraphQL.jsベースのGraphQL Server
    ● Web Frameworkに対応
    ○ Express
    ○ Koa
    ○ Hapi
    ○ Hastify
    ○ Amazon Lambda
    ○ Micro
    ○ Azure Functions
    ○ Google Cloud Functions
    ● OSS

    View full-size slide

  10. Apollo Server Demo

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. GraphQL Code Generator
    ● GraphQLのschemaから型定義やクライアント用のコードを生成
    ● ResolverのTypeScript型定義
    ● React Apolloのコード生成
    ● 他にもpluginがある
    ○ https://graphql-code-generator.com/docs/plugins/

    View full-size slide

  14. GraphQL Code Generator Demo

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. Apollo Server Mocking Demo

    View full-size slide

  19. 品質を作り込む ✨

    View full-size slide

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

    View full-size slide

  21. Apollo Server Integration Testing Demo

    View full-size slide

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

    View full-size slide

  23. Apollo Serverは関係ない?

    View full-size slide

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

    View full-size slide

  25. Google Cloud Functions

    View full-size slide

  26. Google Cloud Functions
    ● Googleのサーバレスコンピューティング
    ● 毎月無料枠があって、お金がないプロジェクトにはやさしい料金体系
    ● Node.js v8, v10 (beta) 環境で実行できる
    ● Firebase Toolsで簡単デプロイ

    View full-size slide

  27. Firebase Hosting

    View full-size slide

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

    View full-size slide

  29. まとめ
    ● GraphQL Code Generatorで型定義、クライアントコードを自動生成してくれるの
    で、めんどうな実装やコストを削減できる
    ● 開発初期はモックサーバとして活用し、実装が終わったResolverを適用していくこ
    とができるので、フロントエンドとバックエンドが同時に開発できる
    ● フロントエンド、バックエンドともTypeScriptでかけるので、学習コストを抑えることが
    できる
    ● Serverlessで動作可能なので、インフラコストも削減できる
    ● 運用面でもServerlessはメリット大です

    View full-size slide