As serverless computing grows in popularity, finding how to start can be a challenge. In this talk, we picked a sample “airline ticketing" web app to demonstrate the process of building a full stack serverless application. We’ll share tips and tricks for building your idea, creating a prototype and deploying quickly and safely in production. You’ll also learn how Vue.js applications can integrate with AWS AppSync (for GraphQL backends), Amazon API Gateway (for REST APIs), AWS Lambda functions, Amazon DynamoDB tables, Amazon Cognito (for user management), AWS Step Functions for implementing Booking using Saga pattern, using AWS Amplify to seamlessly provision and manage your cloud backend.

1. © 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)