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,877