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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

© 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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Polling 〢ֹ葺ֹ儗➿ך䩛岀 ؙٓ؎،ٝزָ㹀劍涸חؙٔؒأز׾涪遤׃ر٦ةך㢌刿ָזְַ׾ثؑحؙ • ♧殢ءٝفٕז㹋鄲כJS׾⢪׏׋㹀劍涸זل٦آٔٗ٦س • Ajax涫㜥⟃꣬כAPIפךPollingָ⚺崧 • ءٝفַٕאأذ٦زٖأ ٔ،ٕة؎ي䚍כه٦ؚٔٝ꟦ꥫ⣛㶷 • 㹋ךהֿ׹ٔ،ٕة؎يדכזְ ⸬桦涸דכזְ • 刿倜ָזֻג׮،ؙإأָ涪欰ׅ׷ • 刿倜ָ걼籕דזְ㜥さװ✮庠♶〳腉ז㜥さ刿倜ָ걼籕ֺׅ׷ה؟٦غ٦頾蚚ָ넝ת׶ָ׍ • ٓ٦آأ؛٦ٕחז׷הٖ؎ذٝءך㉏겗׮⳿גֻ׷

Slide 8

Slide 8 text

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Long Polling ְ׻ײ׷Comet ؟٦غ٦ָ「ֽ《׏׋ؙٔؒأزח㼎ׅ׷ٖأهٝأ׾鹼䒀ׇׁ׷ה ְֲ鷞鯄ך涪䟝 • ر٦ةָ涪欰ׅ׷תדٖأهٝأ׾⥂殅׃ծ涪欰׃׋׵ٖأهٝأׅ׷ ٔ،ٕة؎ي䚍כPolling״׶כ넝ְ 瀉儗꟦ַא넝걼䏝כ蕱䩛 • ➬穈׫♳ծٖأهٝأ䖓חؙٓ؎،ٝزַ׵ךⱄؙٔؒأزָ䗳銲ז׋׭

Slide 9

Slide 9 text

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Server-Sent Events (SSE) ؟٦غ٦⩎ַ׵ر٦ة涪欰ך׋ןחPushׅ׷ • Chunkر٦ةה׃גⳢ椚ׅ׷ֿהד㹋植 • ر٦ةכٖأهٝأך♧鿇זךד鸐⥋׮笝䭯ׁ׸׷ • ؟٦غ⩎ַ׵鸐⥋ָⴖ倖ׁ׸זְ • Cometה殯ז׶ⱄ䱸竲؝أز׮⡚ְ ٔ،ٕة؎ي䚍ָ넝ְ ؙٓ؎،ٝز⩎ַ׵כر٦ة׾鷏׸זְ • ؟٦غ٦ַ׵ؙٓ؎،ٝزפך⽃♧倯ぢ鸐⥋

Slide 10

Slide 10 text

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. WebSocket 植儗挿דך劤ㄏה鎉ִ׷ ⿽倯ぢ鸐⥋ך׋׭ח瘻㹀ׁ׸׋HTTPהכⴽך鋉呓 • 傀㶷ך鸐⥋堣㐻׾鸐麓דֹזְ〳腉䚍 • قحت׮鯪ꆀד؟٦غ٦ך頾蚚׮⡚ְ ٔ،ٕة؎ي䚍ָ넝ְ Node.js + Socket.ioָًآٍ٦ • Swift欽ךؙٓ؎،ٝز׮䲿⣘ׁ׸גְ׷ • Socket.ioכWebSocketꬊ㼎䘔橆㞮ך㜥さכLong Pollingחⴖ׶剏ִגؿؓ٦ ٕغحؙ

Slide 11

Slide 11 text

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. HTTP/2 ؟٦غ٦فحءُ HTTPך倜鋉呓 • 剑㣐ך暴䗙כ1אך؝طؙءّٝⰻדず儗ח⚛遤׃ג醱侧ךؙٔؒ أز/ٖأهٝأ׾Ⳣ椚 • أزٔ٦يהأزٔ٦ي㢳ꅾ⻉ ؙٔؒأزׁ׸גְזְ؝ٝذٝخ׾؟٦غ٦ָؙٓ؎،ٝز ח鷏⥋ gRPCכֿךHTTP/2ך暴䗙׾剑㣐ꣲח崞ַ׃׋➬穈׫ 如ך劤ㄏ…?

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQLהכ API 欽ךؙؒٔ鎉铂 • 㘗ءأذيח׮הבְ׋ؙؒٔ㹋遤ך׋׭ך؟٦غ٦⩎ٓٝة ؎ي ؙٓ؎،ٝزָ؟٦غ٦ַ׵ر٦ة׾《䖤ծ㢌刿ծ飑铣דֹ׷ ״ֲחׅ׷׋׭ךر٦ة鎉铂 GraphQLؙؒٔ • ؙٓ؎،ٝزָٖأهٝأך䕎䒭׾䭷㹀 • ؙٓ؎،ٝزכ䗳銲זر٦ةך׫׾䗳銲ז䕎䒭ד撑⠓〳腉

Slide 16

Slide 16 text

© 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 } } ،فٔךأؗ٦وה ٌرٕر٦ة ؙٓ؎،ٝزָ䗳銲ז ׮ך׌ֽ׾ؙٔؒأز ؙٔؒأز׃׋ر٦ة ׌ָֽ鵤ׁ׸׷

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

© 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” }]

Slide 20

Slide 20 text

© 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 } }

Slide 21

