Amplify Gen2 Deep Dive / How to convey backend types to the frontend #30DaysOfAmplify

Slide of 30 days of Amplify.
https://konfhub.com/30-days-of-amplify

Transcript

1. 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
2. 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
3. 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
4. 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
5. AMPLIFY GEN2 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 5
6. 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
7. 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
8. 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
9. Relation from Backend to Frontend, CDK 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 9
10. Relation from Backend to Frontend, CDK 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 10
11. Relation from Backend to Frontend, CDK 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 11
12. Relation from Backend to Frontend, CDK 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 12
13. DEEP DIVE IN CODES 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 13
14. 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
15. Check Fields, Models, Schema 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 15
16. 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 16 Field type is “ModelField”. amplify/data/resource.ts Fields
17. 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
18. 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
19. 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
20. 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 20 Model type is “ModelType”. amplify/data/resource.ts Models
21. 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
22. 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
23. 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
24. 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 24 Schema type is “ModelSchema”. amplify/data/resource.ts Schema
25. 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
26. 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
27. 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
28. 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
29. 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
30. Frontend Type-hinting 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 30
31. 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
32. 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
33. 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
34. 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
35. 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
36. 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
37. 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
38. 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
39. 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
40. Run CDK on Sandbox command 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 40
41. 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 41 “ampx” command uses “yargs”. So, check “createMainParser”. packages/cli/src/ampx.ts
42. 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
43. 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
44. 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
45. 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
46. 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
47. 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
48. 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
49. 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
50. 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
51. 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
52. 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
53. 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
54. 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 54 “this.executor” is the second argument. packages/sandbox/src/file_watching_sandbox.ts
55. 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
56. 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”.
57. 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 57 packages/sandbox/src/sandbox_executor.ts “this.backendDeployer” is the first argument.
58. 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
59. 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”.
60. 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.
61. 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.
62. 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.
63. 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.
64. 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.
65. 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 65 packages/backend-deployer/src/cdk_deployer.ts “this.packageManagerController” is the third argument.
66. 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.
67. 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
68. 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”.
69. 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”.
70. 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”.
71. 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.
72. Relation from Backend to Frontend, CDK (revisited) 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 72
73. 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
74. END 30 days of AWS Amplify / #30DaysOfAmplify / Amplify Gen2 Deep Dive 74