React Native Workshop

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Adrian Hall, AWS Mobile
Introduction to React Native

What is React Native?
• Write in React/JSX
• Run as a Native App
• Code runs in a JS Container
• iOS / Android
• You must be able to:
 Write JavaScript
 Work with ReactJS technologies
Native Mobile App
React Native Runtime
JavaScript Container
ReactJS
React Native JS
Native Bridges
Your Code

Problems React Native Solves
• Cross Platform App Development with Native UX
• Utilizes Web Development Skillset
• Avoids the “HTML Sandbox” Trap
• Single code-base for business logic

Wide Range of UI Controls
• Wraps existing Native UI Controls
• Libraries of new UI Controls
• NativeBase
• React Native Elements
• React Native Material Design

UI Component Library
ActivityIndicator
ProgressBarAndroid
PickerIOS
Picker
NavigatorIOS
Modal
ListView
Image
FlatList
DrawerLayoutAndroid DatePickerIOS
Checkbox
Button
ProgressViewIOS
RefreshControl
SectionList
ScrollView
SegmentedControlIOSSlider
StatusBar
Switch
TabBarIOS
Text
TextInput
Switch
ToolBarAndroid
View

Device APIs
Platform
AsyncStorage
AppState
Flexbox
Vibration
StyleSheet
Timers
GeoLocation
Network

