Writing JavaScript Applications with the AWS SDK (TLS303) | AWS re:Invent 2013

© 2013 Amazon.com, Inc. and its affiliates. All rights reserved. May not be copied, modified, or distributed in whole or in part without the express consent of Amazon.com, Inc.

by Loren SegalNovember 15th, 2013

Writing JavaScript Applications with the AWS SDK

Wednesday, November 27, 13

JavaScriptis everywhere.


AWS SDK forJavaScript in Node.js

Almost a year old!


AWS SDK forJavaScript in the Browser

Desktop or mobile devices


Let’s use them.


Goals


Goals

1. Learn about AWS SDK for Node.js


Goals


2. Introduce AWS SDK for JavaScript in the Browser


Goals


2. Introduce AWS SDK for JavaScript in the Browser

3. Write a two-tiered web application using JavaScript, HTML, and CSS


AWS SDK for Node.js


Full Service CoverageSupport for over 30 AWS services


Extensible ClientsCustomize any part of the request cycle


Standard Node.js IdiomsStreams, EventEmitter, Domains


Open SourceApache License, Version 2.0

http://github.com/aws/aws-sdk-js




Getting StartedAWS SDK for Node.js


$ npm install aws-sdkBash

Installing


var AWS = require(‘aws-sdk’);JS

Loading


Configuringthe SDKAWS.config



Credentials *

* Required by the SDK



Credentials *Region *




Credentials *Region *Extras



Configuring Credentials



IAM roles for EC2 Instances



IAM roles for EC2 InstancesEnvironment Variables



IAM roles for EC2 InstancesEnvironment VariablesFile System (outside source control)


Do Not Hardcode Credentials

Unless they are read-only and scoped to specific resources.Wednesday, November 27, 13

IAM Roles for EC2 Instances

=Zero Configuration


Environment VariablesAWS_ACCESS_KEY_IDAWS_SECRET_ACCESS_KEYAWS_REGION*


ConfiguringRegion and Extras


