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), 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
Specialist Solutions Architect
B A R 5
S T O C K H O L M
MARCH28TH
@heitor_lessa
lessa@amazon.co.uk

2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What we’re not going to cover

3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Just before we really start…
Build on Serverless Season 2 starts on April 24th
aws.amazon.com/twitch

4. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

5. © 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

6. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Initial ideation & exploration
Mood BoardInspiration Colour

8. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Initial sketches

9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Initial prototype

10. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Initial Tech Stack
API

12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Initial Tech Stack
API

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.
Initial Tech Stack
API

15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

16. © 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 Amazon Aurora Serverless Amazon DynamoDB
Storage Storage
Amazon S3
Messaging ESBs
Amazon MQ Amazon Kinesis Amazon SNS / SQS
Analytics
Hadoop Hadoop on EC2 Amazon EMR Amazon Elasticsearch Service Amazon Athena

17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync – Data-driven APIs
Schema Data Sources Resolvers

18. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync – Data-driven APIs
GraphQL
Schema Data Sources Resolvers

19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync – Data-driven APIs
GraphQL
Schema Data Sources Resolvers
AWS Lambda Amazon Elasticsearch
Service
HTTP Endpoint

20. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync – Data-driven APIs
GraphQL
Schema Data Sources Resolvers
AWS Lambda Amazon Elasticsearch
Service
HTTP Endpoint
AWS IAM OpenID Connect

21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify – Toolchain
CLI

22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify – Toolchain
GraphQL Transformers

23. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify – Toolchain
Console
CI/CD for Front-end/Back-end and more

24. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Quiz
What’s the number of airports available worldwide?

25. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Airline Web App – Front-end modularization
Client Amazon S3
Website
Quasar Vue.js
Front-end
Amazon
CloudFront
AWS AppSync
API
Vuex Modules
Catalog
STATE GETTERS
MUTATIONS ACTIONS
Booking
STATE GETTERS
MUTATIONS ACTIONS
Loyalty
STATE GETTERS
MUTATIONS ACTIONS
Profile
STATE GETTERS
MUTATIONS ACTIONS

26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Airline Web App – Front-end: Catalog
AWS AppSync
API
Vuex Modules
Catalog
fetchFlight
Amazon DynamoDB
VTL
Catalog
Resolver

27. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Airline Web App – Front-end: Catalog
AWS AppSync
API
Vuex Modules
Catalog
fetchFlight
Amazon DynamoDB
VTL
Catalog
Resolver

28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Airline Web App – Front-end: Booking
AWS AppSync
API
Vuex Modules
Booking
createBooking
AWS Lambda
Booking
Amazon DynamoDB AWS LambdaAmazon API Gateway
API
Payment
Pipeline resolver
12

29. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Airline Web App – Front-end: Booking
AWS AppSync
API
Vuex Modules
Booking
fetchBooking
AWS Lambda
Booking
Amazon DynamoDB
Resolver
Amazon DynamoDB
VTL
Catalog
Resolver

30. © 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
Resolver

31. © 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
Resolver
Amazon DynamoDB
Amazon SNS
AWS Lambda
Booking ASYNC
Loyalty points upon Booking

32. © 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 Lambda
Booking
Quasar Vue.js
Front-end
Payment
SYNC
API
Amazon API Gateway AWS Lambda
ASYNC
Amazon DynamoDB
VTL
Catalog
Amazon DynamoDB
VTL
Preferences
AWS Lambda
Loyalty
Amazon DynamoDB

33. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

34. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What I didn’t tell you - CSS

35. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What I didn’t tell you - CSS

36. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What I didn’t tell you - CSS

37. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What I didn’t tell you - Testing
Picture from: hackernoon.com/trust-your-pipeline-automatically-testing-an-end-to-end-java-application-4a33232180c3

38. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What I didn’t tell you – my own AWS learnings

39. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What I didn’t tell you – my own AWS learnings

40. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What I didn’t tell you – my own AWS learnings
Multi-Auth
Feature velocity
Customization Deployment
Pipeline resolver
Custom resolvers
Many:Many
MOB401

41. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

42. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What I didn’t tell you - Twitch
Build on Serverless Season 2 starts on April 24th
aws.amazon.com/twitch

43. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Takeaway
Code is liability
Focus on business
Modularize
Amplify
Serverless

44. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

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

46. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Reviewing and Planning Serverless Architectures
Design Principles
Scenarios
Well-Architected Pillars
Serverless
Applications
Lens
bit.ly/serverless_lens

47. Thank you!
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Heitor Lessa
Specialist Solutions Architect
@heitor_lessa