Make your applications faster by using

JavaScript SDK v3

Thank you

#BellevueJS

#AWS

#JavaScriptSDK

Trivikram Kamat

SDE, AWS JavaScript SDK team

@trivikram

@trivikr

What will we learn today?

  • What is AWS SDK for JavaScript

  • What's new in JS SDK v3

  • Examine a note taking application written in JS SDK v2

  • Improve it's performance while moving it to JS SDK v3

What is AWS SDK for JavaScript?

  • JavaScript API for AWS services

  • Helps you build libraries or apps in:

    • modern browsers

    • Node.js

    • Electron

    • mobile (ReactNative)

What's new in JS SDK v3?

  • Modularized packages

  • Better stack traces

  • Types from TypeScript

  • Middleware

Example application

Amazon DynamoDB

Is a key-value and document database that delivers single-digit millisecond performance at any scale

scan,

putItem,

getItem,

deleteItem,

updateItem

Amazon S3

Is an object storage service that offers industry-leading scalability, data availability, security, and performance.

putObject,

getObject,

deleteObject

If you want to build and play with this application on your machine, visit

aws-samples/aws-sdk-js-v3-workshop

on GitHub

Instructions are in README

Note

I've written some CloudFormation templates to build and deploy AWS resources which you don't need to know or worry about in this talk

import dynamoDB from "./libs/dynamoDB";
import { success, failure } from "./libs/response";

export async function main() {
  const params = {
    TableName: process.env.tableName
  };

  try {
    const result = await dynamoDB.scan(params).promise();
    // Return the matching list of items in response body
    return success(result.Items);
  } catch (e) {
    return failure({ status: false });
  }
}

list.ts

import AWS from "aws-sdk";

export default new AWS.DynamoDB();

libs/dynamoDB.ts

Lambda sizes on deployment

What if you want to reduce your package size in SDK v2 itself?

Just import the client instead of entire SDK!

import AWS from "aws-sdk";

export default new AWS.DynamoDB();

libs/dynamoDB.ts

import DynamoDB from "aws-sdk/clients/dynamodb";

export default new DynamoDB();

Lambda sizes on deployment

before:

after:

Hey Trivikram, we can reduce the bundle size in SDK v2 itself. What's so special with v3?

Let us see by trying v3!

import DynamoDB from "aws-sdk/clients/dynamodb";

export default new DynamoDB();

libs/dynamoDB.ts

import { DynamoDB } from "@aws-sdk/client-dynamodb-node";

export default new DynamoDB({});
import dynamoDB from "./libs/dynamoDB";
import { success, failure } from "./libs/response";

export async function main() {
  const params = {
    TableName: process.env.tableName
  };

  try {
    const result = await dynamoDB.scan(params).promise();
    // Return the matching list of items in response body
    return success(result.Items);
  } catch (e) {
    return failure({ status: false });
  }
}

list.ts

import dynamoDB from "./libs/dynamoDB";
import { success, failure } from "./libs/response";

export async function main() {
  const params = {
    TableName: process.env.tableName
  };

  try {
    const result = await dynamoDB.scan(params);
    // Return the matching list of items in response body
    return success(result.Items);
  } catch (e) {
    return failure({ status: false });
  }
}

Lambda sizes on deployment

before:

after:

That was so easy!

Yes, we can!

By just importing the client and the specific command required 😉

Can we reduce size further?

import { DynamoDB } from "@aws-sdk/client-dynamodb-node";

export default new DynamoDB({});

libs/dynamoDB.ts

import { DynamoDBClient } from "@aws-sdk/client-dynamodb-node";

export default new DynamoDBClient({});

list.ts

import dynamoDB from "./libs/dynamoDB";
import { success, failure } from "./libs/response";

export async function main() {
  const params = {
    TableName: process.env.tableName
  };

  try {
    const result = await dynamoDB.scan(params);
    // Return the matching list of items in response body
    return success(result.Items);
  } catch (e) {
    return failure({ status: false });
  }
}
import dynamoDB from "./libs/dynamoDB";
import { success, failure } from "./libs/response";
import { ScanCommand } from "@aws-sdk/client-dynamodb-node";

export async function main() {
  const params = {
    TableName: process.env.tableName
  };

  try {
    const result = await dynamoDBClient.send(new ScanCommand(params));
    // Return the matching list of items in response body
    return success(result.Items);
  } catch (e) {
    return failure({ status: false });
  }
}

Lambda sizes on deployment

before:

after:

Size reduction is good, but does it actually reflect with performance?

Let us measure lambda execution time!

How do we do it?

  • We get metrics by enabling Active tracing under AWS X-Ray for ListNotes lambda

  • The comparison is between original bundle which imports entire v2 (size ~470KB) with final one which imports client+command in v3 (size ~18KB)

cold start

entire v2 import

v3 client+command import

warm start

entire v2 import

v3 client+command import

Hey, these metrics are just for one invocation

