Progetta, crea e gestisci Modern Application per web e mobile su AWS

© 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

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

End-user requirements
Performant and
Responsive UX
Fast Data access Offline Data accessData Security Personalization

Business requirements
User BehaviorData AvailabilityData Security User Adoption

Approach to designing, building and
managing applications.
Increase agility of teams and reliability, security,
scalability of applications

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

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

An Integrated Developer Experience
Developer Tools
Amplify Framework, an open source client
framework, includes libraries,
Cloud Services

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

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

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.

© 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

Breadth of Cloud Services for Mobile and Web Apps
Auth Analytics
Core
Experiences
Storage Interactions AR & VR PubSub
API

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

Why GraphQL with AppSync?
Data
Aggregation
Bandwidth
Optimization
Rapid
Prototyping
Easily evolve
APIs
Client-defined
Data Selection

AWS AppSync Data Sources

AWS AppSync Resolvers

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

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

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

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

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

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

Progetta, crea e gestisci Modern Application per web e mobile su AWS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Progetta, crea e gestisci Modern Application per web e mobile su AWS

Semelhante a Progetta, crea e gestisci Modern Application per web e mobile su AWS (20)

Mais de Amazon Web Services

Mais de Amazon Web Services (20)

Progetta, crea e gestisci Modern Application per web e mobile su AWS