リアルタイム革命/The Revolution of Real-time WebApps

iOSDC Japan 2018のトラックCでお話させていただいた資料です。
なお、セッションではデモを行いましたがその動画ならびに作成したアプリのURLは割愛しています。代わりにアプリのソースコードへのリンクを載せています。

Transcript

1. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Keisuke Nishitani, Specialist SA, AWS Japan K.K 31 Aug, 2018 ٔ،ٕة؎يꬠㄏ - Building real-time app with GraphQL and AWS AppSync -
2. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Who am I ? Keisuke Nishitani Specialist Solutions Architect Amazon Web Service Japan K.K @Keisuke69 Keisuke69 Keisuke69 Keisuke69 Keisuke69x
3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ֶׁ׵ְ: ٔ،ٕة؎ي鸐⥋הכ
4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ٔ،ٕة؎ي鸐⥋הכ ؙٓ؎،ٝزה؟٦غ٦ָ㶷㖈׃׋הֹח؟٦غ٦⩎ד涪 欰׃׋չ⡦ַպָؙٓ؎،ٝز⩎פהչּׅחպؿ؍٦س غحׁؙ׸׷״ֲז鸐⥋Ⳣ椚ךֿה ؙٓ؎،ٝزـٓؐؠծط؎ذ؍ـ،فٔ ⡦ַ⚺חر٦ةך刿倜
5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ٔ،ٕة؎ي鸐⥋ךⰩ㘗⢽ ثٍحز وٕثفٖ؎َ٦؜٦ي تحءُن٦س ،ٓ٦ز ِ٦ؠ꟦דךر٦ةず劍
6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ״ֻ֮׷㹋鄲ػة٦ٝ 1. Polling 2. Long Polling 3. Serve-Sent Events 4. WebSocket
7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Polling 〢ֹ葺ֹ儗➿ך䩛岀 ؙٓ؎،ٝزָ㹀劍涸חؙٔؒأز׾涪遤׃ر٦ةך㢌刿ָזְַ׾ثؑحؙ • ♧殢ءٝفٕז㹋鄲כJS׾⢪׏׋㹀劍涸זل٦آٔٗ٦س • Ajax涫㜥⟃꣬כAPIפךPollingָ⚺崧 • ءٝفַٕאأذ٦زٖأ ٔ،ٕة؎ي䚍כه٦ؚٔٝ꟦ꥫ⣛㶷 • 㹋ךהֿ׹ٔ،ٕة؎يדכזְ ⸬桦涸דכזְ • 刿倜ָזֻג׮،ؙإأָ涪欰ׅ׷ • 刿倜ָ걼籕דזְ㜥さװ✮庠♶〳腉ז㜥さ 刿倜ָ걼籕ֺׅ׷ה؟٦غ٦頾蚚ָ넝ת׶ָ׍ • ٓ٦آأ؛٦ٕחז׷הٖ؎ذٝءך㉏겗׮⳿גֻ׷
8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Long Polling ְ׻ײ׷Comet ؟٦غ٦ָ「ֽ《׏׋ؙٔؒأزח㼎ׅ׷ٖأهٝأ׾鹼䒀ׇׁ׷ה ְֲ鷞鯄ך涪䟝 • ر٦ةָ涪欰ׅ׷תדٖأهٝأ׾⥂殅׃ծ涪欰׃׋׵ٖأهٝأׅ׷ ٔ،ٕة؎ي䚍כPolling״׶כ넝ְ 瀉儗꟦ַא넝걼䏝כ蕱䩛 • ➬穈׫♳ծٖأهٝأ䖓חؙٓ؎،ٝزַ׵ךⱄؙٔؒأزָ䗳銲ז׋׭
9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Server-Sent Events (SSE) ؟٦غ٦⩎ַ׵ر٦ة涪欰ך׋ןחPushׅ׷ • Chunkر٦ةה׃גⳢ椚ׅ׷ֿהד㹋植 • ر٦ةכٖأهٝأך♧鿇זךד鸐⥋׮笝䭯ׁ׸׷ • ؟٦غ⩎ַ׵鸐⥋ָⴖ倖ׁ׸זְ • Cometה殯ז׶ⱄ䱸竲؝أز׮⡚ְ ٔ،ٕة؎ي䚍ָ넝ְ ؙٓ؎،ٝز⩎ַ׵כر٦ة׾鷏׸זְ • ؟٦غ٦ַ׵ؙٓ؎،ٝزפך⽃♧倯ぢ鸐⥋
10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. WebSocket 植儗挿דך劤ㄏה鎉ִ׷ ⿽倯ぢ鸐⥋ך׋׭ח瘻㹀ׁ׸׋HTTPהכⴽך鋉呓 • 傀㶷ך鸐⥋堣㐻׾鸐麓דֹזְ〳腉䚍 • قحت׮鯪ꆀד؟٦غ٦ך頾蚚׮⡚ְ ٔ،ٕة؎ي䚍ָ넝ְ Node.js + Socket.ioָًآٍ٦ • Swift欽ךؙٓ؎،ٝز׮䲿⣘ׁ׸גְ׷ • Socket.ioכWebSocketꬊ㼎䘔橆㞮ך㜥さכLong Pollingחⴖ׶剏ִגؿؓ٦ ٕغحؙ
11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. HTTP/2 ؟٦غ٦فحءُ HTTPך倜鋉呓 • 剑㣐ך暴䗙כ1אך؝طؙءّٝⰻדず儗ח⚛遤׃ג醱侧ךؙٔؒ أز/ٖأهٝأ׾Ⳣ椚 • أزٔ٦يהأزٔ٦ي㢳ꅾ⻉ ؙٔؒأزׁ׸גְזְ؝ٝذٝخ׾؟٦غ٦ָؙٓ؎،ٝز ח鷏⥋ gRPCכֿךHTTP/2ך暴䗙׾剑㣐ꣲח崞ַ׃׋➬穈׫ 如ך劤ㄏ…?
12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ֿֿתדכ⚺חفٗز؝ٕך鑧
13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ➙傈ך劤겗
14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL
15. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQLהכ API 欽ךؙؒٔ鎉铂 • 㘗ءأذيח׮הבְ׋ؙؒٔ㹋遤ך׋׭ך؟٦غ٦⩎ٓٝة ؎ي ؙٓ؎،ٝزָ؟٦غ٦ַ׵ر٦ة׾《䖤ծ㢌刿ծ飑铣דֹ׷ ״ֲחׅ׷׋׭ךر٦ة鎉铂 GraphQLؙؒٔ • ؙٓ؎،ٝزָٖأهٝأך䕎䒭׾䭷㹀 • ؙٓ؎،ٝزכ䗳銲זر٦ةך׫׾䗳銲ז䕎䒭ד撑⠓〳腉
16. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQLהכ { "id": "1", "name": "Get Milk", “priority": "1" }, { "id": "2", "name": "Go to gym", "priority": "5" },… type Query { getTodos: [Todo] } type Todo { id: ID! name: String description: String priority: Int duedate: String } query { getTodos { id name priority } } ،فٔךأؗ٦وה ٌرٕر٦ة ؙٓ؎،ٝزָ䗳銲ז ׮ך׌ֽ׾ؙٔؒأز ؙٔؒأز׃׋ر٦ة ׌ָֽ鵤ׁ׸׷
17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. REST APIה嫰鯰׃ג REST APIכؙٔؒأزָ㢳ֻז׶ָ׍ • ل٦آ׾邌爙ׅ׷ךח⡦⦐׮ API ׾〨ַזֽ׸לז׵זְ REST APIכٖأهٝأח♶銲זر٦ةָろת׸׷ API ➬圫ךسًُؗٝز盖椚ָ㣐㢌
18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL Subscription
19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL Subscription קרٔ،ٕة؎يדךر٦ة飑铣 Mutation׾زٔؖ٦ח׃׋؎كٝزك٦أ • ؟٦غ٦؟؎سך㢌刿׾ؙٓ؎،ٝز⩎ד「ֽ《׸׷ mutation addPost( id:123 title:”New post!” author:”Nadia”){ id title author } data: [{ id:123, title:”New Post!” author:”Nadia” }]
20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. أؗ٦و㹀纏 type Subscription { addedPost: Post @aws_subscribe(mutations: ["addPost"]) deletedPost: Post @aws_subscribe(mutations: ["deletePost"]) } type Mutation { addPost(id: ID! author: String! title: String content: String): Post! deletePost(id: ID!): Post! } subscription NewPostSub { addedPost { __typename version title content author url } }
21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL㹋遤橆㞮 GraphQLכֻ֮תדر٦ةח㼎ׅ׷ؙؒٔװ乼⡲ך؎ٝة٦ؿؑ٦أ➬圫 • ֻ֮תדؙؒٔ鎉铂ה׃גך➬圫 • 䔲搫׉ְֲֲせ⵸ך醡ㅷծاؿزؐؑ،ծ؟٦ؽأָ֮׷׻ֽדכזְ • SQLָⰧ⡤涸ז醡ㅷדכזֻծRDBMS瘝ךر٦ةك٦أך㉏ְさ׻ׇ鎉铂ה׃גⵃ欽ׁ׸ גְ׷ךח鵚ְ • GraphQLָ䪔ֲر٦ةךأزٖ٦آחאְג׮暴ח鋉㹀ׁ׸גְזְ GraphQL׾鍑ꅸ׃גر٦ة׾鵤ׅ؟٦غ٦ָ䗳銲 ؟٦غ٦׾㹋鄲ׅ׷׋׭ךٓ؎ـָٓٔ圫ղז鎉铂ד㹋鄲٥ⰕꟚׁ׸גְ׷ • ׉׸׵׾崞欽׃גؙؒٔⰻ㺁׾׮הח׃׋ر٦ةإحزפך㉏ְさ׻ׇⳢ椚׾㹋鄲ׅ׷ 荈⵸㹋鄲׌ה׉׸ז׶ח㣐㢌 • ⽃秪ח鏣鎘ֶ״ן㹋鄲ח儗꟦ַַָ׷ • أ؛٦ٕ،ؐزך㼎䘔זו؎ٝؿٓךֶ㸚׶׮铩ַָ׃זְהְֽזְ
22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS AppSync
23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS AppSync ؿٕوط٦آسזGraphQL ؟٦ؽأ • ּׅחGraphQL׾ⵃ欽〳腉 ٔ،ٕة؎ي堣腉הؔؿٓ؎ٝ堣腉 • Ⱏ剣ر٦ة׾ٔ،ٕة؎يח剑倜⻉ • ؔؿٓ؎ٝ儗ךر٦ة刿倜הؔٝٓ؎ٝ儗ךؙٓؐسפךず劍 醱侧ךر٦ةا٦أ׾؟ه٦ز • DynamoDB / Elastic Search / Lambda • Lambdaָ⢪ִ׷ךד㹋颵⡦ד׮דֹ׷կ㢩鿇API׮OK
24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ِ٦أ؛٦أ ٔ،ٕة؎ي • 剑倜ך䞔㜠׾ؐؓحثׅ׷تحءُن٦س • קרٔ،ٕة؎يדر٦ة׾刿倜 ؝ٓنٖ٦ءّٝ • 醱侧ِ٦ؠ٦ָⰟず箟꧊׾遤ֲ،فٔ؛٦ءّٝ • سًُؗٝزծ歗⫷ծذؗأزًحإ٦آזוծׁתׂ תז؝ٝذٝخة؎ف׾荈⹛刿倜 ا٦ءًٍٕر؍، • ا٦ءًٍٕر؍،װثٍحز • 醱侧ِ٦ؠ٦꟦דךًحإ٦آؚٝ盖椚׾؟ه٦ز • ؔؿٓ؎ٝ儗ד׮،فٔ؛٦ءّٝ׾乼⡲דֹծⱄ䱸竲 儗ח荈⹛ Sync
25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AppSyncך؝ٝإفز AWS App Sync Client • 钠鏾ծؔؿٓ؎ٝٗآحؙזו׾ろ׿׌Client Data Source • DynamoDB / Elasticsearch / Lambda Identity • GraphQL Proxy פךؙٔؒأزך钠鏾 GraphQL Proxy • ؙٔؒأزךوحؾؚٝծ؝ٝؿؙٔزךعٝسؚٔٝծ،ؙإأ؝ٝزٗ٦ٕ Operation • Query / Mutation / Subscription זו GraphQL ךؔلٖ٦ءّٝ Action • GraphQL ַ׵ Subscriber פך鸐濼 Resolver • ؙٔؒأز / ٖأهٝأךⳢ椚׾鎸鶢ׅ׷ꟼ侧
26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AppSync Overview AWS AppSync Amazon DynamoDB AWS Lambda Elasticsearch subscriptions /graphql Resolvers DataSources
27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon DynamoDBהAmazon Elasticsearch Service Amazon DynamoDB ElasticSearch /addPost /searchPosts ر٦ةا٦أ׾穈׫さ׻ׇ׷ֿהד넝䏝ז嗚稊ח׮㼎䘔〳腉կ ؗ٦ٙ٦س嗚稊ծؿ؋آ٦嗚稊ծ㖑椚瑞꟦嗚稊ծe.t.c
28. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Lambdaה3rdPartyAPI /searchPosts 㢩鿇BQJ -BNCEB׾%BUB4PVSDFה׃ג䪔ִ׷׋׭ծז׿ד׮דֹ׷ 㢩鿇ך8FC
    "1*׾〨ֻֿה׮〳腉
29. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AppSyncחֶֽ׷GraphQL Subscription Mutationח㼎ׅ׷ٖأهٝأה׃גㄎן⳿ׁ׸׷ • את׶App Syncהאזָ׷֮׵ײ׷ر٦ةا٦أָٔ،ٕة؎ ي鸐⥋דⵃ欽〳腉חז׷ • GraphQLךأؗ٦و㹀纏ד㹑鎉 Subscriptionך؝طؙءّٝ盖椚כAppSync client SDKח ״׏ג荈⹛涸ח遤׻׸׷ • ؙٓ؎،ٝزה؟٦ؽأ꟦ךفٗز؝ٕה׃גכMQTT over WebSocketָ⢪׻׸׷
30. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AppSync Overview AWS AppSync Amazon DynamoDB AWS Lambda Elasticsearch subscriptions /graphql Resolvers DataSources
31. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify
32. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify • ؿٗٝزؒٝسֶ״ןٌغ؎ٕꟚ涪罏ぢֽךؔ٦فٝ ا٦أךJavaScriptٓ؎ـٓٔ • AWSך؟٦ؽأ׾⢪׏ג㹋鄲ׅ׷ꥷח״ֻⵃ欽ׁ׸׷ة أؙ׾،فٔ؛٦ءّٝח知⽃ח穈׫鴥׭׷ • https://github.com/aws/aws-amplify • ؎ٝأز٦ٕ $ npm install aws-amplify $ npm install aws-amplify-react
33. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ⚺銲זJavaScriptؿٖ٦يٙ٦ؙ׾؟ه٦ز React Angular Vue.js (soon)
34. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplifyדדֹ׷ֿה Auth • Amazon Cognito User Pool׾ⵃ欽׃׋♧菙涸ז؟؎ٝ؎ٝח䗳銲זⳢ椚؟؎ٝ ؎ٝծ؟؎ٝ،حفծػأٙ٦س䘌׸ • MFA Analytics • ،فٔךⴓ匿׾湡涸ה׃׋Amazon Pinpointפךر٦ة鷏⥋ • ؕأةي㾩䚍⦼װؕأةيًزؙٔأח׮㼎䘔 API • Amazon API GatewayפךؙٔؒأزⳢ椚 • AWS Signature Version 4׾欽ְ׋ؙٔؒأزפך縭せ
35. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplifyדדֹ׷ֿה GraphQLؙٓ؎،ٝز • AWS AppSync׮׃ֻכ׉ך➭ךGraphQL؟٦غ׾ⵃ欽ׅ׷ꥷךؙٓ؎،ٝز Storage • Amazon S3ח㼎ׅ׷ِ٦ؠ؝ٝذٝخך،حفٗ٦سծتؐٝٗ٦سהְ׏׋ 堣腉ךءٝفٕזㄎן⳿׃ • Public/Protected/Privateך3珏겲ך،ؙإأٖكٕך盖椚 Push鸐濼 • Amazon Pinpoint׾欽ְ׋ة٦؜ذ؍ֶؚٝ״ןٍؗٝل٦ٝفحءُ
36. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplifyדדֹ׷ֿה ؎ٝةؙٓءّٝ • Amazon Lex׾ⵃ欽׃׋堣唒㷕统׾ك٦أה׃׋⠓鑧㘗نحزך⡲䧭 PubSub • AWS IoT׮׃ֻכ♧菙涸זMQTT׾欽ְ׋PubSubך㹋鄲 Caching • ر٦ةأز،׾欽ְ׋♧菙涸זLRUٍؗحءُ堣圓ך㹋鄲 㕂ꥷ⻉㼎䘔
37. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Demo
38. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ،٦ؗذؙثٍ
39. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. תה׭ Polling ։ WebSocketפה竲ֻٔ،ٕة؎ي鸐⥋ך娖〷 • 㛇劤涸חفٗز؝ٕٖكٕך鑧 GraphQLהGraphQL Subscription • API欽ךؙؒٔ鎉铂ד֮׷GraphQL • ؎كٝزك٦أךٔ،ٕة؎يⳢ椚׾㹋植ׅ׷׋׭ךGraphQL Subscription • GraphQLכ׋׌ך➬圫 • RESTח➿׻׷ַ׮濼׸זְ GraphQL׾⢪׏׋ٔ،ٕة؎يז،فٔ׾知⽃חꟚ涪דֹ׷AWS AppSync • ؿٕوط٦آسזךד؟٦غ٦ךإحز،حفזו♶銲דأ؛٦ٓـٕ
40. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
41. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Appendix AWS AppSync Developer Guide https://docs.aws.amazon.com/appsync/latest/devguide/welcome.html AWS Amplify https://aws-amplify.github.io/ GraphQLⰕ䒭 https://graphql.org/ Demoד⢪欽׃׋،فٔ https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular
42. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. "84
    %FW%BZ 5PLZP
    
    Ꟛ⪵寸㹀 ⯓遤歍׃鴥׫㹋倵⚥ "84
    %FW%BZ כծ،فٔ؛٦ءّٝꟚ涪׾遤ֲركٗحػ٦ך涺圫ך׋׭ךծؚٗ٦غٕ ذؙظٗآ٦؎كٝزדׅկ،فٔꟚ涪חꟼ鸬ׅ׷"84ך㹋騧涸ז䞔㜠כ׮׍׹׿ծ㕂ⰻ 㢩ך✲⢽׾鸐ׄ׋كأزفؙٓذ؍أ׾ծذؙصٕؕإحءّٝծعٝؤؔٝծعحؕا ٝծٙ٦ؙءّحفծٓ؎زصؚٝز٦ؙזו圫ղז䕎דֶ㾈ֽ׃תׅկ 䎃 剢 傈 剢
    ։ 剢 傈 ꆃ ،وبٝ ؐؑـ ؟٦ؽأ آٍػٝ 匌❨٥湡랲 أزٔ٦ىؚٝ⚥竰׮㹋倵✮㹀דׅ ⯓遤涫ꐮ갥ְ׋倯חכծ姻䒭歍鴥Ꟛ㨣儗חծְ׍傍ֻ ׀涫ꐮ갥ֽ׷״ֲ׀鸬窃׾ְ׋׃תׅկ IUUQTBN[OUPEFWEBZ DEV DAY "84%FW "84%FW%BZ
43. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS׾⢪׏ג،فٔꟚ涪׾ׅ׷  
      㼰➂侧ד؝٦س׾剅ְ׋׶ծ׮ֻ׮ֻ׃׋׶ծٌـفٗ׃׋׶ծ㹋ꥷח䩛׾ ⹛ַ׃׋׶ https://meguro-dev.connpass.com/