AWS.config.update({ region: ‘us-west-2’, // AWS_REGION maxRetries: 10, // default: 3 logger: process.stdout, // ... more options ...});

JS


AWS.config.loadFromPath(‘./config.json’);JS

Config From a File

If this file contains credentials, keep it out of source control


Working with Services


Service Objects


Service Objects

AWS.S3


Service Objects

AWS.S3AWS.EC2


Service Objects

AWS.S3AWS.EC2AWS.DynamoDB


Service Objects

AWS.S3AWS.EC2AWS.DynamoDBAWS.SQS


Service Objects

AWS.S3AWS.EC2AWS.DynamoDBAWS.SQSAWS.SNS


Service Objects

AWS.S3AWS.EC2AWS.DynamoDBAWS.SQSAWS.SNS...


var ec2 = new AWS.EC2([config]);JS

Constructing a Service Object


ec2.describeInstances(params, callback);JS

Calling an Operation


function (err, data) { ... }JS

The Callback


var req = ec2.describeInstances(params);JS

Getting a Request Object


var resp = req.send(callback);JS

Sending the Request Object


req.on(‘complete’, function(resp) { ... });JS

Adding Listenersto the Request Object


The Request Cycle


Send AWS.RequestGet AWS.Response


Request Lifecycle


Operation

Request Lifecycle


AWS.Request

Operation

Request Lifecycle


AWS.Request

Operation

Request Lifecycle

send()


AWS.Request

Operation

build sign send

completesuccess

error

Emitted Lifecycle Events

... ... ...

Request Lifecycle

send()


AWS.Request

Operation

build sign send

completesuccess

error


... ... ...

Request Lifecycle

callbacksend()


AWS.Request

Operation

AWS.Response

build sign send

completesuccess

error


... ... ...

Request Lifecycle

callbacksend()


AWS.Request


AWS.Request.send(callback)


AWS.Request.send(callback).on(event, callback)


AWS.Request.send(callback).on(event, callback).httpRequest


AWS.Request.send(callback).on(event, callback).httpRequest...


AWS.Response


AWS.Response

.error


AWS.Response

.error

.data


AWS.Response

.error

.data

.retryCount


AWS.Response

.error

.data

.retryCount

.httpResponse


AWS.Response

.error

.data

.retryCount

.httpResponse

...Wednesday, November 27, 13

RequestLifecycleRecap



Send AWS.Request



Send AWS.RequestEmits Lifecycle Events



Send AWS.RequestEmits Lifecycle EventsCallback with AWS.Response


Featuresof the SDK


SDK Features


SDK Features

Global Configuration Object


SDK Features

Global Configuration ObjectBound Parameters


SDK Features

Global Configuration ObjectBound ParametersResponse Pagination


SDK Features

Global Configuration ObjectBound ParametersResponse PaginationEvent Listeners (Per-Service and Global)


SDK Features

Global Configuration ObjectBound ParametersResponse PaginationEvent Listeners (Per-Service and Global)API Version Locking


SDK Features

Global Configuration ObjectBound ParametersResponse PaginationEvent Listeners (Per-Service and Global)API Version LockingSecure Credential Management


AWS SDKfor JavaScriptin the Browser


Developer PreviewLooking for Feedback


language

Getting the SDK<script src=”https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc1.min.js” />


5 Supported Services



Amazon S3



Amazon S3Amazon DynamoDB



Amazon S3Amazon DynamoDBAmazon SQS



Amazon S3Amazon DynamoDBAmazon SQSAmazon SNS



Amazon S3Amazon DynamoDBAmazon SQSAmazon SNSSTS


All Modern Browsers

28.0+ 23.0+ 10+ 17.0+ 5.1+


Usage is the same.But in your browser or mobile device


Configurationis Different


Two-Tier Web Applications

Why is it different?


Traditional Application Architecture

Other ServicesNode.js Backend

nodeJS

Your Services


Two-Tier Application Architecture

Your ServicesnodeJS

nodeJS

nodeJS

SDK on the Device


Benefits


Benefits

Fewer moving parts


Benefits

Fewer moving partsEasy prototyping


Benefits

Fewer moving partsEasy prototypingDeploying as simple as copying files to Amazon S3


Benefits

Fewer moving partsEasy prototypingDeploying as simple as copying files to Amazon S3Fully dynamic app for pennies a month


Next LevelWeb Apps


AppIdeas


AppIdeas

Forum Software


AppIdeas

Forum SoftwareBlog Commenting Service


AppIdeas

Forum SoftwareBlog Commenting ServiceBlogging Platform


AppIdeas

Forum SoftwareBlog Commenting ServiceBlogging PlatformFirefox/Chrome Extensions


AppIdeas

Forum SoftwareBlog Commenting ServiceBlogging PlatformFirefox/Chrome ExtensionsWinRT (Metro Style) Apps


AppIdeas

Forum SoftwareBlog Commenting ServiceBlogging PlatformFirefox/Chrome ExtensionsWinRT (Metro Style) AppsAny Mobile App!


Let’s Look at aWeb Application

Using nothing butHTML, CSS, and JavaScript


A Simple BlogContent stored in Amazon DynamoDB

Assets in Amazon S3


Key DifferencesThree-Tier to Two-Tier



Browser Security



Browser SecurityCORS in the browser Credentials on device


Cross-Origin Resource Sharing


CORS


CORSBrowser sends pre-flight request to external host.


CORSBrowser sends pre-flight request to external host.Host acknowledges browser.


CORSBrowser sends pre-flight request to external host.Host acknowledges browser.Browser sends XHR request.


CORS+ S3


CORS+ S3

CORS needs special configuration on Amazon S3.


CORS+ S3

CORS needs special configuration on Amazon S3.Configure CORS with bucket policy.


Configuring CORS on Amazon S3


Getting CredentialsOnto Your Device


GettingCredentials

Onto Your Device


GettingCredentials

Onto Your Device

Never hardcode credentials


GettingCredentials

Onto Your Device

Never hardcode credentialsUse Web Identity Federation


Web Identity FederationUse Facebook, Google, or Login with

Amazon as third-party identity providers


Web Identity FederationSet up IAM roles for

these identity providers


1

2

3


Web Identity FederationSet up permissions for IAM role


AWS.config.credentials = new AWS.WebIdentityCredentials({ RoleArn: ‘arn:aws:iam::<ACCOUNT_ID>:role/<ROLE_NAME>’, ProviderId: ‘graph.facebook.com’, WebIdentityToken: fbAccessToken});

JS

AWS.WebIdentityCredentials


// 1. Load the FB JS SDK// 2. Call FB.login()FB.login(function (response) { if (response.authResponse) { fbAccessToken = response.authResponse.accessToken; AWS.config.credentials = new AWS.WebIdentityCredentials({...});});

JS

Get a Facebook Access Token


Same ConceptFor other identity providers


Our Community


We ♥Open Source


https://github.com/aws/aws-sdk-js


http://github.com

http://github.com

Contributingto the SDK



Improve Documentation



Improve DocumentationReport Issues



Improve DocumentationReport IssuesSubmit Pull Requests



Improve DocumentationReport IssuesSubmit Pull RequestsThird-Party Plugins


Third Party PluginsA great way to add features


Node.js


Write More!


Please give us your feedback on this presentation

As a thank you, we will select prize winners daily for completed surveys!

TLS303 Thank You


Writing JavaScript Applications with the AWS SDK (TLS303) | AWS re:Invent 2013

Technology

Transcript of Writing JavaScript Applications with the AWS SDK (TLS303) | AWS re:Invent 2013