How can we trust them?

You're right! Let's write a Cloudwatch event to analyze these metrics 

Note

  • cold start: A Cloudwatch event was written to trigger both lambdas every 20 mins and 18 values (in ms) for Duration of AWS::Lambda::Function were analyzed over 6 hours

  • warm start: Cloudwatch event was written to trigger both lambdas every minute and 50 values (in ms) for Duration of AWS::Lambda::Function were analyzed

Metrics from the experiment

cold start

warm start

Learnings

  • SDK v3 client+command import reduces size significantly in lambda!

  • In our example, we reduced lambda size from 470kB which import entire v2 SDK to 18kB which imports v3 SDK+command

  • Reduction in size is helpful for lambda cold start (duration reduces by ~40%), but not so much for warm starts (duration reduces only ~1%)

Can we reduce bundle size with SDK v3 in the frontend too?

Yes, we can! 😊

I'm glad you asked!

import { s3Client } from "./s3Client";
import { config } from "../config";

const deleteObject = async (fileName: string) =>
  s3Client
    .deleteObject({
      Key: fileName,
      Bucket: config.s3Bucket
    })
    .promise();

export { deleteObject };

deleteObject.ts

import AWS from "aws-sdk";
import { config } from "../config";

const s3Client = new AWS.S3({
  region: "us-west-2",
  credentials: new AWS.CognitoIdentityCredentials(
    {
      IdentityPoolId: config.IdentityPoolId
    },
    {
      region: "us-west-2"
    }
  )
});

export { s3Client };

libs/s3Client.ts

File sizes:
  344.77 KB  /2.0191bd07.chunk.js
  2.94 KB    /main.f878258f.chunk.js
  790 B      /runtime~main.e82a7b61.js

production build

What happens when you just import the client in v2 SDK?

import AWS from "aws-sdk";
import { config } from "../config";

const s3Client = new AWS.S3({
  region: "us-west-2",
  credentials: new AWS.CognitoIdentityCredentials(
    {
      IdentityPoolId: config.IdentityPoolId
    },
    {
      region: "us-west-2"
    }
  )
});

export { s3Client };

libs/s3Client.ts

import AWS from "aws-sdk/global";
import s3 from "aws-sdk/clients/s3";
import { config } from "../config";

const s3Client = new s3({
  region: "us-west-2",
  credentials: new AWS.CognitoIdentityCredentials(
    {
      IdentityPoolId: config.IdentityPoolId
    },
    {
      region: "us-west-2"
    }
  )
});

export { s3Client };

File sizes before:
  344.77 KB  /2.0191bd07.chunk.js
  2.94 KB    /main.f878258f.chunk.js
  790 B      /runtime~main.e82a7b61.js

production build

File sizes after:
  134.24 KB  /2.0191bd07.chunk.js
  2.95 KB    /main.f878258f.chunk.js
  790 B      /runtime~main.e82a7b61.js

Let's try SDK v3 to reduce the size further?

libs/s3Client.ts

import AWS from "aws-sdk/global";
import s3 from "aws-sdk/clients/s3";
import { config } from "../config";

const s3Client = new s3({
  region: "us-west-2",
  credentials: new AWS.CognitoIdentityCredentials(
    {
      IdentityPoolId: config.IdentityPoolId
    },
    {
      region: "us-west-2"
    }
  )
});

export { s3Client };

import { S3 } from "@aws-sdk/client-s3-browser";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity-browser";
import { config } from "../config";

const s3Client = new S3({
  region: "us-west-2",
  credentials: fromCognitoIdentityPool({
    client: cognitoIdentityClient,
    identityPoolId: config.IdentityPoolId
  })
});

const cognitoIdentityClient = new CognitoIdentityClient({
  region: "us-west-2",
  credentials: new AWS.CognitoIdentityCredentials(
    {
      IdentityPoolId: config.IdentityPoolId
    },
    {
      region: "us-west-2"
    }
  )
  credentials: () => Promise.resolve({} as any),
  signer: {} as any //this is required
});
cognitoIdentityClient.middlewareStack.remove("SIGNATURE");

import { s3Client } from "./s3Client";
import { config } from "../config";

const deleteObject = async (fileName: string) =>
  s3Client
    .deleteObject({
      Key: fileName,
      Bucket: config.s3Bucket
    })
    .promise();

export { deleteObject };

deleteObject.ts

import { s3Client } from "./s3Client";
import { config } from "../config";

const deleteObject = async (fileName: string) =>
  s3Client
    .deleteObject({
      Key: fileName,
      Bucket: config.s3Bucket
    });

export { deleteObject };

File sizes before:
  134.24 KB  /2.0191bd07.chunk.js
  2.94 KB    /main.f878258f.chunk.js
  790 B      /runtime~main.e82a7b61.js

production build

File sizes after:
  106.81 KB  /2.0191bd07.chunk.js
  2.95 KB    /main.f878258f.chunk.js
  790 B      /runtime~main.e82a7b61.js

