Más contenido relacionado La actualidad más candente (20) Similar a Serverless days Stockholm - How to build a full-stack airline ticketing web app (20) Serverless days Stockholm - How to build a full-stack airline ticketing web app1. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
How to build a full stack
serverless airline booking application
Heitor Lessa
Principal Serverless Lead, Well-Architected
OCT24TH
@heitor_lessa
2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What we’re not going to cover
4. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
5. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
6. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS operational responsibility models
On-Premises Cloud
Less More
Compute Virtual Machine
Amazon EC2 AWS Elastic Beanstalk AWS LambdaFargate
Databases MySQL
MySQL on EC2 Amazon RDS MySQL Amazon Aurora Aurora Serverless
Storage Storage
Amazon S3
Messaging ESBs
Amazon MQ Amazon Kinesis
Analytics
Hadoop Hadoop on EC2 Amazon EMR Amazon Elasticsearch Service Amazon Athena
Amazon QLDB / DynamoDB
Amazon Event Bridge / SNS / SQS
7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
8. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Full-Stack Developer
Full-Stack Builder
Full-Stack Builder
Builder
Generate yours at dev.to/rly
9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
10. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Ideation & exploration
Mood BoardInspiration Colour
11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Initial sketches
12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Initial tech stack
API
14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Prototyping – CSS attempt #1
15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Prototyping – CSS attempt #2
16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Prototyping – CSS attempt #459092384
17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Prototyping – CSS attempt # 459092385
18. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Prototyping - Impressions
19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
20. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Authentication
OpenID provider
21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Authentication
Auth HOC
22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Tech stack - updated
API
23. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
24. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Data modelling & assumptions
flight data booking data loyalty data
25. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
API – GraphQL Types
Flight type Booking type Loyalty type
26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
API – GraphQL Transformer
GraphQL Transformers
27. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
API – GraphQL Transformer
GraphQL Transformers
28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
API – GraphQL Transformer
GraphQL Transformers
29. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
API: Front-end integration
Client library
30. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Client Amazon S3
Website
Quasar Vue.js
Front-end
Amazon
CloudFront
API
Vuex Modules
Catalog
STATE GETTERS
MUTATIONS ACTIONS
Booking
STATE GETTERS
MUTATIONS ACTIONS
Loyalty
STATE GETTERS
MUTATIONS ACTIONS
Profile
STATE GETTERS
MUTATIONS ACTIONS
API: Front-end integration
APIAPIAPI
31. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
API – GraphQL Server
AWS AppSync Amazon DynamoDB
Resolver
CRUD, put simply
Compute
Data source
32. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
33. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
34. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Payment – Stripe Elements
Elements via iframe
35. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Payment – Stripe JS
JS card tokenization
36. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Payment integration – back-end
Amazon API Gateway AWS Lambda
API
JS create charge
37. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Tech stack - updated
API
38. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
39. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Operations – CI/CD
Console
CI/CD for full stack Serverless apps and more
40. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Operations – Tracing
Distributed tracing
AWS X-Ray
41. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Operations – Custom Metrics
Monitoring
Amazon CloudWatch
42. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Operations – Structured logging
Structured logging
logging
43. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Operations – Correlation ID via Amplify client
Correlation ID
HTTP headers
44. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Perf test – Memory tuning plus switch to Regional API
Retrieve profile
P99 – 802ms to 237ms
Min – 246ms to 70ms
45. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
46. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Catalog – Fetching flights
AWS AppSync
API
Vuex Modules
Catalog
fetchFlight
Amazon DynamoDB
VTL
Catalog
Resolver
47. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Payment – Charges and refunds
API
Amazon API Gateway AWS Lambda
48. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Booking – Processing new bookings
AWS AppSync
API
Vuex Modules
Booking
processBooking
Process Booking
State Machine
AWS Step Functions
49. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Booking – State Machine
Process Booking
State Machine
AWS Step Functions
50. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Airline Web App – Front-end: Booking
AWS AppSync
API
Vuex Modules
Booking
listBookings
Booking
Amazon DynamoDB
Resolver
Amazon DynamoDB
VTL
Catalog
Resolver
VTL
51. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Airline Web App – Front-end: Loyalty
AWS AppSync
API
Vuex Modules
Loyalty
fetchLoyalty
AWS Lambda
Loyalty
Amazon
DynamoDB
Amazon
API Gateway
Resolver
52. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Airline Web App – Front-end: Loyalty
AWS AppSync
API
Vuex Modules
Loyalty
fetchLoyalty
Resolver
Amazon DynamoDB
Amazon SNS
AWS Lambda
Booking
Calculate Loyalty points
AWS Lambda
Loyalty
Amazon
DynamoDB
Amazon
API Gateway
BOOKING CONFIRMED
53. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Airline Web App – High-level architecture
Client
Amazon S3
Website
Amazon
CloudFront
AWS AppSync
API
Resolver
Amazon
DynamoDB
Amazon SNS
AWS
Step Functions
Booking
Quasar Vue.js
Front-end
Payment
SYNC
API
Amazon API Gateway AWS Lambda
Amazon DynamoDB
VTL
Catalog
AWS Lambda
Loyalty
Amazon
DynamoDB
Amazon
API Gateway
AWS LambdaAutomation & Monitoring
Amazon
CloudWatch
AWS
CloudFormation
AWS X-RayAWS CDKAWS Amplify
54. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Airline Web App – High-level architecture
Client
Amazon S3
Website
Amazon
CloudFront
AWS AppSync
API
Resolver
Amazon
DynamoDB
Amazon SNS
AWS
Step Functions
Booking
Quasar Vue.js
Front-end
Payment
SYNC
API
Amazon API Gateway AWS Lambda
Amazon DynamoDB
VTL
Catalog
AWS Lambda
Loyalty
Amazon
DynamoDB
Amazon
API Gateway
AWS LambdaAutomation & Monitoring
Amazon CloudWatchAWS CloudFormation AWS X-RayAWS Amplify
55. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
56. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
57. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Summary - Repository
aws-samples
aws-serverless-airline-booking
58. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Takeaway
Code is liability
Focus on business
Modularize
Amplify
Serverless
59. Thank you!
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Heitor Lessa
Principal Serverless Lead, Well-Architected
@heitor_lessa
60. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
61. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Resources
Ten Tips And Tricks for
Improving Your GraphQL API
with AWS AppSync
(MOB401)
Authentication &
Authorization in GraphQL
with AWS AppSync
(MOB402)
The Future of Enterprise
Applications is Serverless
(ENT314-R1)
Serverless Architectural
Patterns and Best Practices
(ARC305-R2)