Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Efficient development with GraphQL
Search
murajun1978
October 13, 2019
Programming
0
310
Efficient development with GraphQL
My talk at GraphQL Osaka 2019
murajun1978
October 13, 2019
Tweet
Share
More Decks by murajun1978
See All by murajun1978
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
780
How to Enjoy the Murajun’s Style
murajun1978
0
62
Building Tebukuro with Hotwire and Rails
murajun1978
0
1.4k
Zeitwerk integration in Rails 6.0
murajun1978
0
110
Effective Debugging Apps in VS Code
murajun1978
1
910
tebukuro
murajun1978
0
120
Shinosaka.rb #17 Hands on
murajun1978
0
55
New Features in Rails 4.2
murajun1978
0
930
shinosakarb #11 Rails 4 Pattenrs
murajun1978
1
150
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
820
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.1k
testingを眺める
matumoto
1
130
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.3k
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
230
Kiroで始めるAI-DLC
kaonash
2
540
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
ProxyによるWindow間RPC機構の構築
syumai
3
1k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
270
Ruby Parser progress report 2025
yui_knk
1
290
Langfuseと歩む生成AI活用推進
licux
3
330
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
For a Future-Friendly Web
brad_frost
180
9.9k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Unsuck your backbone
ammeep
671
58k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Transcript
Efficient development with GraphQL GraphQL Osaka 2019
{ 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” ] } }
リーンソフトウェア開発 • ムダを排除する • 知識を作り出す • 決定をできるだけ遅らせる • できるだけ早く提供する •
チームに権限を移譲する • 全体を最適化する • 品質を作り込む
いかに効率よく最速で かつ 必要最低限のコストで 高品質なアプリケーションを 継続的に開発できるのか
ムダを排除する
アプリケーションを開発するたびに フロントエンドで バックエンドAPIのClientを作る
まじめんどくさいし コストもかかる
Apollo GraphQL
Apollo Server • GraphQL.jsベースのGraphQL Server • Web Frameworkに対応 ◦ Express
◦ Koa ◦ Hapi ◦ Hastify ◦ Amazon Lambda ◦ Micro ◦ Azure Functions ◦ Google Cloud Functions • OSS
Apollo Server Demo
アプリケーションを開発するたびに フロントエンドで バックエンドAPIのClientを作る
GraphQL Code Generator https://graphql-code-generator.com/
GraphQL Code Generator • GraphQLのschemaから型定義やクライアント用のコードを生成 • ResolverのTypeScript型定義 • React Apolloのコード生成
• 他にもpluginがある ◦ https://graphql-code-generator.com/docs/plugins/
GraphQL Code Generator Demo
できるだけ早く提供する
バックエンドの開発が終わるまで フロントエンドの開発に着手できない もしくは できるけど手戻りがあったりする
Mocking
Apollo Server Mocking • Apollo Serverをモックサーバにできる • 実装が終わったResolverを順次適用していくことができる
Apollo Server Mocking Demo
品質を作り込む ✨
Apollo Server Integration Testing • 結合テスト用のクライアントを提供 • Jestのスナップショットを使って、Apollo Serverの振る舞いをテストする
Apollo Server Integration Testing Demo
開発初期は資金も不足がち 最低限のインフラコストで運用したい
Apollo Serverは関係ない?
Apollo ServerはServerlessとお友達です
Google Cloud Functions
Google Cloud Functions • Googleのサーバレスコンピューティング • 毎月無料枠があって、お金がないプロジェクトにはやさしい料金体系 • Node.js v8,
v10 (beta) 環境で実行できる • Firebase Toolsで簡単デプロイ
Firebase Hosting
Firebase Hosting • Googleのホスティングサービス • CloudflareなどのCDNに配信できる • Firebase Toolsで簡単デプロイ
まとめ • GraphQL Code Generatorで型定義、クライアントコードを自動生成してくれるの で、めんどうな実装やコストを削減できる • 開発初期はモックサーバとして活用し、実装が終わったResolverを適用していくこ とができるので、フロントエンドとバックエンドが同時に開発できる •
フロントエンド、バックエンドともTypeScriptでかけるので、学習コストを抑えることが できる • Serverlessで動作可能なので、インフラコストも削減できる • 運用面でもServerlessはメリット大です
Thank you