How about just SDK v3 client+command?

libs/s3Client.ts

import { S3 } from "@aws-sdk/client-s3-browser";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity-browser/CognitoIdentityClient";
import { config } from "../config";

const s3Client = new S3({
  region: "us-west-2",
  credentials: fromCognitoIdentityPool({
    client: cognitoIdentityClient,
    identityPoolId: config.IdentityPoolId
  })
});

const cognitoIdentityClient = new CognitoIdentityClient({
  region: "us-west-2",
  credentials: new AWS.CognitoIdentityCredentials(
    {
      IdentityPoolId: config.IdentityPoolId
    },
    {
      region: "us-west-2"
    }
  )
  credentials: () => Promise.resolve({} as any),
  signer: {} as any //this is required
});
cognitoIdentityClient.middlewareStack.remove("SIGNATURE");

import { S3Client } from "@aws-sdk/client-s3-browser";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity-browser";
import { config } from "../config";

const s3Client = new S3Client({
  region: "us-west-2",
  credentials: fromCognitoIdentityPool({
    client: cognitoIdentityClient,
    identityPoolId: config.IdentityPoolId
  })
});

const cognitoIdentityClient = new CognitoIdentityClient({
  region: "us-west-2",
  credentials: new AWS.CognitoIdentityCredentials(
    {
      IdentityPoolId: config.IdentityPoolId
    },
    {
      region: "us-west-2"
    }
  )
  credentials: () => Promise.resolve({} as any),
  signer: {} as any //this is required
});
cognitoIdentityClient.middlewareStack.remove("SIGNATURE");

deleteObject.ts

import { s3Client } from "./s3Client";
import { config } from "../config";

const deleteObject = async (fileName: string) =>
  s3Client
    .deleteObject({
      Key: fileName,
      Bucket: config.s3Bucket
    });

export { deleteObject };
import { DeleteObjectCommand } from "@aws-sdk/client-s3-browser";
import { s3Client } from "./s3Client";
import { config } from "../config";

const deleteObject = async (fileName: string) =>
  s3Client.send(
    new DeleteObjectCommand({
      Key: fileName,
      Bucket: config.s3Bucket
    })
  );

export { deleteObject };

File sizes before:
  106.81 KB  /2.0191bd07.chunk.js
  2.94 KB    /main.f878258f.chunk.js
  790 B      /runtime~main.e82a7b61.js

production build

File sizes after:
  90.07 KB  /2.0191bd07.chunk.js
  2.95 KB    /main.f878258f.chunk.js
  790 B      /runtime~main.e82a7b61.js

Hey Trivikram, now we're importing commands separately. Can we dynamically import dependencies?

Yes, we can! 😊

I'm glad you asked!

Routes.tsx

import React from "react";
import { Router } from "@reach/router";
import {
  ListNotes,
  CreateNote,
  ShowNote,
  NotFound
} from "./content";

const Routes = () => (
  <Router>
    <ListNotes path="/" />
    <CreateNote path="/note/new" />
    <ShowNote path="/notes/:noteId" />
    <NotFound default />
  </Router>
);

export { Routes };

import React, { lazy, Suspense } from "react";
import { Router } from "@reach/router";

const ListNotes = lazy(() => import("./content/ListNotes"));
const CreateNote = lazy(() => import("./content/CreateNote"));
const ShowNote = lazy(() => import("./content/ShowNote"));
const NotFound = lazy(() => import("./content/NotFound"));

const Routes = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <Router>
      <ListNotes path="/" />
      <CreateNote path="/note/new" />
      <ShowNote path="/notes/:noteId" />
      <NotFound default />
    </Router>
  </Suspense>
);

export { Routes };

CreateNote.tsx

export { CreateNote };
export default CreateNote;

React.lazy doesn't support named exports

production build

File sizes before:
  90.07 KB  /2.0191bd07.chunk.js
  2.95 KB    /main.f878258f.chunk.js
  790 B      /runtime~main.e82a7b61.js

File sizes after:

  45.72 KB  /4.76a075be.chunk.js
  35.33 KB  /1.9ecab0dd.chunk.js
  6.41 KB   /0.214c92a2.chunk.js
  5.78 KB   /5.d006f9d4.chunk.js
  2.56 KB   /6.9bdcbc25.chunk.js
  2.21 KB   /7.e5abe528.chunk.js
  ... smaller chunks

Does size reduction for frontend bundle reflect with improved performance?

Of course!

Let us see it live! 😊

What's next?

Try it out on your own to believe it!

aws-samples/aws-sdk-js-v3-workshop

on GitHub

If you have any questions/suggestions, do cut an issue on GitHub!

Thank you for listening!

https://slides.com/trivikram/modularized-aws-js-sdk

Trivikram Kamat

@trivikram

@trivikr

SDE@

Made with Slides.com