Introducing the Next Generation of AWS Amplify’s Fullstack Development Experience

AWS Amplify just announced a public preview of a new code-first developer experience that empowers frontend developers to quickly build and deploy fullstack apps with their existing TypeScript or Javascript skills. The first generation of the tooling offered a tooling-first experience, using a CLI/Console-based interactive workflow to create a backend. Gen 2 transitions to a code-first DX, allowing developers to succinctly express app requirements like data models, business logic, and authorization rules in TypeScript. The necessary cloud infrastructure is automatically deployed based on the declared app code, without requiring developers to explicitly configure AWS service interfaces.

This shift to a code-first approach comes from gathering feedback from the developer community. In this post, we’ll share this feedback and dig into how it inspired us to deliver a code-first developer experience for building app backends (Gen 2) that offers greater control, faster iteration, and better team workflows.

If you prefer to learn by doing, get started with our Quickstart guide and then come back to read this post.

The evolution of AWS Amplify

Before we dive into Gen 2, it’s worth describing how we got here.

• In November 2017 (fun fact: six years ago today, it’s our 6th birthday!), we launched AWS Amplify, initially an open-source JavaScript library that made it easier to develop cloud-connected mobile and web apps.
• In August 2018, we launched the Amplify CLI, a command line tool to help developers build app backends, and integrate them into web and mobile apps.
• In December 2020, we launched Amplify Studio (or formerly known as Admin UI) to give developers a visual interface to build a backend. And, in December 2021 we added UI building to the Amplify Studio experience with Figma-to-React capabilities and form generation.

During this period, hundreds of thousands of customers have utilized Amplify for building, deploying, and hosting web and mobile apps, spanning from small startups to large enterprises. These businesses have significantly accelerated their fullstack development efforts and been able to ship faster.

Customer feedback

Along the way we’ve received a lot of customer feedback 1:1 or online through our Twitter, GitHub, and Discord channels:

• Customers have told us they love how Amplify CLI and Studio’s abstraction feels like cheating to get going really fast. This is usually coupled with a strong interest in delving deeper into the underlying ‘magic’. Customers want a deeper understanding of the transition from intuitive CLI commands, such as amplify add auth or visual data modeling, to the generation of AWS CloudFormation JSON and configuration files in their code repositories. This becomes especially important when trying to modify the backend to implement a feature that Amplify doesn’t support out-of-the-box today.
• While developing on their local machines, customers want a faster feedback loop to validate changes. Customers also want to be able to iterate on their application stack without the risk of interfering with a team members’ environment.
• Customers have said Amplify CLI’s built-in environment capabilities and the tight integration with Amplify CI/CD workflows is one of the primary reasons they chose Amplify. Customers want improvements to the workflow to simplify rollouts to production and ability to adopt workflows that are suitable to their organization (e.g. trunk-based deploys).
• A sizable portion of our customers are new to AWS, and they consistently share how much they value the capabilities Amplify unlocks for fullstack application development. They also tell us that, when getting started, it takes them some time to figure out how the various Amplify tools (e.g. Amplify Console, Hosting, Studio, CLI) fit together to achieve their needs of building and deploying full-stack applications.

Our solution

Synthesizing this feedback told us we needed to reimagine our end-to-end developer experience — from local development experience to team collaboration. Our goals were to retain the strengths of the existing Amplify tools like enabling developers to go from zero to a deployed app fast, supporting a complex set of features when going from MVP to production, and supporting a wide range of team workflows. In addition customers want:

• Greater transparency into how their backend is generated to customize implementations and debug issues during local development.
• Faster iteration cycles to validate changes without interfering with team members’ environments during local development.
• Confident production rollouts when merging code changes from lower to upper environments. Also, flexibility to organize code based on team preferences with a deployment workflow that mirrors how teams operate.
• Reduction in concept count for new developers onboarding to Amplify and AWS to help them get going with the tooling they are already familiar with (TypeScript and Git). Administration of deployed cloud resources built-in.

