In this presentation we will dive into the details of how AWS AppSync works and we will challenge Murphy's law by creating a demo application for organizing the agenda of a conference. After this demo you should be convinced of how easy it is to set up and build a native mobile / web app with Android, JavaScript and React Native without sacrificing user experience even if your application loses internet connection. We'll wrap things up by discussing monitoring and deployment of an AWS AppSync application with AWS CloudFormation, serverless framework & Terraform.

1. Building Real-Time Serverless
Back Ends with AWS AppSync
Meetup
Monday, November 26, 2018

2. Agenda
• 18:00: Welcome with food (pizza) & drinks
• 18:30: Start presentation + demo
• 20:00: Drinks & further discussion

3. Serverless Belgium

4. Serverless Belgium
Server-less is more …
“We believe that in order to face the challenges that
current applications/architectures entail we need to
abstract the deployment platform”

5. Serverless Belgium
Server-less is more …
• Research
• Share
• Meetups
https://www.meetup.com/Serverless-Belgium
• Presentations
• ...

7. Serverless Belgium
Server-less is more …
• Want to help?
• Writing articles (blog)
• Ideas/speakers/presenting…
• Prepare workshops
• Ad-hoc experiments
• ...

8. Serverless

9. Serverless
Why?
Source: https://www.capgemini.com/be-en/service/technovision-2017

10. Serverless
Why?
• Infrastructure evolution
• Hardware hosted
• Renting hardware
• IaaS
• PaaS
• CaaS

11. Serverless
Why?
Invisible infrastructure
“The end-state of infrastructure as we currently know it,
using virtualization, grid and automated management technologies
to deliver infrastructural services”

12. Demo React
Amplify
Apollo

13. Demo
Conference agenda
https://bit.ly/2P0pCKI

14. AWS AppSync
Introduction

15. AWS AppSync
What?
• Application development service
• Data-driven (mobile/web) applications
• Serverless back-end

16. AWS AppSync
What?
• Data-driven
• Handles data management tasks
• Online/offline data access
• Data synchronization (real time)
• Data manipulation across multiple data sources

17. AWS AppSync
How?
• Managed GraphQL service
• Built on AWS Lambda’s
• Integration with AWS (datasources)

18. AWS AppSync
How?
• Frontend

19. AWS AppSync
How?
Frontend Backend Database

20. React

21. React/React.js/ReactJS
Intro
• A JavaScript library for building user interfaces
• Maintained by Facebook
• Single-page or mobile applications
• Component-based
• Additional libraries for state management (ex. Redux), routing &
interaction with an API

22. React/React.js/ReactJS
Intro
• Example
• Result
<div id="myReactApp"></div>
<script type="text/babel">
class Greeter extends React.Component {
render() {
return <h1> {
this.props.greeting}</h1>
}
}
ReactDOM.render(<Greeter greeting="Hello World!">,
.getElementById('myReactApp'));
</script>
<div id="myReactApp">
<h1>Hello World!</h1>
</div>

23. React/React.js/ReactJS
Intro
• Features
• One-way data binding with props
• Stateful components
• Virtual DOM
• Lifecycle methods
• JSX (JavaScript eXtension)
• Nested elements
• Attributes
• JavaScript expressions

24. React/React.js/ReactJS
Intro
• React Native enables native Android, iOS development with React

25. GraphQL

26. GraphQL
Intro
• History
• Developed by Facebook in 2012
• 2015: public release
• 2018: newly-established GraphQL foundation (Linux Foundation)
• Open-source data query & manipulation language for API’s
• Compared & contrasted with REST and other web service
architectures

27. GraphQL
Intro
• Allows clients to define the structure of the data required, and exactly
the same structure of the data is returned from the server
• GraphQL supports reading, writing (mutating) and subscribing to
changes to data (realtime updates)
• GraphQL clients
• Apollo Client
• Relay
• GraphQL servers
• Available for multiple languages: JavaScript, Java, Python, Ruby, Java, C#,
Scala, Go, Elixir, Erlang, PHP, R, Clojure,…

28. GraphQL
Intro
• GraphQL schema
• Defining types and fields
• Defining functions
type Query {
me: User
}
type User {
id: ID
name: String
}
function Query_me(request) {
return request.auth.user;
}
function User_name(user) {
return user.getName();
}
schema {
query: Query
mutation: Mutation
subscription: Subscription
}

29. GraphQL
Intro
• GraphQL queries
• Result
{
me {
name
}
}
{
"me": {
"name": "Luke Skywalker"
}
}

30. AWS AppSync
Other

31. AWS AppSync
Monitoring
• AWS Cloudwatch
• Dashboard

32. AWS AppSync
Testing
• End-to-end testing
• Selenium
• Mocking
• Apollo MockedProvider (mock client calls to api)

33. AWS AppSync
Offline
• Built in caching + conflict resolution (lambda)
• Actions
• Disable internet connection
• Do some operations (create new event)
• Enable internet connection

34. AWS AppSync
Development
• Cloud 9 (IDE = js development) >> react UI
• Cloudformation
• Online designer
• Manueel yml or json aanpassen (documentation)
• Lambda's development machine
• SAM: CLI for lambda’s (no AWS appsync)
• SAM ~ serverless framework
• Serverless framework
• Debugging (live on AWS)

35. AWS AppSync
Development
• AWS Amplify
• JavaScript library
• Declarative and easy-to-use interface across different categories of cloud
operations
• Features
• Authentication Analytics, API, GraphQL client, Storage, Push Notifications,
Interaction, PubSub, Internationalization, Caching

36. AWS AppSync
Resources
• https://github.com/LewisMcReu/appsync-demo