Learning Objectives: - Understand the difference between native and hybrid/native mobile applications - Learn how mobile applications can be built using javascript frameworks - See AWS Mobile Hub starter kits can accelerate your mobile app development efforts

1. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Michael Labieniec, Sr. Developer Advocate, AWS Mobile
January 25, 2018
Ionic and React Hybrid
Mobile Applications with Mobile Hub

2. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Native vs. Hybrid
Native Hybrid
Platform Specific Cross Platform
Compiled Language Scripting / Compiled
Access to Device Hardware Plugins / Native Modules
Platform Frameworks Web Frameworks

3. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Native vs. Hybrid
• Both Compile to a binary distribution (for an app store)
• With the exception of PWAs
• JavaScript execution is platform specific:
• iOS - JavaScriptCore
• Android - V8

4. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Ionic + Cordova (Hybrid)
• HTML, CSS, JavaScript
• Native Plugins
• Runs the app in a WebView
• Ionic
• UI Framework built on
Cordova using Angular
• AWS Amplify

5. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
React Native
• React, JavaScript, JSX
• Uses native components instead of
web components
• Same fundamental UI building
blocks as regular iOS and Android
apps
• AWS Amplify React Native

6. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Progressive Web Apps
• “Mobile Web”
• React, Angular, Ionic, Vue,
TypeScript, JavaScript/ES2015
• Progressive Web Applications
• Service/Web Workers
• Discoverable and installable
• Network Agnostic
• AWS Amplify

7. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Progressive Web Apps
Application shell Service worker Storage and cache

8. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Progressive Web Apps – App Shell
• Bundled HTML, CSS, and JavaScript
• Separates UI from data
• Downloaded once, immediately cached
• Loads from cache

9. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Progressive Web Apps – Service Worker
• A programmable network proxy
• Cannot access the DOM
• Responds to messages via postMessage
• Has access to IndexedDB APIs
Browser support: amzn.to/service-worker-status

10. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Progressive Web Apps – Storage
• Local storage is blocking and synchronous
• IndexedDB (idb) is indexed and asynchronous
• Transactional database system
• APIs are available in service workers
• Can be complex, wrappers available
Local Forage: amzn.to/local-forage

11. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Starter Apps
Native Hybrid Web/PWA
React Native Ionic React
iOS Cordova Ember
Android Angular
Xamarin Vue

12. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Amplify and Mobile CLI

13. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Amplify
• JavaScript Library for frontend
and mobile development
• JavaScript (frameworks)
• React + React Native
• Declarative interface across
different categories
• Open Source (Apache)
github.com/aws/aws-amplify
 Authentication
 Analytics
 API
 Storage
 Cache

14. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Mobile CLI
• Bootstrap new and existing projects with a single
command
• Easily enable and disable AWS services and integrate
them with AWS Amplify
• Publish changes to AWS environment
• Instant Web Hosting for your web apps
• Open Source (Apache)

15. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Amplify
$ npm install –g awsmobile-cli
$ npm install –g create-react-app
$ create-react-app my-amplify-app
$ cd my-amplify-app
$ awsmobile init
// App.js
Import Amplify from ‘aws-amplify’
Import Config from ‘./aws-exports’
Amplify.configure(Config)

16. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Amplify – React / React Native

17. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
withAuthenticator(App)
 React HOC
 100% Scaffold UI
 State Management
 MFA / SMS / Email
 Credential Management
Import {
withAuthenticator
} from ‘aws-amplify-react’
…
export default withAuthenticator(App);

18. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
<Authenticator />
 Scaffold UI
 Custom UI
 State Management
 MFA / SMS / Email
 Credential Management
import {
Authenticator
} from ‘aws-amplify-react’
import Config from ‘./aws-exports’
…
render(
<div>
<Authenticator>
<MyApp />
</Authenticator>
</div>
)

19. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
<Authenticator />
 Scaffold UI
 Custom UI
 State Management
 MFA / SMS / Email
 Credential Management
render(
<Authenticator hideDefault={true}
onStateChange={this.handleAuthStateChange}>
<SignIn/>
<SignUp/>
<ConfirmSignUp/>
<Greetings/>
<AlwaysOn/>
</Authenticator>
)

20. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
<PhotoPicker />
 Scaffold UI
 Customizable UI
 State Events
 Credential Management
import {
PhotoPicker
} from ‘aws-amplify-react’
render(
<PhotoPicker onPick={
data => doSomething(data)
} />
)

21. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
<S3Album />
 Scaffold UI
 Customizable UI
 State Events
 Credential Management
import {
PhotoPicker
} from ‘aws-amplify-react’
render(
<PhotoPicker onPick={
data => doSomething(data)
} />
)

22. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
<S3Image />
 Renders an Image
 Supports Public/Private
 Supports Upload
 Supports Picker
import {
S3Image,
S3Text
} from ‘aws-amplify-react’
render(
<div>
<S3Image level="private" path={path} />
<hr/>
<S3Text level="private" path={path} />
</div>
)
<S3Text />
 Renders Text from Amazon S3
 Supports Public/Private
 Supports Upload
 Supports Picker

23. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Mobile CLI

24. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Mobile CLI
 Open Source
 AWS Backend in seconds
 Enable/Disable AWS Features
 Instant Web Hosting
 API and Database
$ npm install –g awsmobile-cli
$ cd your-react-app
$ awsmobile init

25. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS Features
 Amazon Cognito
 Amazon S3 / CloudFront
 Amazon API Gateway
 Amazon DynamoDB
 Amazon Pinpoint
$ awsmobile features
◉ user-signin
◉ user-files
◉ cloud-api
◉ database
◉ analytics
◉ hosting

26. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Hosting and Streaming
• Publish your front-end using one simple command
$ awsmobile publish
• Automatically published to Amazon S3
• Automatically distributed to a global content delivery
network (CDN) with Amazon CloudFront

27. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Comparison
https://github.com/awslabs/aws-mobile-react-native-starter

28. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
https://github.com/awslabs/aws-mobile-react-sample

29. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
https://github.com/awslabs/aws-mobile-ionic-sample

30. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
https://github.com/ionic-team/ionic2-starter-aws

31. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Michael Labieniec, Sr. Developer Advocate, AWS Mobile