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
How to Enjoy the Murajun’s Style
murajun1978
0
56
Building Tebukuro with Hotwire and Rails
murajun1978
0
1.3k
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
53
New Features in Rails 4.2
murajun1978
0
920
shinosakarb #11 Rails 4 Pattenrs
murajun1978
1
140
FactoryGirl LT
murajun1978
1
70
Other Decks in Programming
See All in Programming
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
テスト駆動Kaggle
isax1015
1
510
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
650
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
580
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
420
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
670
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
NEWT Backend Evolution
xpromx
1
110
技術同人誌をMCP Serverにしてみた
74th
1
680
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
330
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
170
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
770
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
It's Worth the Effort
3n
185
28k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
4 Signs Your Business is Dying
shpigford
184
22k
Faster Mobile Websites
deanohume
307
31k
Fireside Chat
paigeccino
37
3.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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