To address these asks, we’re introducing a number of new features that will improve local development and team collaboration.

1. TypeScript-first @aws-amplify/backend libraries for Data and Auth, layered on CDK L3 constructs

We are launching new libraries built with AWS Cloud Development Kit (AWS CDK) that allow customers to use TypeScript to configure their backend. TypeScript allows developers to see code completion, IntelliSense, inline documentation as they author their backend. For data in particular, we have introduced a fully typed version of the Gen 1 schema.graphql data modeling experience. The strong typing allows developers to catch validation errors when building a data model; a breaking change in the backend code immediately reflects as a type error in the co-located frontend code.

2. File-based convention

The TypeScript library coupled with a file-based convention allows developers to start building fullstack apps with a minimal footprint on their project structure. The file-based convention provides transparency and predictability for developers to author their backend — by grouping resources by use case into separate files, developers know exactly where to look for common resource definitions.

3. Per-developer cloud sandbox environments

Every developer on a team gets their own developer sandbox environment for every app they work on. The sandbox runs locally on a machine (similar to a localhost server) and watches the Amplify project for changes. Every saved code change is automatically synced and deployed to the cloud from the local environment. Sandbox deployments are optimized for faster iteration; we have reduced deployment times from minutes to seconds for common changes (e.g. database schemas, resolver code, and function code).

4. Unified management console

The Gen 2 Amplify console consolidates the experience across Studio and Hosting, providing a single place for customers to manage their builds, hosting settings (such as custom domains), deployed resources (such as data browser or user management), and environment variables and secrets.

5. Fullstack Git branches

Amplify now offers fullstack branch deployments that allow you to automatically deploy infrastructure and application code changes from feature branches. All team environments map 1:1 with Git branches, reducing the concept count developers need to learn when deploying branches in Amplify.

6. Extend backend with AWS CDK

Because our entire backend building experience is layered on AWS Cloud Development Kit (AWS CDK) L3 constructs, customers who want to use any AWS service will be able to do so by simply authoring AWS CDK L1 or L2 code inline in their project. For example, customers wanting to add Amazon Geo Location Services to their backend can add a custom/geo/resource.ts file and use CDK code inline.

7. Generate forms over data

Developers can generate React forms for their data model by running a single command (amplify generate forms) in their terminal. Forms are fully customizable, allowing lifecycle management, and supporting custom validation logic in code,.

8. Monorepo and multi-repo support

Amplify’s CI/CD works well with teams that organize their code in a monorepo, including tooling such as Nx and Yarn Workspaces. It also supports backend-only CI/CD, allowing organizations with separate frontend and backend teams can manage their repositories separately.

9. Custom pipelines

Gen 2 offers the ability to integrate custom deployment pipelines, allowing you to use GitHub Actions, AWS CodePipeline or Amazon CodeCatalyst to deploy fullstack apps across regions or AWS accounts. This unlocks the ability to set up trunk-based deployments with stages and multi-account deployments. Read more about custom pipelines in our docs.

10. Centralized secret management

Gen 2 offers centralized secret and environment variable management for all fullstack branches. Secrets allow you to securely configure environment-specific values like social sign-in keys, function environment variables, function secrets, and other sensitive data needed by your application across environments. You can set secrets up in the Amplify console, then use them in your code like this example.

Next steps

The Amplify Gen 2 vision was directly inspired by feedback from our developers. You asked for more transparency and control over backend code, so we delivered that with a TypeScript-first approach. You wanted faster feedback loops, so we built cloud sandbox deployments that sync code changes on every save. You needed flexible deployment workflows for your team, so Amplify now offers fullstack Git branches and custom pipeline support. And, you requested a centralized place to manage everything, which our new unified console provides.

We’re eager to get your feedback as we move toward general availability. Upcoming focus areas include expanding backend features to cover additional use cases like storage and functions, improving the local sandbox experience, and building migration tooling for Gen 1 customers.

To get started with Amplify Gen 2, try out our Quickstart tutorial.