Build Cloud-Connected Apps in React Native for iOS & Android.pdf

13
© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Adrian Hall Sr. Developer Advocate, AWS Mobile Building React Native Apps With AWS

Transcript of Build Cloud-Connected Apps in React Native for iOS & Android.pdf

Page 1: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Adrian HallSr. Developer Advocate, AWS Mobile

Building React Native AppsWith AWS

Page 2: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

50%

34%

9% 7%

Mobile App Desktop Mobile Web Tablet App

Digital MediaTime Spent on devices

comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience, June 2017

Page 3: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Developing Mobile Apps: Options

Native Apps Cross-Platform Native Apps

Hybrid Web Apps Hosted Web Apps

Page 4: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Why React Native?

ü Compiles to a Native Appü Full access to Native APIsü Leverage React & JavaScript

✗ Not quite React – No DOM✗ Rapidly changing ecosystem✗ UI differences between iOS and Android

Page 5: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

AWS Resources you can use

Page 6: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

AWS Resources you need

Analytics Identity Device Testing

NoSQL Database File Storage ServerlessCompute

API Gateway

Chat Bots Text to Speech Machine LearningFor Images

Video Distribution

Major

Use-caseSpecific

Essential

Page 7: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

AWS Resources you need

AmazonPinpoint

AmazonCognito

AWS Device Farm

Amazon DynamoDB

Amazon S3 AWS Lambda Amazon API Gateway

Amazon Lex Amazon Polly Amazon Rekognition

Amazon Cloudfront

Major

Use-caseSpecific

Essential

Page 8: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Flux Architecture

React View

Action

StoreDispatcher

Page 9: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Data Flow Architecture for Cloud

Action

Dispatcher Store View

AsyncStorage Cloud SyncHydrate

Page 10: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Tools for dealing with state

On Device

Flux Pattern Libraries• Redux• MobX

Storage Libraries• ASyncStorage• Realm

Accessing the Cloud

React Native Starter Kit• HOCs for Common

Operations

AWS Resources• AWS Mobile Hub• Amazon DynamoDB

Page 11: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Introducing AWS React Native Starter Kit

Complete Serverless React Native Project

Library of AWS Controls• Identity & Authentication• Data Storage• Custom API

Implemented as Higher Order Components (HOCs)

https://github.com/awslabs/aws-mobile-react-native-starter

Page 12: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

DemonstrationBuilding a React Native app and adding AWS Resources to it

Page 13: Build Cloud-Connected Apps in React Native for iOS & Android.pdf

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Where to get more information

React Native Resources:https://facebook.github.io/react-native/

MobX and Reduxhttp://redux.js.org/https://mobx.js.org/

React Native on AWS:https://github.com/awslabs/aws-mobile-react-native-starter