Slide 1
Slide 1 text
{
talk(title: "Web API の未来") {
title
event
speaker
keywords
}
}
Slide 2
Slide 2 text
{
"talk": {
"title": "Web API の未来",
"event": "YAPC::Fukuoka 2017",
"speaker": "Takatsugu Shigeta",
"keywords": ["API", "GraphQL"]
}
}
Slide 3
Slide 3 text
{
speaker(name: "Shigeta") {
name
elsewhere
work
}
}
Slide 4
Slide 4 text
{
"speaker": {
"name": "シゲタタカツグ",
"elsewhere": {
"PAUSE": "SHIGETA",
"Twitter": "@comewalk",
"GitHub": "@comewalk",
"Blog": "https://blog.comewalk.com/"
},
"work": {
"at": "Six Apart Ltd.",
"information": "We are hiring!"
}
}
}
Slide 5
Slide 5 text
Web API の未来
について考える
Slide 6
Slide 6 text
https://trends.google.co.jp/trends/explore?date=all&q=Web%20API,REST%20API
Slide 7
Slide 7 text
Web API の歴史を遡る
※諸説あります
Photo by https://flic.kr/p/8iSBWB
Slide 8
Slide 8 text
REST + JSON
• 2010年年頃から現在の主流
• ブラウザとの親和性
Slide 9
Slide 9 text
REST + XML
• 2005年年 Ajax の登場
• 2005年年 REST ムーブメント
• ブラウザの時代へ
Slide 10
Slide 10 text
XML-RPC
• 1999年年頃 仕様策定
• RPC を HTTP の上で⾏行行うプロトコルのひとつ
• Firewall を越えてインターネットワイドに
• 2001年年頃 SOAP 誕⽣生
Slide 11
Slide 11 text
RPC
• Remote Procedure Call
• ネットワーク越しに関数呼び出しするという意味で
は Web API の原点にある（と思う）
• 独⾃自ポートを開けるなど Firewall を越える課題など
Slide 12
Slide 12 text
RPC
XML-RPC
REST + XML
REST + JSON
2000年年 2005年年 2010年年 2015年年
Slide 13
Slide 13 text
サーバサイド
• 独⾃自サーバから Web サーバへ
• インターナルからインターネットへ
• 独⾃自フォーマットから JSON へ
Slide 14
Slide 14 text
クライアントサイド
• 専⽤用プログラムからブラウザへ
• C⾔言語などから JavaScript へ
• 単純なマークアップ（HTML）から SPA へ
Slide 15
Slide 15 text
REST の功罪
Photo by https://flic.kr/p/ogSP8K
Slide 16
Slide 16 text
REST によって HTTP の表現だけでリソースごとのシ
ンプルなアクセスが提供できた⼀一⽅方で、⼤大量量のリソー
スを抱えるサービスは多くのエンドポイントを持つた
め、複数リソースからデータの取得が必要な場合に複
数回の API コールを余儀なくされる結果、主にクラ
イアントサイドのオーバヘッドが増え、⾮非同期処理理や
ローカルキャッシュなどの技術を駆使することによる
実装の複雑化を増幅した結果、サーバサイド以上にク
ライアントサイドは⾼高度な技術を要求されることとなっ
た。
Slide 17
Slide 17 text
http://graphql.org/
Slide 18
Slide 18 text
– GraphQL Tokyo
https://www.meetup.com/ja-JP/GraphQL-Tokyo/events/239924595/
“Meetup #1 Thinking in GraphQL”
Slide 19
Slide 19 text
– POSTD
http://postd.cc/api-paradigms/
“GraphQLはWeb APIの次のフロンティアか？”
Slide 20
Slide 20 text
GraphQL
• 2012年年 Facebook 開発
• 2015年年 Working Draft 公開
• http://graphql.org/
Slide 21
Slide 21 text
• プロトコル
• アーキテクチャ
• ソフトウェア
• クエリー⾔言語
GraphQL
Slide 22
Slide 22 text
type Talk {
title: String
event: String
speaker: String
keywords: [String]
}
type Query {
talk(title: String): Talk
}
Slide 23
Slide 23 text
type Talk {
title: String!
event: String!
speaker: String!
keywords: [String]
}
type Root {
talk(title: String): Talk
}
schema {
query: Root
}
Slide 24
Slide 24 text
{
talk(title: "Web API の未来") {
title
event
speaker
keywords
}
}
Slide 25
Slide 25 text
{
"data": {
"talk": {
"title": "Web API の未来",
"event": "YAPC::Fukuoka 2017",
"speaker": "Takatsugu Shigeta",
"keywords": ["API", "GraphQL"]
}
}
}
Slide 26
Slide 26 text
Request
{
talk(title: "Foo") {
title
event
speaker
keywords
}
}
Response
{
"data": {
"talk": {
"title": "Foo",
"event": "YAPC::Fukuo
"speaker": "Mike Jone
"keywords": ["Alice",
}
}
}
Slide 27
Slide 27 text
$ curl -s\
> -H 'Content-Type: application/json'\
> -H 'Authorization: Bearer ...YOUR TOKEN…'\
> -d '{ "query": "{ viewer { login } }" }'\
> https://api.github.com/graphql | jq .
{
"data": {
"viewer": {
"login": "comewalk"
}
}
}
JSON でリクエスト
Slide 28
Slide 28 text
struct Talk {
char* title;
char* event;
char* speaker;
char* keywords;
};
struct Talk t;
talk("Foo", &t);
printf("%s", t->title); // "Foo"
RPC の時代に似てますね！
（20年年以上のあいだ、形を変えてもやっていることは同じ）
Slide 29
Slide 29 text
操作（Operations）
• Query （データ問い合わせ）
• Mutation （データ操作）
• Subscription （データ更更新通知）
Slide 30
Slide 30 text
Query （データ問い合わせ）
type UserQuery {
search(name: String): [User]
}
schema {
query: UserQuery
}
type Query {
search(name: String): [User]
}
Slide 31
Slide 31 text
Query （データ問い合わせ）
Request
query {
search(name: "Foo") {
name
email
}
}
Response
{ "data":
{
[{
"name": "Bob",
"email": "[email protected]"
}]
}
}
Slide 32
Slide 32 text
Mutation （データ操作）
type UserMutation {
update(name: String): Int
}
schema {
muration: UserMutation
}
type Mutation {
update(name: String): Int
}
Slide 33
Slide 33 text
Mutation （データ操作）
Request
mutation {
update(name: "Foo") {
result
}
}
Response
{ "data":
{
1
}
}
Slide 34
Slide 34 text
Subscription （データ更更新通知）
Slide 35
Slide 35 text
–GitHub
https://developer.github.com/early-access/graphql/
https://developer.github.com/v4/
“The ability to define and specify precisely the
data you want for your integration is a powerful
advantage over the existing REST endpoints. ”
事例例: GitHub
Slide 36
Slide 36 text
–Facebook
https://facebook.github.io/relay/
“A JavaScript framework for building data-
driven React applications”
事例例: Relay
Slide 37
Slide 37 text
クライアント
アプリケーション
サーバ
• 構⽂文解析
• 結果返却
GraphQL
Slide 38
Slide 38 text
クライアント
アプリケーション
サーバ
GraphQL Proxy
• 構⽂文解析
• データ収集
• 結果返却
GraphQL REST
Slide 39
Slide 39 text
クライアント
アプリケーション
サーバ
GraphQL Proxy
• 構⽂文解析
• データ収集
• 結果返却
GraphQL REST
外部Webサービス
DBサーバ
Slide 40
Slide 40 text
–Netflix
http://netflix.github.io/falcor/starter/what-is-falcor.html
“Falcor is middleware.〜 Falcor can be used to
optimize communication between the layers of
a new or existing application.”
Falcor
Slide 41
Slide 41 text
https://netflix.github.io/falcor/documentation/network-diagram.png
Slide 42
Slide 42 text
Web API の未来
• Facebook, Netflix, GitHub など⼤大⼿手が動き始めた
• GitHub API は v3 が REST、v4 が GraphQL
• REST が GraphQL に置き換わることは当⾯面ないと思う
• だけど（ほぼ）5年年周期で変わるトレンドのはじまり
• フォーマットは JSON
• REST 原理理主義は卒業してもいい
• きっと次に⽣生まれる何かが Web API の未来を担う
Slide 43
Slide 43 text
"phrase": {
"text": "One more thing..."
}
Slide 44
Slide 44 text
"CPAN": {
"module": {
"name": "GraphQL",
"author": "SHIGETA"
}
}
Slide 45
Slide 45 text
"CPAN": {
"module": {
"name": "GraphQL",
"author": "SHIGETA" => "ETJ"
}
}
Slide 46
Slide 46 text
"CPAN": {
"module": {
"name": "GraphQL::Tiny",
"author": "SHIGETA"
}
}
Slide 47
Slide 47 text
#!/usr/bin/perl
use common::sense;
use GraphQL::Tiny;
use JSON;
my $result = GraphQL::Tiny->new(
schema => <<'SCHEMA',
type Query {
hello: String
bye: String
}
SCHEMA
source => '{ hello }',
root_value => {
hello => sub {
return 'Fukuoka';
}
},
)->run();
say JSON->new->encode($result);
$ perl hello.pl
{ "data": { "hello": "Fukuoka" } }
Slide 48
Slide 48 text
"links":[{
"rel": "self",
"title": "Happy coding!",
}, {
"rel": "next",
"title": "Any Question?",
"href": "@comewalk"
}]