YAPC::Fukuoka 2017 HAKATA

Web API の未来について GraphQL のことをお話ししました。

Transcript

1. {
   talk(title: "Web API の未来") {
   title
   event
   speaker
   keywords
   }
   }
   

   View Slide

2. {
   "talk": {
   "title": "Web API の未来",
   "event": "YAPC::Fukuoka 2017",
   "speaker": "Takatsugu Shigeta",
   "keywords": ["API", "GraphQL"]
   }
   }
   

   View Slide

3. {
   speaker(name: "Shigeta") {
   name
   elsewhere
   work
   }
   }
   

   View Slide

4. {
   "speaker": {
   "name": "シゲタタカツグ",
   "elsewhere": {
   "PAUSE": "SHIGETA",
   "Twitter": "@comewalk",
   "GitHub": "@comewalk",
   "Blog": "https://blog.comewalk.com/"
   },
   "work": {
   "at": "Six Apart Ltd.",
   "information": "We are hiring!"
   }
   }
   }
   

   View Slide

5. Web API の未来
   について考える
   

   View Slide

6. https://trends.google.co.jp/trends/explore?date=all&q=Web%20API,REST%20API
   

   View Slide

7. Web API の歴史を遡る
   ※諸説あります
   Photo by https://flic.kr/p/8iSBWB
   

   View Slide

8. REST + JSON
   • 2010年年頃から現在の主流
   • ブラウザとの親和性
   

   View Slide

9. REST + XML
   • 2005年年 Ajax の登場
   • 2005年年 REST ムーブメント
   • ブラウザの時代へ
   

   View Slide

10. XML-RPC
    • 1999年年頃 仕様策定
    • RPC を HTTP の上で⾏行行うプロトコルのひとつ
    • Firewall を越えてインターネットワイドに
    • 2001年年頃 SOAP 誕⽣生
    

    View Slide

11. RPC
    • Remote Procedure Call
    • ネットワーク越しに関数呼び出しするという意味で
    は Web API の原点にある（と思う）
    • 独⾃自ポートを開けるなど Firewall を越える課題など
    

    View Slide

12. RPC
    XML-RPC
    REST + XML
    REST + JSON
    2000年年 2005年年 2010年年 2015年年
    

    View Slide

13. サーバサイド
    • 独⾃自サーバから Web サーバへ
    • インターナルからインターネットへ
    • 独⾃自フォーマットから JSON へ
    

    View Slide

14. クライアントサイド
    • 専⽤用プログラムからブラウザへ
    • C⾔言語などから JavaScript へ
    • 単純なマークアップ（HTML）から SPA へ
    

    View Slide

15. REST の功罪
    Photo by https://flic.kr/p/ogSP8K
    

    View Slide

16. REST によって HTTP の表現だけでリソースごとのシ
    ンプルなアクセスが提供できた⼀一⽅方で、⼤大量量のリソー
    スを抱えるサービスは多くのエンドポイントを持つた
    め、複数リソースからデータの取得が必要な場合に複
    数回の API コールを余儀なくされる結果、主にクラ
    イアントサイドのオーバヘッドが増え、⾮非同期処理理や
    ローカルキャッシュなどの技術を駆使することによる
    実装の複雑化を増幅した結果、サーバサイド以上にク
    ライアントサイドは⾼高度な技術を要求されることとなっ
    た。
    

    View Slide

17. http://graphql.org/
    

    View Slide

18. – GraphQL Tokyo
    https://www.meetup.com/ja-JP/GraphQL-Tokyo/events/239924595/
    “Meetup #1 Thinking in GraphQL”
    

    View Slide

19. – POSTD
    http://postd.cc/api-paradigms/
    “GraphQLはWeb APIの次のフロンティアか？”
    

    View Slide

20. GraphQL
    • 2012年年 Facebook 開発
    • 2015年年 Working Draft 公開
    • http://graphql.org/
    

    View Slide

21. • プロトコル
    • アーキテクチャ
    • ソフトウェア
    • クエリー⾔言語
    GraphQL
    

    View Slide

22. type Talk {
    title: String
    event: String
    speaker: String
    keywords: [String]
    }
    type Query {
    talk(title: String): Talk
    }
    

    View Slide

23. type Talk {
    title: String!
    event: String!
    speaker: String!
    keywords: [String]
    }
    type Root {
    talk(title: String): Talk
    }
    schema {
    query: Root
    }
    

    View Slide

