Weitere ähnliche Inhalte
Ähnlich wie React Native Workshop (20)
Mehr von Amazon Web Services (20)
React Native Workshop
- 1. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Adrian Hall, AWS Mobile
Introduction to React Native
- 2. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 3. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 4. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Wide Range of UI Controls
• Wraps existing Native UI Controls
• Libraries of new UI Controls
• NativeBase
• React Native Elements
• React Native Material Design
- 5. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 6. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Device APIs
Platform
AsyncStorage
AppState
Flexbox
Vibration
StyleSheet
Timers
GeoLocation
Network
- 7. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 8. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 9. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 10. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Demo: First React-Native App
- 11. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
State Management: Flux Architecture
React
View
StoreDispatcher
Action
- 12. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 13. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Demo: Notes App Walkthrough
https://github.com/aws-samples/aws-mobile-react-native-notes-tutorial
- 14. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Notes App: Components
HomeScreen
NoteList
NoteListItem
NoteListItem
NoteListItem
NoteListItem
• Components are nested
• Top level components are connected to store
• Inner components are “pure”
- 15. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Resources
• https://reactjs.org/
• https://redux.js.org/
• https://facebook.github.io/react-native
• http://bit.ly/react-native-notes
- 16. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Adrian Hall, AWS Mobile
Connecting to AWS
Resources
With AWS Amplify
- 17. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Mobile Optimized AWS Services
Major
Use-case
Specific
Essential
Analytics Identity UI Testing
Database Files Cloud Logic
Chat Bots Text to Speech Machine Learning
- 18. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 19. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 20. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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);
- 21. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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 });
- 22. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Demo: Adding Analytics
- 23. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 24. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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);
- 25. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Demo: Adding Authentication
- 26. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Adrian Hall, AWS Mobile
Data in Web and Mobile
- 27. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
I want to produce a Mobile CRM App
Problems:
• User Experience
• Network Access
• Multiple Editors
• Complex Relationships
Orders
Order
Details
Customer
Contacts
- 28. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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?
- 29. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 30. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 31. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 32. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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”
}
]
}
}
- 33. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
GraphQL Benefits
• Rapid prototyping
• Introspection
• Co-location of data requirements and views
• Data behavior control
• Bandwidth optimization
- 34. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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/
- 35. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
GraphQL In Action
- 36. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 37. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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”
}
]
}
}
- 38. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Demo: First 2 movies, ordered by title
query {
allMovies(first:2, orderBy: title_ASC) {
id,
title
}
}
{
"data": {
"allMovies": [
{
"id": "cixxhneo4qd4e01503f08d2hc",
"title": "Batman Begins”
},
{
"id": "cixos5gtq0ogi0126tvekxo27",
"title": "Inception”
}
]
}
}
- 39. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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",
"id": "cixxhneo4qd4e01503f08d2hc",
"createdAt": "2017-01-14T17:10:00.000Z",
"title": "Batman Begins”
}
}
}
- 40. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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",
"id": "cixxhneo4qd4e01503f08d2hc",
"actors": [
{
"name": "Christian Bale”
},
{
"name": "Michael Caine”
}
],
"title": "Batman Begins"
}
}
}
- 41. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 42. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 43. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 44. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 45. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Building a Simple Offline App
- 46. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 47. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 48. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
- 49. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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