Slide 1
Slide 1 text
Amplify Gen2 Deep Dive
How to convey backend types to the frontend
30 days of AWS Amplify
2024/11/13
Kihara, Takuya (@tacck)
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive
1
Slide 2
Slide 2 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive
2
Kihara, Takuya
木原 卓也 / @tacck / Sapporo, Japan
CO-OP Sapporo
生活協同組合コープさっぽろ
Software Engineer / Flutter, TypeScript, Vue.js, React
Amplify Japan User Group
Co-organizer
Yuru-Web@Sapporo
Organizer (Sapporo local community)
AWS Community Builder
Since Q2 2021 / Category: Front-end Web and Mobile
Community
Slide 3
Slide 3 text
Amplify Japan User Group
■ We run a Japanese website about Amplify and hold meetups.
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 3
Slide 4
Slide 4 text
Talk about
■ Amplify Gen2
– What is the AWS Amplify ?
– Developer Experience
– What is Sandbox ?
– Relation from Backend to Frontend, CDK
■ Deep Dive in Codes
– Backend Resource about Data
– Convey backend types to Frontend
– Deploy Resources by CDK
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 4
Slide 5
Slide 5 text
AMPLIFY GEN2
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 5
Slide 6
Slide 6 text
What is the AWS Amplify ?
■ Service and tools for Frontend Application development
– Hosting with CI/CD
– Multi-environment based on Git branches
– Libraries for AWS Resources (Cognito, S3, AppSync, etc)
– Web Frontend
■ React / Next.js / Angular / Vue / JavaScript
– Smartphone Application
■ React Native / Flutter / Android / Swift
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 6
Slide 7
Slide 7 text
Developer Experience
■ Development with TypeScript
– Web Frontend library using TypeScript
– Resource definition using TypeScript files
– Lambda functions can be written in TypeScript
– etc...
■ Sandbox (Development environment on AWS)
– Run CDK with hotswapping
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 7
Slide 8
Slide 8 text
What is Sandbox ?
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 8
■ For development environment on your local machine
– Providing an environment on AWS for each team member
– Quick resource deployment by hotswaping
Slide 9
Slide 9 text
Relation from Backend
to Frontend, CDK
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 9
Slide 10
Slide 10 text
Relation from Backend
to Frontend, CDK
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 10
Slide 11
Slide 11 text
Relation from Backend
to Frontend, CDK
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 11
Slide 12
Slide 12 text
Relation from Backend
to Frontend, CDK
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 12
Slide 13
Slide 13 text
DEEP DIVE IN CODES
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 13
Slide 14
Slide 14 text
Steps
■ Target
– Data Resources (amplify/data/resource.ts)
■ Check Fields, Models, Schema
■ Frontend Type-hinting
■ Run CDK on Sandbox command
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 14
Slide 15
Slide 15 text
Check Fields, Models, Schema
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 15
Slide 16
Slide 16 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 16
Field type is “ModelField”.
amplify/data/resource.ts
Fields
Slide 17
Slide 17 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 17
resource.ts string() is defined
ModelField.ts string().
And return _field().
node_modules/@aws-amplify/data-schema/src/ModelField.ts
Fields
Slide 18
Slide 18 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 18
Filed methods like require() is defined this
method.
And return type is “ModelField”.
node_modules/@aws-amplify/data-schema/src/ModelField.ts
Fields
Slide 19
Slide 19 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 19
Filed methods type is defined here.
If you use require() in resource, “UsedMethod”
has “required” and omit from type-hinting.
node_modules/@aws-amplify/data-schema/src/ModelField.ts
Fields
Slide 20
Slide 20 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 20
Model type is “ModelType”.
amplify/data/resource.ts
Models
Slide 21
Slide 21 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 21
resource.ts model() is defined
ModelType.ts model().
And return _model().
node_modules/@aws-amplify/data-schema/src/ModelType.ts
Models
Slide 22
Slide 22 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 22
_model() return type is “ModelType”.
node_modules/@aws-amplify/data-schema/src/ModelType.ts
Models
Slide 23
Slide 23 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 23
Model methods type is defined here.
If you use authorization() in resource,
“UsedMethod” has “authorization” and omit from
type-hinting.
node_modules/@aws-amplify/data-schema/src/ModelType.ts
Models
Slide 24
Slide 24 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 24
Schema type is “ModelSchema”.
amplify/data/resource.ts
Schema
Slide 25
Slide 25 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 25
resource.ts schema() is defined
ModelSchema.ts schema.
The actual method is bindConfigToSchema().
node_modules/@aws-amplify/data-schema/src/ModelSchema.ts
Slide 26
Slide 26 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 26
bindConfigToSchema() return type is
“SchemaReturnType”.
And, SchemaReturnType’s actual type is
ModelSchema.
node_modules/@aws-amplify/data-schema/src/ModelSchema.ts
Schema
Slide 27
Slide 27 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 27
Schema methods type is defined here.
If you use authorization() in resource,
“UsedMethod” has “authorization” and omit from
type-hinting.
node_modules/@aws-amplify/data-schema/src/ModelSchema.ts
Schema
Slide 28
Slide 28 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 28
Check bindConfigToSchema() again.
This method returns _ddbSchema().
node_modules/@aws-amplify/data-schema/src/ModelSchema.ts
Schema
Slide 29
Slide 29 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 29
This method defines a Schema object.
For example, the “models” field includes
“Todo”.
node_modules/@aws-amplify/data-schema/src/ModelSchema.ts
Schema
Slide 30
Slide 30 text
Frontend Type-hinting
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 30
Slide 31
Slide 31 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 31
“Schema” is from resource.ts.
“Todo” is from resource.ts too.
Where is “type” from?
amplify/data/resource.ts
Slide 32
Slide 32 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 32
Type argument “Schema” is ModelSchema,
which was seen previously.
ModelSchema has the same object as
GenericModelSchema.
So, this type is InternalClientSchema.
node_modules/@aws-amplify/data-schema/src/ClientSchema/index.ts
Slide 33
Slide 33 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 33
Type argument “CustomerSchema” is
extended by ModelSchemaContents.
So, the property type is ClientSchemaProperty.
node_modules/@aws-amplify/data-schema/src/ClientSchema/index.ts
Slide 34
Slide 34 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 34
Type “T[K]” is extended by ModelType.
So, the valid type is RemapModel.
node_modules/@aws-amplify/data-schema/src/ClientSchema/index.ts
Slide 35
Slide 35 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 35
Here is the type check sequence.
For the specific type, see “ClientModel”.
node_modules/@aws-amplify/data-schema/src/ClientSchema/index.ts
Slide 36
Slide 36 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 36
The first "type" we saw was here.
And the value type is “ClientFields”.
For the specific type, see “ResolveFields”.
node_modules/@aws-amplify/data-schema/src/ClientSchema/Core/ClientModel.ts
Slide 37
Slide 37 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 37
The value’s type is defined as
“ResolveIndividualField”.
node_modules/@aws-amplify/data-schema/src/ClientSchema/utilities/ResolveField.ts
Slide 38
Slide 38 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 38
Check the type argument T is extended
“BaseModelField”.
node_modules/@aws-amplify/data-schema/src/ClientSchema/utilities/ResolveField.ts
Slide 39
Slide 39 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 39
The substance of the BaseModelField type is
the ModelField type.
node_modules/@aws-amplify/data-schema/src/ModelField.ts
Slide 40
Slide 40 text
Run CDK on Sandbox command
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 40
Slide 41
Slide 41 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 41
“ampx” command uses “yargs”.
So, check “createMainParser”.
packages/cli/src/ampx.ts
Slide 42
Slide 42 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 42
Focus on the sandbox.
So, check "createSandboxCommand".
packages/cli/src/main_parser_factory.ts
Slide 43
Slide 43 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 43
There are two main points.
One is "defining command handler",
and another is "defining calling CDK".
packages/cli/src/commands/sandbox/sandbox_command_factory.ts
Slide 44
Slide 44 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 44
This one is "define calling CDK".
packages/cli/src/commands/sandbox/sandbox_command_factory.ts
Slide 45
Slide 45 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 45
This one is "define command handler”.
Check this.
packages/cli/src/commands/sandbox/sandbox_command_factory.ts
Slide 46
Slide 46 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 46
"SandboxCommand" is used "yargs".
When we need to run the sandbox command,
we run "npx ampx sandbox" on the terminal.
The argument "sandbox" hits "this.command =
'sandbox'" in this code.
packages/cli/src/commands/sandbox/sandbox_command.ts
Slide 47
Slide 47 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 47
"yargs" calls the handler in this code.
In the handler, call "sandbox.start".
“sandbox” is from the first argument.
packages/cli/src/commands/sandbox/sandbox_command.ts
Slide 48
Slide 48 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 48
Go back to "createSandboxCommand".
The first argument, "sandboxFacory", is
"SandboxSingletonFactory".
It is "defining calling CDK".
packages/cli/src/commands/sandbox/sandbox_command_factory.ts
Slide 49
Slide 49 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 49
The substance of the processing is in
“getInstance”.
And it calls “FileWatchingSandbox”.
packages/sandbox/src/sandbox_singleton_factory.ts
Slide 50
Slide 50 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 50
“sandbox.start” in “SandboxCommand” is
defined in this code.
packages/sandbox/src/file_watching_sandbox.ts
Slide 51
Slide 51 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 51
The "start" method calls the "deployAndWatch"
method.
packages/sandbox/src/file_watching_sandbox.ts
Slide 52
Slide 52 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 52
The “deployAndWatch” method calls the
“this.deploy” method.
packages/sandbox/src/file_watching_sandbox.ts
Slide 53
Slide 53 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 53
The “this.deploy” method calls the
“this.executor.deploy” method.
packages/sandbox/src/file_watching_sandbox.ts
Slide 54
Slide 54 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 54
“this.executor” is the second argument.
packages/sandbox/src/file_watching_sandbox.ts
Slide 55
Slide 55 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 55
Go back to “SandboxSingletonFactory”.
The second argument, “executor”, is
“AmplifySandboxExecutor”.
packages/sandbox/src/sandbox_singleton_factory.ts
Slide 56
Slide 56 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 56
packages/sandbox/src/sandbox_executor.ts
“this.executor.deploy” in
“FileWatchingSandbox” is defined in this code.
And it calls “this.backendDeployer.deploy”.
Slide 57
Slide 57 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 57
packages/sandbox/src/sandbox_executor.ts
“this.backendDeployer” is the first argument.
Slide 58
Slide 58 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 58
Go back to “SandboxSingletonFactory”.
The first argument, “backendDeployer”, is
“BackendDeployerFactory”.
packages/sandbox/src/sandbox_singleton_factory.ts
Slide 59
Slide 59 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 59
packages/backend-deployer/src/cdk_deployer_singleton_factory.ts
The substance of the processing is in
“getInstance”.
And it calls “CDKDeployer”.
Slide 60
Slide 60 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 60
packages/backend-deployer/src/cdk_deployer.ts
“this.backendDeployer.deploy” in
“AmplifySandboxExecutor” is defined in this
code.
Slide 61
Slide 61 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 61
packages/backend-deployer/src/cdk_deployer.ts
The “deploy” method calls the
“this.tryInvokeCdk” method.
Slide 62
Slide 62 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 62
packages/backend-deployer/src/cdk_deployer.ts
The “this.tryInvokeCdk” method calls the
“this.invokeCdk” method.
Slide 63
Slide 63 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 63
packages/backend-deployer/src/cdk_deployer.ts
The “this.invokeCdk” method calls the
“this.executeCommand” method.
Slide 64
Slide 64 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 64
packages/backend-deployer/src/cdk_deployer.ts
The “this.executeCommand” method calls the
“this.packageManagerController.runWithPacka
geManager” method.
Slide 65
Slide 65 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 65
packages/backend-deployer/src/cdk_deployer.ts
“this.packageManagerController” is the third
argument.
Slide 66
Slide 66 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 66
packages/backend-deployer/src/cdk_deployer_singleton_factory.ts
Go back to “BackendDeployerFactory”.
The third argument,
“packageManagerController”, is the first
argument of the base class.
Slide 67
Slide 67 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 67
Go back to “SandboxSingletonFactory” again.
The first argument,
“packageManagerController”, is
“BackendDeployerFactory”.
packages/sandbox/src/sandbox_singleton_factory.ts
Slide 68
Slide 68 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 68
packages/cli-core/src/package-manager-controller/package_manager_controller_factory.ts
“getPackageManagerController” is a method
that returns a class based on the package
manager.
Here, check “NpmPackageManagerController”.
Slide 69
Slide 69 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 69
packages/cli-core/src/package-manager-controller/npm_package_manager_controller.ts
“NpmPackageManagerController” constructor
calls super.
So, check “PackageManagerControllerBase”.
Slide 70
Slide 70 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 70
packages/cli-core/src/package-manager-controller/package_manager_controller_base.ts
We search “runWithPackageManager” in
“CDKDeployer” and find here.
And it calls “this. executeWithDebugLogger”.
Slide 71
Slide 71 text
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 71
packages/cli-core/src/package-manager-controller/execute_with_debugger_logger.ts
Finally, we find the CDK execution place.
execa is the package that runs the system
command.
Slide 72
Slide 72 text
Relation from Backend
to Frontend, CDK (revisited)
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 72
Slide 73
Slide 73 text
Wrap up
■ Backend resources (i.e. “amplify/data/resource.ts”) convey helpful types to the
frontend.
– It is worked with type definitions of TypeScript.
■ Sandbox is watching files changed and running the CDK command in the ampx
command.
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 73
Slide 74
Slide 74 text
END
30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 74