React Native vs. Xamarin Forms – An Opinion
Requirement React Native Xamarin Forms
Legal BSD + PATENTS MIT
Framework React / Flux MVVM
Editor Any Text Editor Visual Studio
Type Safety Optional (Flow / TS) Included (C#)
Components Extensive - npm Extensive - NuGet
iOS on a Windows PC? Cloud Local Mac or Cloud
Time to Productive Short Long
Expert Assistance Community Community
Debugging Yes Yes

Getting Started – Mac Edition
Install Homebrew, XCode, Android Studio
brew install node yarn watchman
npm install –g react-native-cli
react-native init my-project
cd my-project
yarn install && yarn run ios

Getting Started – Windows Edition
Install Node, Yarn, Android Studio
Create an Android Emulator and start it
npm install –g react-native-cli
react-native init my-project
cd my-project
yarn run android

Demo: First React-Native App

State Management: Flux Architecture
React
View
StoreDispatcher
Action

Flux Implementation: Redux
• Most popular flux implementation
• Dispatcher is provided by library
• Actions are created by Action Creators
• Store is mutated by Reducers
• React Bindings
• Higher Order Components wrap your components
• Inject the store and action creators where needed

Demo: Notes App Walkthrough
https://github.com/aws-samples/aws-mobile-react-native-notes-tutorial

Notes App: Components
HomeScreen
NoteList
NoteListItem
NoteListItem
NoteListItem
NoteListItem
• Components are nested
• Top level components are connected to store
• Inner components are “pure”

Resources
• https://reactjs.org/
• https://redux.js.org/
• https://facebook.github.io/react-native
• http://bit.ly/react-native-notes

Connecting to AWS
Resources
With AWS Amplify

Mobile Optimized AWS Services
Major
Use-case
Specific
Essential
Analytics Identity UI Testing
Database Files Cloud Logic
Chat Bots Text to Speech Machine Learning

Introducing AWS Amplify
JavaScript Library for accessing cloud resources
• Analytics
• Authentication
• File Storage
• API Access
Initially for AWS Mobile Hub configuration
React and React Native Support

Installing AWS Amplify
Works with ANY JavaScript Framework
npm install –save aws-amplify
React Native Version
yarn run eject (if using CRNA)
yarn add aws-amplify-react-native
react-native link amazon-cognito-identity-js

Configuring AWS Amplify
1. Create your project in AWS Mobile Hub
• Turn on Hosting & Streaming
• Download aws-exports.js
2. Add the following in your bootstrap JS
import Amplify from ‘aws-amplify-react-native’;
import awsmobile from ‘./aws-exports’;
Amplify.configure(awsmobile);

Add Analytics to your app
• Do nothing (it’s already done!)
• Add custom events with Analytics.record()
import { Analytics } from ‘aws-amplify-react-native’;
Analytics.record(‘listen’, { ‘id’: ’12345’ });
• Add metrics
Analytics.record(‘listen’, { ‘id’: ’12345’ }, { minutes: 4 });

Demo: Adding Analytics

Adding Authentication
• In Any framework
• use the Auth module
• In React & React Native
• withAuthenticator() – HOC with provided UI
• <Authenticator/> - component with provided UI
• Auth.signIn() (and friends) – your own UI

Adding Authentication
import React from ‘react’;
import MyApplication from ‘./src/MyApplication’;
import { withAuthenticator } from ‘aws-amplify-react-native’;
class App extends React.Component {
render() {
return (<MyApplication/>);
}
}
export default withAuthenticator(App);

Demo: Adding Authentication

Data in Web and Mobile

I want to produce a Mobile CRM App
Problems:
• User Experience
• Network Access
• Multiple Editors
• Complex Relationships
Orders
Order
Details
Customer
Contacts

I have a mobile app, and a data source
Data
API Gateway Lambda
But how can I implement this and still
have great user experience?

Option 1: REST
Data
/orders/*
/customers/*
/contacts/*
REST Endpoint
 Trivial to set up
 Standard HTTP Calls
✘ Relationships
✘ Lists with reduced information
✘ Query Support
✘ Ordering and Paging
✘ Notifications

Option 2: OData
Data
/orders/*
/customers/*
/contacts/*
OData Endpoint
 Standard Libraries
 Supports Select, Order, Paging
✘ Difficult to set up and debug
✘ No standard mutations
✘ Spotty Relationship support
✘ SQL Specific Syntax
✘ Notifications

Perhaps some requirements help?
• Client-specification of the data view
• Complex query support for relationships
• Ad-hoc search, pagination, batching
• Real-time change notifications
• Automatic offline support
• Bandwidth efficiency
• Standard Client / SDK

Introducing GraphQL
POST the shape of data Return the data in that shape
query {
customers {
id,
name
}
}
{
“data”: {
“customers”: [
{
“id”: “94a6c6461e39”,
“name”: “Amazon Web Services”
}, {
“id”: ” 128e23fcee3b”,
“name”: “Blue Origin”
}
]
}
}

GraphQL Benefits
• Rapid prototyping
• Introspection
• Co-location of data requirements and views
• Data behavior control
• Bandwidth optimization

GraphQL Supports…
• Return specific fields
• Search for a specific value for a field
• Search for a wildcard value for a field
• Related items / embedded objects
• Pagination
• Mutations
Learn GraphQL: http://graphql.org/learn/

GraphQL In Action

Demo: Use an GraphQL IDE and Cloud Data
GraphQL Playground:
• https://www.graphqlbin.com/RVIn
• Also available as a desktop app
Endpoint:
• https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr
• Embedded into the GraphQL Playground desktop app

Demo: All Movies with titles
query {
allMovies {
id,
title
}
}
{
"data": {
"allMovies": [
{
"id": "cixos5gtq0ogi0126tvekxo27",
"title": "Inception”
}, {
"id": "cixxhjs04pm0h015815qnrkyu",
"title": "The Dark Knight”
}, {
"id": "cixxhneo4qd4e01503f08d2hc",
"title": "Batman Begins”
}, {
"id": "cixxhupwksrq50150i50j3lha",
"title": "The Dark Knight Rises”
}
]
}
}

Demo: First 2 movies, ordered by title
query {
allMovies(first:2, orderBy: title_ASC) {
id,
title
}
}
{
"data": {
"allMovies": [
{
},
{
"id": "cixos5gtq0ogi0126tvekxo27",
"title": "Inception”
}
]
}
}

Demo: Specific Movie (all available fields)
query {
Movie(id:"cixxhneo4qd4e01503f08d2hc") {
id,
title,
slug,
createdAt,
updatedAt,
releaseDate
}
}
{
"data": {
"Movie": {
"releaseDate": "2005-06-15T00:00:00.000Z",
"updatedAt": "2017-06-01T12:50:48.000Z”,
"slug": "batman-begins",
"createdAt": "2017-01-14T17:10:00.000Z",
}
}
}

Demo: Specific Movie, and the Actors
query {
Movie(id:"cixxhneo4qd4e01503f08d2hc") {
id,
title,
slug,
releaseDate,
actors(first: 2) {
name
}
}
}
{
"data": {
"Movie": {
"releaseDate": "2005-06-15T00:00:00.000Z",
"slug": "batman-begins",
"actors": [
{
"name": "Christian Bale”
},
{
"name": "Michael Caine”
}
],
"title": "Batman Begins"
}
}
}

AWS AppSync: GraphQL with Benefits
• Managed AWS Data Service
• Own and control your data
• Subscriptions with real-time notification
• Offline support with conflict resolution in the cloud
• Enterprise-level security features

How to use AWS AppSync
• Integrates with Apollo GraphQL Client
• https://github.com/apollographql
• Available for Android, iOS, JavaScript & Others
• Offline Support
• Automatically persisted for queries
• Write-through for mutations
• Conflict resolution in the cloud, optional client callback
• Real-time Support
• Event driven model
• Automatic Websocket connection

Conflict Resolution
• Automatic Cloud-based Resolution:
• Server wins
• Silent Failure
• Custom Logic in AWS Lambda
• Optional Fall back to a client callback
• Allows presentation of custom UI

GraphQL Subscriptions
• Near real-time updates of data
• Event-based model, triggered by mutations
• Scalable platform for common use cases
• Can be used by any data source
• Elasticsearch, DynamoDB, Lambda

Building a Simple Offline App

Service Cost per month
• Free Tier lasts for first 12 months
• Don’t forget to add Data Transfer + Database
• Always review the AWS Pricing Page for latest pricing
Free Tier Standard Cost
Queries 250,000 $4 / million
Real-time Updates 250,000 $2 / million
Real-time Connection-minutes 600,000 $0.08 / million
* US Pricing, as of December 1, 2017

Pricing Example (all numbers per month)
• Chat application with 2,500 users
• Average user connects for 1,500 minutes
• Sends 1,000 and Receives 1,000 messages
• 2.5M queries and 2.5M real-time updates
AppSync Query 2.5M x $4/million = $10.00
AppSync Real-time 2.5M x $2/million = $5.00
AppSync Minutes 2,500 x 1,500 x $0.08/million = $0.30
Data Transfer 1KB x 2.5M = 2.4GB x $0.09 = $0.21
DynamoDB Database Free Tier (as long as store < 25Gb)
Total $15.51

Best Practices
• Don’t boil the ocean
• Start with offline query support
• Use subscriptions appropriately
• Be kind to your users network and battery
• Only use subscriptions for rapidly evolving mutations
• Don’t over-complicate conflict resolution
• Most situations do not need manual conflict resolution
• For complex situations, use a lambda and keep client logic light

Client-side Tools
• Clients
• Apollo GraphQL: https://github.com/apollographql
• Data Browsers
• The AWS AppSync Console
• GraphiQL: https://github.com/graphql/graphiql
• GraphQL IDE: https://github.com/andev-software/graphql-ide
• Plugins
• Chrome Plugin: https://chrome.google.com/webstore/detail/graphql-network

React Native Workshop

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a React Native Workshop

Semelhante a React Native Workshop (20)

Mais de Amazon Web Services

Mais de Amazon Web Services (20)

React Native Workshop