Full-stack web and mobile development with cloud-based backends

Full-stack web and mobile

development with cloud-based

backends

Stefano Sandrini (he/him)

FM- 01

Principal Solutions Architect

Amazon Web Services

Agenda

Current challenges in building web and mobile applications

Accelerating development across the full stack

How to develop feature-rich full-stack applications on AWS

How to support critical workloads at scale

Front-end development

Front-end developers build what users see

Front-end development

14M web developers 10M mobile developers

Evolution of front end

1989 1995 20021996 2006 2007 2009 2013

Worldwide web – HTML/HTTP

AJAX

JavaScript and CSS

jQuery

iPhone

NodeJS

React

2015

Serverless

Amazon EC2

Types of apps: The ’90s

Static content with hyperlinks

Types of apps: The 2000s

Social media, feature-rich sites such as Facebook and YouTube

2007: The iPhone

Apps were born – feature-rich and performant using device context

2010 to present

Web apps – responsive, performant, feature-rich

How have these changes

impacted the responsibilities

of a front-end developer?

Full-stack app

Backend

Database Servers

Server-side languages Frameworks Javascript CSS HTML

Front-end

API

Full-stack app

Backend

Database Servers

Server-side languages API Frameworks Javascript CSS HTML

Front-end

Serverless Node –

JavaScript in

the front end

and back end

GraphQL allows

front end

developers to

query/mutate

data

Full-stack app

Backend

Database Servers

Server-side languages Frameworks Javascript CSS HTML

Front-end

API

Front-end developers are increasingly responsible

for building full-stack functionality

Security

Online/Offline access

Cost

Development time

Frameworks

Quality

Device fragmentation

Scale

Locality

Performance

How to Simplify Increased Complexity?

Front-end developers need solutions that

integrate with current tools and workflows

and draw on existing skillsets to accelerate

development across the full stack

Modern application development

• Requires an integrated,

seamless experience with tools

that meet front-end developers

where they are

• Enables developers to innovate

faster with confidence

AWS can help you

• Accelerate extensible,

feature-rich, full-stack

application development

• Support critical,

high-scale workloads

AWS can increase the productivity of front-end developers

enable individuals, small teams, and enterprises to

build meaningful, well-architected applications

provide a broad range of services to support your

business goals

AWS Amplify AWS Device Farm Amazon Location

Service

AWS AppSync

You can accelerate application development,

increase productivity, and innovate faster

We built AWS Amplify to make it easy for front-end developers

to build full-stack apps

AWS Amplify

AWS Amplify provides tools for front-end

developers to build, ship, and scale their app

Ship

ScaleBuild

BUILD

CLI Studio Libraries

Build and manage app backend

Feature categories

Build and manage app backend

Model data and

relationships to set up

a GraphQL API powered by

AWS AppSync

Set up authentication and

authorization

Set up file storage

Extend with the CLI

toolchain to add functions

Manage app data, files,

users, and groups

Connect app using Amplify libraries

Front-end libraries for web, iOS, Android, React Native, and Flutter

Ship faster with Amplify Hosting

Fully managed hosting service

for modern web apps

Full-stack continuous

deployments

Easy custom

domain setup

PR previews

Modify Add Export

amplify override ...

amplify add custom

amplify export

Scale with the Amplify CLI

Override Amplify

provisioned services

with new features

Use CDK to add new

functionality to Amplify

backend

Export Amplify

backend to your own

DevOps pipeline

Using AWS Amplify on a

serverless architecture cost us

90 percent less than if we had

built the app using a more

traditional method. This is a

huge win for us.

Hemanth Jayaraman

Senior Director of Cloud Engineering, Neiman Marcus

Busby’s results with Amplify, both in terms of

speed to market and cost-savings, speak for

themselves. A mere three months from the time I

started using Amplify, we had a full-fledged MVP

that was ready for use by cyclists and to be shown

to investors. Our team estimated that choosing

Amplify saved us six months of development time

and well over $100,000 in outside development

costs.

Kirk Ryan

Co-founder - Busby

Until now, our focus has been to help front-end developers

accelerate building and connecting to an app backend

Backend

Database Servers

Server-side languages Frameworks Javascript CSS HTML

Front-end

API

AWS Amplify

Front-end developers also tell us that building UI

is time-consuming and a manual process

Backend

Database Servers

Server-side languages Frameworks Javascript CSS HTML

Front-end

API

A solution to help facilitate the

designer-developer handoff, ensuring that

developers incorporate pixel-perfect UI designs

Amplify Studio

Accelerate UI app development

Amplify Studio

Visually build complete, feature-rich apps in hours instead

of weeks, with full control over the application code

Accelerate UI app development

Figma design-to-code approach

Import Figma prototypes built by

designers into Amplify Studio as

clean React code for seamless

collaboration

Pre-built UI component library

Select from dozens of popular

React components, such as

buttons, forms, and marketing

templates, and customize them

to fit your style guide

Front-to-back configuration

Visually bind your front-end UI

components in your layout to data

sources in your cloud-connected

app backend in clicks

Demo

Amplify Studio UI app development

• Set up UI components within Figma

• Sync components to Studio as React code

• Build an app backend with a database and GraphQL API

• Extend app features by writing code

• Zero-configuration, Git-based workflow for full-stack CI/CD

and hosting

Improve the quality of your web and mobile applications by testing

across desktop browsers and real mobile devices hosted

in the AWS Cloud

AWS Device Farm

AWS AppSync

Build scalable applications

on a range of data sources, including those requiring

real-time updates and offline data access

AppSync Common Use Cases

• GraphQL Microservices

• Unified API for accessing data from data lake

• IoT real-time dashboard

• High throughput real-time fanout to millions of clients

• Real-time currency changes, stock prices, account balance

• Display live tv and video metadata

• Chat and second screen communication within live broadcast

• Field service apps where offline support is critical

Amazon Location

Service

Securely and easily add location functionality to applications

Track assets and resources, Routing and delivery, Visualization,

Customer engagement

AWS can increase the productivity of front-end developers

enable individuals, small teams, and enterprises to

build meaningful, well-architected applications

provide a broad range of services to support your

business goals

AWS Amplify AWS Device Farm Amazon Location

Service

AWS AppSync

You can accelerate application development,

increase productivity, and innovate faster

Deepen your skills with digital

learning on demand

Access 500+ free digital courses

and Learning Plans

Earn an industry-recognized

credential

AWS Skill Builder

AWS Certifications

Explore resources with a variety

of skill levels and 16+ languages

to meet your learning needs

Join the AWS Certified community

and get exclusive benefits

Receive Foundational,

Associate, Professional,

and Specialty certifications

Train now

Access new

exam guides

Learn in-demand AWS Cloud skills

Thank you!

Stefano Sandrini

[email protected]

@electricste

Please complete

the session survey