(dev306) building cross-platform applications using the aws sdk for javascript | aws re:invent 2014

November 13, 2014 Las Vegas, NV

Aditya Manohar, Amazon Web Services

AWS SDK for JavaScript

December2012

AWS SDK for Node.jsDeveloperPreview

AWS SDK for JavaScript

December2012

AWS SDK for Node.jsDeveloperPreview

October 2013

AWS SDK for JavaScriptDeveloper Preview

AWS SDK for JavaScript

December2012

October 2013

AWS SDK for JavaScriptDeveloper Preview

AWS SDK for

JavaScript

June2014

AWS SDK for Node.jsDeveloperPreview

AWS SDK for JavaScript

December2012

October 2013

AWS SDK for JavaScriptDeveloper Preview

AWS SDK for

JavaScript

June2014

re:Invent 2014

AWS SDK for Node.jsDeveloperPreview

ubiquitous

• Not just browsers and Node.js anymore

• Android and iOS (e.g., PhoneGap)

• WinRT: Windows Desktop & Windows Phone

• Embedded devices: Cylon.js and Johnny-Five

Goals

Overview of application

SDK features

Multiple environments & operational differences

Video Transcoder

Upload, encode, and download videos

AmazonS3

AmazonElastic

Transcoder

Upload

Download

Demo

github.com/awslabs/

aws-sdk-js-sample-video-transcoder

ArchitectureAWS SDK for JavaScript

app.js

var AWS = require('aws-sdk');

// Construct a service object

var s3 = new AWS.S3();

// Making requests

s3.listObjects({Bucket: 'bucket'}, function(err,data){

if (err) console.log(err);

else console.log(data);

});

var s3 = new AWS.S3();

var req = s3.listObjects({Bucket: 'bucket'});

// Attaching life cycle callbacks

req.on('success', function(response){

console.log(response.data);

});

req.send();

httpUploadProgress & httpDownloadProgress

req.on('httpUploadProgress', function(progress) {

console.log(progress.loaded + ' of ' + progress.total);

});

var params = {id: 'jobId'};

transcoder.waitFor('jobComplete', params, function(err, data) {

if (err) console.log(err);

else console.log(data);

});

Video Transcoder (contd.)

Application workflow

Start Create Pipeline

1

Upload Files

2

Create Job

3

Attach Waiter

4 5

PollJob

6

DownloadFiles

Node.js

console.js

github.com/awslabs/

aws-sdk-js-sample-video-transcoder

AWS SDK for JavaScript

app.js

$> npm install aws-sdk

credentials

# Shared credentials file

# ~/.aws/credentials

[default]

aws_access_key_id = foo

aws_secret_access_key = bar

[development]

aws_access_key_id = baz

aws_secret_access_key = quux

app.jsApp.prototype.jobCreated = function(response) {

self.publish('app:request-success', data, message);

self.publish('app:job-complete', data);

};

console.js

Application.subscribe('app:request-success', printNotification);

Application.subscribe('app:job-complete', downloadObject);

console.js

var printNotification = function(response, message) {

process.stdout.write(message.text + '\n');

};

console.js

var downloadObject = function(responseData){

// . . .

var req = s3.getObject({Bucket: Application.contentBucket, Key:key});

var stream = req.createReadStream();

// . . .

stream.on('data', function(data){

progress.loaded += data.length;

}).pipe(writeStream);

// . . .

};

Why?

Single

Reduced maintenance cost

Easy

Easy

Any application that can be written in JavaScript will eventually be written in JavaScript

- Jeff Atwood, 2007

Web Application

view.js

github.com/awslabs/

aws-sdk-js-sample-video-transcoder

AWS SDK for JavaScript

app.js

$> bower install aws-sdk

Use Amazon Cognito

No localStorage

Configure CORS on Amazon S3

Application.subscribe('app:request-progress', showProgress);

<progress max="100" data-message-id></progress>

jQuery UI

Application.subscribe('app:request-success', notify);

Application.subscribe('app:request-failure', notify);

(noty, Notify.js, MiniJS, etc.)

AWS SDK for JavaScript

app.js

Google Chrome Extension

ui.js options.js

github.com/awslabs/

aws-sdk-js-sample-video-transcoder

No CORS Configuration: manifest.json

{

"manifest_version": 2,

"name": "Transcoder",

"permissions": [

"notifications",

"https://*.amazonaws.com/"

]

}

options.js

var saveConfiguration = function (evt) {

localStorage.config = JSON.stringify(config);

}

ui.js: N

var notify = function(response, message) {

var options = {

type: 'basic',

iconUrl: assetUrls[message.sender],

title: 'Status',

message: message.text

};

chrome.notifications.create('', options, noop);

};

AWS SDK for JavaScriptApps for

Windows RT

github.com/awslabs/

aws-sdk-js-sample-video-transcoder

home.js progress.js

transcoder.js

app.js

But first…

Windows Runtime Windows API surface

- msdn.microsoft.com

transcoder.js

setCredentials: function (resource, username, password) {

var vault = new Windows.Security.Credentials.PasswordVault();

var credential = new Windows.Security.Credentials

.PasswordCredential(resource, username, password);

vault.add(credential);

}

transcoder.js

saveConfiguration: function (config) {

localSettings.values.config = composite;

}

progress.js

<progress max="100" data-message-id></progress>

(+custom progress manager code)

home.jsnotify: function (response, message) {

toast = new notifications.ToastNotification(toastXml);

toastNotifier = notifications.ToastNotificationManager

.createToastNotifier();

toastNotifier.show(toast);

}

Summary

http://bit.ly/awsevals

@awsforjs

github.com/

aws/aws-sdk-js

blogs.aws.amazon.com/

javascript/