Slide 21 text

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL㹋遤橆㞮 GraphQLכֻ֮תדر٦ةח㼎ׅ׷ؙؒٔװ乼⡲ך؎ٝة٦ؿؑ٦أ➬圫 • ֻ֮תדؙؒٔ鎉铂ה׃גך➬圫 • 䔲搫׉ְֲֲせ⵸ך醡ㅷծاؿزؐؑ،ծ؟٦ؽأָ֮׷׻ֽדכזְ • SQLָⰧ⡤涸ז醡ㅷדכזֻծRDBMS瘝ךر٦ةك٦أך㉏ְさ׻ׇ鎉铂ה׃גⵃ欽ׁ׸ גְ׷ךח鵚ְ • GraphQLָ䪔ֲر٦ةךأزٖ٦آחאְג׮暴ח鋉㹀ׁ׸גְזְ GraphQL׾鍑ꅸ׃גر٦ة׾鵤ׅ؟٦غ٦ָ䗳銲 ؟٦غ٦׾㹋鄲ׅ׷׋׭ךٓ؎ـָٓٔ圫ղז鎉铂ד㹋鄲٥ⰕꟚׁ׸גְ׷ • ׉׸׵׾崞欽׃גؙؒٔⰻ㺁׾׮הח׃׋ر٦ةإحزפך㉏ְさ׻ׇⳢ椚׾㹋鄲ׅ׷ 荈⵸㹋鄲׌ה׉׸ז׶ח㣐㢌 • ⽃秪ח鏣鎘ֶ״ן㹋鄲ח儗꟦ַַָ׷ • أ؛٦ٕ،ؐزך㼎䘔זו؎ٝؿٓךֶ㸚׶׮铩ַָ׃זְהְֽזְ

Slide 22

Slide 22 text

Slide 23

Slide 23 text

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS AppSync ؿٕوط٦آسזGraphQL ؟٦ؽأ • ּׅחGraphQL׾ⵃ欽〳腉 ٔ،ٕة؎ي堣腉הؔؿٓ؎ٝ堣腉 • Ⱏ剣ر٦ة׾ٔ،ٕة؎يח剑倜⻉ • ؔؿٓ؎ٝ儗ךر٦ة刿倜הؔٝٓ؎ٝ儗ךؙٓؐسפךず劍醱侧ךر٦ةا٦أ׾؟ه٦ز • DynamoDB / Elastic Search / Lambda • Lambdaָ⢪ִ׷ךד㹋颵⡦ד׮דֹ׷կ㢩鿇API׮OK

Slide 24

Slide 24 text

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ِ٦أ؛٦أ ٔ،ٕة؎ي • 剑倜ך䞔㜠׾ؐؓحثׅ׷تحءُن٦س • קרٔ،ٕة؎يדر٦ة׾刿倜 ؝ٓنٖ٦ءّٝ • 醱侧ِ٦ؠ٦ָⰟず箟꧊׾遤ֲ،فٔ؛٦ءّٝ • سًُؗٝزծ歗⫷ծذؗأزًحإ٦آזוծׁתׂ תז؝ٝذٝخة؎ف׾荈⹛刿倜 ا٦ءًٍٕر؍، • ا٦ءًٍٕر؍،װثٍحز • 醱侧ِ٦ؠ٦꟦דךًحإ٦آؚٝ盖椚׾؟ه٦ز • ؔؿٓ؎ٝ儗ד׮،فٔ؛٦ءّٝ׾乼⡲דֹծⱄ䱸竲儗ח荈⹛ Sync

Slide 25

Slide 25 text

© 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 • ؙٔؒأز / ٖأهٝأךⳢ椚׾鎸鶢ׅ׷ꟼ侧

Slide 26

Slide 26 text

Slide 27

Slide 27 text

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon DynamoDBהAmazon Elasticsearch Service Amazon DynamoDB ElasticSearch /addPost /searchPosts ر٦ةا٦أ׾穈׫さ׻ׇ׷ֿהד넝䏝ז嗚稊ח׮㼎䘔〳腉կ ؗ٦ٙ٦س嗚稊ծؿ؋آ٦嗚稊ծ㖑椚瑞꟦嗚稊ծe.t.c

Slide 28

Slide 28 text

Slide 29

Slide 29 text

© 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ָ⢪׻׸׷

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

© 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

Slide 33

Slide 33 text

Slide 34

Slide 34 text

© 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׾欽ְ׋ؙٔؒأزפך縭せ

Slide 35

Slide 35 text

© 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׾欽ְ׋ة٦؜ذ؍ֶؚٝ״ןٍؗٝل٦ٝفحءُ

Slide 36

Slide 36 text

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplifyדדֹ׷ֿה ؎ٝةؙٓءّٝ • Amazon Lex׾ⵃ欽׃׋堣唒㷕统׾ك٦أה׃׋⠓鑧㘗نحزך⡲䧭 PubSub • AWS IoT׮׃ֻכ♧菙涸זMQTT׾欽ְ׋PubSubך㹋鄲 Caching • ر٦ةأز،׾欽ְ׋♧菙涸זLRUٍؗحءُ堣圓ך㹋鄲㕂ꥷ⻉㼎䘔

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

© 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 • ؿٕوط٦آسזךד؟٦غ٦ךإحز،حفזו♶銲דأ؛٦ٓـٕ

Slide 40

Slide 40 text

Slide 41

Slide 41 text

© 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

Slide 42

Slide 42 text

© 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