24. {
    talk(title: "Web API の未来") {
    title
    event
    speaker
    keywords
    }
    }
    

    View Slide

25. {
    "data": {
    "talk": {
    "title": "Web API の未来",
    "event": "YAPC::Fukuoka 2017",
    "speaker": "Takatsugu Shigeta",
    "keywords": ["API", "GraphQL"]
    }
    }
    }
    

    View Slide

26. Request
    {
    talk(title: "Foo") {
    title
    event
    speaker
    keywords
    }
    }
    Response
    {
    "data": {
    "talk": {
    "title": "Foo",
    "event": "YAPC::Fukuo
    "speaker": "Mike Jone
    "keywords": ["Alice",
    }
    }
    }
    

    View Slide

27. $ 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 でリクエスト
    

    View Slide

28. struct Talk {
    char* title;
    char* event;
    char* speaker;
    char* keywords;
    };
    struct Talk t;
    talk("Foo", &t);
    printf("%s", t->title); // "Foo"
    RPC の時代に似てますね！
    （20年年以上のあいだ、形を変えてもやっていることは同じ）
    

    View Slide

29. 操作（Operations）
    • Query （データ問い合わせ）
    • Mutation （データ操作）
    • Subscription （データ更更新通知）
    

    View Slide

30. Query （データ問い合わせ）
    type UserQuery {
    search(name: String): [User]
    }
    schema {
    query: UserQuery
    }
    type Query {
    search(name: String): [User]
    }
    

    View Slide

31. Query （データ問い合わせ）
    Request
    query {
    search(name: "Foo") {
    name
    email
    }
    }
    Response
    { "data":
    {
    [{
    "name": "Bob",
    "email": "bob@example.com"
    }]
    }
    }
    

    View Slide

32. Mutation （データ操作）
    type UserMutation {
    update(name: String): Int
    }
    schema {
    muration: UserMutation
    }
    type Mutation {
    update(name: String): Int
    }
    

    View Slide

33. Mutation （データ操作）
    Request
    mutation {
    update(name: "Foo") {
    result
    }
    }
    Response
    { "data":
    {
    1
    }
    }
    

    View Slide

34. Subscription （データ更更新通知）
    

    View Slide

35. –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
    

    View Slide

36. –Facebook
    https://facebook.github.io/relay/
    “A JavaScript framework for building data-
    driven React applications”
    事例例: Relay
    

    View Slide

37. クライアント
    アプリケーション
    サーバ
    • 構⽂文解析
    • 結果返却
    GraphQL
    

    View Slide

38. クライアント
    アプリケーション
    サーバ
    GraphQL Proxy
    • 構⽂文解析
    • データ収集
    • 結果返却
    GraphQL REST
    

    View Slide

39. クライアント
    アプリケーション
    サーバ
    GraphQL Proxy
    • 構⽂文解析
    • データ収集
    • 結果返却
    GraphQL REST
    外部Webサービス
    DBサーバ
    

    View Slide

40. –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
    

    View Slide

41. https://netflix.github.io/falcor/documentation/network-diagram.png
    

    View Slide

42. Web API の未来
    • Facebook, Netflix, GitHub など⼤大⼿手が動き始めた
    • GitHub API は v3 が REST、v4 が GraphQL
    • REST が GraphQL に置き換わることは当⾯面ないと思う
    • だけど（ほぼ）5年年周期で変わるトレンドのはじまり
    • フォーマットは JSON
    • REST 原理理主義は卒業してもいい
    • きっと次に⽣生まれる何かが Web API の未来を担う
    

    View Slide

43. "phrase": {
    "text": "One more thing..."
    }
    

    View Slide

44. "CPAN": {
    "module": {
    "name": "GraphQL",
    "author": "SHIGETA"
    }
    }
    

    View Slide

45. "CPAN": {
    "module": {
    "name": "GraphQL",
    "author": "SHIGETA" => "ETJ"
    }
    }
    

    View Slide

46. "CPAN": {
    "module": {
    "name": "GraphQL::Tiny",
    "author": "SHIGETA"
    }
    }
    

    View Slide

47. #!/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" } }
    

    View Slide

48. "links":[{
    "rel": "self",
    "title": "Happy coding!",
    }, {
    "rel": "next",
    "title": "Any Question?",
    "href": "@comewalk"
    }]
    

    View Slide