Más contenido relacionado
La actualidad más candente (20)
Similar a Progetta, crea e gestisci Modern Application per web e mobile su AWS (20)
Más de Amazon Web Services (20)
Progetta, crea e gestisci Modern Application per web e mobile su AWS
- 1. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Progetta, crea e gestisci Modern
Application per web e mobile su
AWS.
Stefano Sandrini – Solutions Architect
- 2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Modern Web & Mobile Applications
• Traditional client-server web architectures led to poor experiences
Every button click generates a re-render of the page
• Modern Web Applications are created as Single Page Applications (SPA)
Package all application’s components into static files
• Native app-like experience
Frontend served as HTML and JS files , invoke backend asynchronously
• Functionality spread across multiple places and resources
Static frontend and assets, backend business logic, database, authentication
services
- 3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
End-user requirements
Performant and
Responsive UX
Fast Data access Offline Data accessData Security Personalization
- 4. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Business requirements
User BehaviorData AvailabilityData Security User Adoption
- 5. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
- 6. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Approach to designing, building and
managing applications.
Increase agility of teams and reliability, security,
scalability of applications
- 7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Best practices for modern application development
• Enable experimentation by creating a culture of ownership
• Componentize applications using microservices
• Update applications and infrastructure quickly by automating the release
pipeline
• Model and provision application resources using infrastructure as code
• Simplify infrastructure management with serverless technologies
• Improve application performance by increasing observability
• Secure the entire application lifecycle by automating security
- 8. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
What Developers Ask ?
Tools for building,
testing, deploying,
and hosting the
entire app – frontend
and backend
Secure and scalable
apps
Offline data,
network-optimized
sync, and real-time
updates
Centralized config,
cloud provisioning,
and team workflow
Code generation to
eliminate boilerplate
Frontend support for
multiple platforms
and frameworks
- 9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
An Integrated Developer Experience
Developer Tools
Amplify Framework, an open source client
framework, includes libraries,
Cloud Services
- 10. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Amplify Framework: Library, UI Components, & CLI
Libraries focused on
frontend developers
Support for native apps
with iOS and Android
SDKs
Support for JavaScript
incl. React, React Native,
Angular, Ionic, and Vue
Category-based
opinionated
implementations: Auth,
Analytics, API, Storage,
Interactions, XR, PubSub
‘Escape’ hatches for all
AWS services
UI components for React,
React Native, Angular,
and Ionic
Support for drop-in auth,
photo pickers, and
chatbots
CLI toolchain for rapidly
integrating AWS services
to projects
Iterative code & type
generation for GraphQL
APIs throughout the
development cycle
- 12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Amplify Framework: UI Components
<amplify-photo-picker framework="Ionic”
(picked)="onImagePicked($event)"
(loaded)="onImageLoaded($event)">
</amplify-photo-picker>
<amplify-s3-album framework="Ionic"
path="pics”(selected)="onAlbumImageSelected($event)">
</amplify-s3-album>
onAlbumImageSelected( event ) {
window.open( event, '_blank' );
}
Photo Picker
S3 Album
- 13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Amplify Framework: CLI
$ amplify init
$ amplify add <category>
$ amplify push
Effortlessly configure backends
$ amplify add hosting
$ amplify publish
Hosting for static assets and websites
$ amplify codegen add
$ amplify codegen generate
Easily create APIs & client code
Category support for authentication, analytics, functions,
REST/GraphQL APIs, storage, notifications, interactions
Distribute content to end users with low latency and high
data transfer speeds via a secure, durable, and scalable
object storage infrastructure
Define your API using the GraphQL Schema Definition
Language (SDL). The toolchain will expand and transform a
full CloudFormation template that implements your data
model.
- 14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify CLI: Multi-environments and team workflow
- Git-style interaction & project switching
- Share backends between team members or clone for isolated development
User Users
- 15. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Breadth of Cloud Services for Mobile and Web Apps
Auth Analytics
Core
Experiences
Storage Interactions AR & VR PubSub
API
- 17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Managed Serverless
GraphQL service
Connect to data sources in
your account
Add data sync, real-time and
offline capabilities
GraphQL façade for
any AWS service
Conflict detection and
resolution in the
cloud
Enterprise security
features (IAM,
Cognito, API keys)
AWS AppSync: Realtime and offline data with GraphQL
- 18. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Why GraphQL with AppSync?
Data
Aggregation
Bandwidth
Optimization
Rapid
Prototyping
Easily evolve
APIs
Client-defined
Data Selection
- 19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
AWS AppSync Data Sources
- 20. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
AWS AppSync Resolvers
- 21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Amplify CLI and AppSync : $amplify add api
type Post
@model
@auth(
rules: [
{allow: owner, ownerField: "owner",
mutations: [create, update, delete],
queries: [get, list]},
])
{
id: ID!
title: String!
content: String!
rating: Int
owner: String
}
appSyncClient?.fetch(query: ListPostsQuery()) {
(result, error) in
if error != nil {
print(error?.localizedDescription ?? "")
return
}
result?.data?.listTodos?.items!.forEach {
print(($0?.title)! + " " + ($0?.content)!)
}
}
Step 1 - Edit & push schema Step 2 – Write app code
GraphQL backend and client types auto-generated
- 22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Amazon Cognito: Secure user directory that scales
Managed user directory Sign in with existing identities
(federation)
Customizable,
hosted UI, or SDK
AWS credentials and
access control
OpenID Connect and OAuth 2.0-based
- 23. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Amplify CLI and Amazon Cognito : $amplify add auth
• Customize sign-in/registration flow
• Customize email and SMS messages for Multi-Factor Authentication
• Customize attributes for your users, e.g. name, email
• Enable 3rd party authentication providers, e.g. Facebook, Twitter, Google
and Amazon
- 24. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Amplify CLI and Amazon Cognito : $amplify add auth
import { Auth } from 'aws-amplify’;
Auth.signUp({
username,
password,
attributes: {
email, // optional
phone_number, // optional
},
validationData: [] //optional
})
.then(data => console.log(data))
.catch(err => console.log(err));
Auth.confirmSignUp(username, code, {
forceAliasCreation: true
}).then(data => console.log(data))
.catch(err => console.log(err));
Auth.resendSignUp(username).then(() => {
console.log('code resent successfully');
}).catch(e => {
console.log(e);
});
Step 1 – Create a new user Step 2 – Confirm with code
- 25. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
AWS Amplify Console
Globally available
Your app is served via AWS’s
reliable content delivery
network with 144 points of
presence globally.
Easy custom domain setup
Set up custom domains managed in
Amazon Route 53 with a single click
plus get a free HTTPS certificate.
Simplified Continuous
Workflow
Connect your repository to
'git push' changes to your
frontend and backend in a
single workflow.
Feature Branch Deployments
Work on new features without
impacting production.
Create branch deployments linked to
each feature branch.
Atomic Deployments
All deployments either rollout
successfully or fail without requiring
maintenance windows.
Password Protection
Share yet-to-be released
features with internal
stakeholders by setting a
username and password
- 27. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Summary
• Developing Mobile and Web Apps on AWS
An Integrated Developer Experience
• Amplify Framework
An open source client framework, libraries, CLI, and UI components
• Cloud Services
Integrated via CLI toolchain with services such as AppSync, Cognito
• Developer Tools
Amplify Console for CI/CD and atomic deployments of your apps
- 29. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T
Thank you!
S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Stefano Sandrini
Solutions Architect @AWS