Being cloud-native
with react-native
Build faster with AWS Amplify
bene@theodo.co.uk
Ben Ellerby


@EllerbyBen


@EllerbyBen
What is this Serverless thing?
-
Architectural movement
- Developers send application code which is run by the cloud provider in isolated containers abstracted from the developer.
- Use 3rd party services used to manage backend logic and state (e.g. Firebase, Cognito)
- A framework with the same name

@EllerbyBen
Why Serverless?
💰 Cost reduction
👷♂️ #NoOps
💻 Developers focus on delivering business value
📈 More scalable
🌳 Greener

@EllerbyBen
Not just Lambda



Lambda
S3
Dynamo

API Gateway
Compute
Storage
Data
API Proxy

Cognito
Auth

SQS
Queue

EventBridge
Event Bus
Power and Flexibility








@EllerbyBen
How to manage... IaC?

@EllerbyBen





Amplify

@EllerbyBen
Declarative Abstraction









@EllerbyBen
Declarative Interface

AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. AWS Amplify goes well with any JavaScript based frontend workflow, and React Native for mobile developers.

@EllerbyBen
CLI


@EllerbyBen
Client Library (SDK)
Cross-Platform
Components
Hosting and Deployment
Getting Started

$ yarn add aws-amplify
$ yarn add aws-amplify-react-native
$ react-native link
Configure Amplify


Configure Amplify

import Amplify from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);
Authentication

@EllerbyBen
Cognito

@EllerbyBen

Simple and Secure User Sign-Up, Sign-In, and Access Control
Add auth

$ amplify add auth
$ amplify push


@EllerbyBen
React-Native Auth

import { withAuthenticator } from 'aws-amplify-react-native';
export default withAuthenticator(App);

React-Native Auth





@EllerbyBen
API

@EllerbyBen

API

@EllerbyBen

App Sync
Lambda


API Gateway
Add an API

$ amplify add api
-> Please select from one of the below mentioned services
GraphQL
❯ REST


@EllerbyBen
REST API
Add an API

➜ myAmplifyProject git:(master) ✗ amplify add api
-> Please select from one of the below mentioned services REST
-> Provide a friendly name for your resource to be used as a label for this category in the project: testProject
-> Provide a path (e.g., /items) /items
-> Choose a Lambda source Create a new Lambda function
-> Provide a friendly name for your resource to be used as a label for this category in the project: listFunctionTest
-> Provide the AWS Lambda function name: listFunctionTest
-> Choose the function template that you want to use: Serverless express function (Integration with Amazon API Gateway)
-> Do you want to access other resources created in this project from your Lambda function? No
-> Do you want to edit the local lambda function now? Yes
Please edit the file in your editor: ~/project/src/index.js
-> Press enter to continue
Succesfully added the Lambda function locally
-> Restrict API access Yes
-> Who should have access? Authenticated users only
-> What kind of access do you want for Authenticated users? (Press <space> to select, <a> to toggle all, <i> to invert selection)
-> Do you want to add another path? No
Successfully added resource locally

Add an API

const awsServerlessExpress = require('aws-serverless-express');
const app = require('./app');
app.get('/items', function(req, res) {
res.json(req.apiGateway.event);
});
const server = awsServerlessExpress.createServer(app);
exports.handler = (event, context) => {
console.log(`EVENT: ${JSON.stringify(event)}`);
awsServerlessExpress.proxy(server, event, context);
};

Add an API

$ amplify push


@EllerbyBen
Add an API

// ...
import Amplify, { API } from 'aws-amplify';
Amplify.configure(amplify);
class App extends Component {
state = { apiResponse: null };
async getSample() {
const path = "/items";
const apiResponse = await API.get("theListApi" , path)
console.log('response:' + apiResponse);
this.setState({ apiResponse });
}
render() {
return (
<View>
<Button title="Send Request" onPress={this.getSample.bind(this)} />
<Text>Response: {this.state.apiResponse && JSON.stringify(this.state.apiResponse)}</Text>
</View>
);
}
}
export default withAuthenticator(App);
Amplify Mock

Local mock of all API calls and AppSync
As well as local Dynamo DB mock
$ amplify mock
Add Analytics

$ amplify add analytics
$ amplify push

Add Analytics

import { Analytics } from 'aws-amplify';
...
componentDidMount() {
Analytics.record('FIRST-EVENT-NAME');
}

Add Analytics



Restricted Regions
Add Analytics


Kinesis Stream

Add Analytics


import { Analytics, AWSKinesisProvider } from 'aws-amplify';
Analytics.addPluggable(new AWSKinesisProvider());
Analytics.record({
data: {
// The data blob to put into the record
},
partitionKey: 'myPartitionKey',
streamName: 'myKinesisStream'
}, 'AWSKinesis');
What else to add?
- Analytics
- GraphQL
- Storage (user uploads)
- Push Notifications
- Interactions (bots)
- PubSub
- Internationalization (lightweight)
- Cache
- Predictions (Rekognition, Polly, Translate, NLP)
- (XR)

@EllerbyBen
Amplify vs Serverless Framework / SAM
- Common patterns of usage are built into the CLI.
- Rather than having a deep understanding of all configuration of services like Cognito.
- Is this more for MVPs?

@EllerbyBen
Conclusion
- Serverless allows us to write more business value per line of code.
- AWS Amplify provides a clear layer of abstraction on top of many AWS services
- Combined you can build a complex cloud-enabled application with few lines of code

@EllerbyBen
- Fast, but less flexible than pure sls?

serverless-transformation

@EllerbyBen


serverless-transformation


@EllerbyBen


npm install -g sls-dev-tools





@EllerbyBen


Being cloud-native with react-native, build faster with AWS Amplify
By Ben Ellerby
Being cloud-native with react-native, build faster with AWS Amplify
- 1,970