One programming language from the floor to the ceiling

Building a web application? Let’s use Typescript.
Building the backend for frontend? Let’s use Typescript!
Building the underlying infrastructure for all of this? Let’s use Typescript too!
During this session, we’ll see how to build a complete application, from the infrastructure to the frontend, using one single programming language and a set of well-selected tools.
If you’ve always dreamed about becoming a full stack developer, it has never been that easy, come to see how!

Transcript

1. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. One programming language from the floor to the ceiling A P P D E V C O N 2 0 2 3 Jerome Van Der Linden Sr Solutions Architect Builder - AWS
2. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. Who am I? Jérôme Van Der Linden • 🇫🇷 even if my name sounds 🇳🇱 • Solutions Architect Builder @ AWS, Geneva (Switzerland) • Passionate about Serverless, automation & testing • Former architect, agile & devops coach, Java developer, Android tech lead • Husband and father of 3 @jeromevdl 2
3. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. Agenda 1. A few words on Javascript / Typescript 2. Frontend, the no-brainer 3. Backend, let’s go Serverless! 4. Even the infrastructure… 5. … and the CI/CD pipeline
4. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. Javascript seen by a Java developer 4
5. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. But Typescript is not Javascript… • Strongly typed • Interfaces • Generics 5 const name: string = 'TypeScript’; let isBetter: boolean = true; interface MyInterface { myVariable: string; myMethod(param: string): void; } class MyClass implements MyInterface { myMethod(param: string) { console.log(param); } } class MyClass<T> { variable : T; } let cl = new MyClass<string>(); Looks familiar…
6. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Frontend, the no-brainer 6
7. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. Create, serve, what else… ? 7 npx create-react-app my-app --template typescript npm start npx @vue/cli create my-app yarn serve ng new my-app ng serve -o
8. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Backend, let’s go Serverless ! 10
9. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. We need some compute… S E R V E R L E S S C O M P U T E 12 No infrastructure provisioning, No {OS/Patching/Upgrade/…} management Automatic scaling Pay for value Highly available and secure
10. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. We need some compute… A W S L A M B D A 13 Autoscaling Fault Tolerance Security / Isolation OS management Logging & monitoring Pay for usage
11. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. We need some compute… A W S L A M B D A 14 Function Event source Changes in data state Changes in resource state Request to endpoints Services(anything) Database AWS Service 3rd party service
12. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. We need some compute… A W S L A M B D A 15 Anatomy of a Function export const handler = async function(event, context) { console.log('Hello world!'); } • Handler: function that will be triggered for each event received • Event: the incoming event that triggered the function • Context: informations about the function configuration and invocation • Your code, anything, …
13. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. We need some compute… A W S L A M B D A 16 Anatomy of a Function export type Handler<TEvent = any, TResult = any> = ( event: TEvent, context: Context, callback: Callback<TResult>, ) => void | Promise<TResult>; import { Handler } from 'aws-lambda’; export const handler: Handler<string, number> = async (event, context) => { return await convertStringToNumber(event); } npm install @types/aws-lambda
14. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. { "version": "2.0", "routeKey": "$default", "rawPath": "/mountains/Japan", "rawQueryString": "order=desc", "cookies": [ "cookie1", "cookie2" ], "headers": { "header1": "value1", "header2": "value1,value2" }, "queryStringParameters": { ”order": ”desc" }, "body": null, "requestContext": { "accountId": "123456789012", "apiId": "", "authentication": null, "authorizer": { "iam": { event … and an API to expose it to the frontend L A M B D A U R L 18 GET https://<url-id>.lambda-url.<region>.on.aws/mountains/Japan?order=desc export const getMountainHandler: APIGatewayProxyHandlerV2 = async(event: APIGatewayProxyEventV2) => { console.log(event.requestContext.http.path) // GET const pathParameters = event.rawPath.split(‘/’); const sort = event.queryStringParameters ? event.queryStringParameters.order : ‘desc’; // Do some stuff... return { ... } } { "statusCode": "200", "content-type": "application/json", "body": "...", "isBase64Encoded": "false" } output
15. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Even the infrastructure... 19
16. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. Infrastructure as … 20 Manual Scripted Generators Abstractions Declarative Wikis, Playbooks, Ask-Bob-he-knows #!/bin/bash CloudFormation, Terraform Troposphere, GoFormation AWS CDK, Pulumi Real code Pseudo code (yaml, json)
17. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. AWS CDK – Cloud Development Kit P R O V I S I O N Y O U R I N F R A S T R U C T U R E W I T H R E A L C O D E 21 CDK CLI AWS CloudFormation Stacks & Constructs Source Code Templates + Assets Cloud Assembly Cloud Resources execute synthesize deploy provision ! cdk init // create new project " npm run build // build project # cdk diff // check what will change $ cdk synth // create templates and assets % cdk deploy // push changes to the cloud
18. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. AWS CDK – Cloud Development Kit E X A M P L E – L E V E L 2 C O N S T R U C T S 22 AWS Lambda Amazon DynamoDB URL Query
19. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. AWS CDK – Cloud Development Kit E X A M P L E – L E V E L 3 C O N S T R U C T S 23 Amazon CloudFront Amazon S3 import { CloudFrontToS3 } from '@aws-solutions-constructs/aws-cloudfront-s3'; new CloudFrontToS3(this, 'Frontend', {}); 250 lines of CloudFormation: • CloudFront • Access Logging • Origin Access Identity • Security Headers • S3 • Access Logging • Server-side encryption • Enforce in-transit encrytion • Deny public access
20. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. … and the CI/CD pipeline 24
21. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. AWS CDK Pipelines 25 import * as cdk from 'aws-cdk-lib'; import { Construct } from 'constructs'; import * as pipelines from 'aws-cdk-lib/pipelines’; import { MyPipelineAppStage } from './my-pipeline-app-stage'; export class MyPipelineStack extends cdk.Stack { constructor(scope: Construct, id: string, props?: cdk.StackProps) { super(scope, id, props); const pipeline = new pipelines.CodePipeline(this, 'Pipeline', { pipelineName: 'MyPipeline', synth: new pipelines.ShellStep('Synth', { input: pipelines.CodePipelineSource.gitHub('OWNER/REPO', 'main'), commands: ['npm ci', 'npm run build', 'npx cdk synth'] }) }); const test = pipeline.addStage(new MyPipelineAppStage(this, "test", { env: { account: ”222222222222", region: "eu-west-1" } })); const prod = pipeline.addStage(new MyPipelineAppStage(this, "prod", { env: { account: ”333333333333", region: "eu-west-1" } })); prod.addPre(new pipelines.ManualApprovalStep('Approve')); } } #!/usr/bin/env node import * as cdk from 'aws-cdk-lib'; import { MyPipelineStack } from '../lib/my-pipeline-stack'; const app = new cdk.App(); new MyPipelineStack(app, 'MyPipelineStack', { env: { account: ‘111111111111', region: 'eu-west-1', } }); import * as cdk from 'aws-cdk-lib'; import { Construct } from "constructs"; import { MyStack } from './my-stack'; export class MyPipelineAppStage extends cdk.Stage { constructor(scope: Construct, id: string, props?: cdk.StageProps) { super(scope, id, props); const myStack = new MyStack(this, 'MyStackWithResources'); } } bin/my-pipeline.ts lib/my-pipeline-stack.ts lib/my-pipeline-app-stage.ts
22. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. AWS CDK Pipelines 26 Account 111111111111 (CI/CD) Account 222222222222 (test) Account 333333333333 (prod) AWS CodePipeline AWS CodeBuild AWS CodeDeploy AWS CDK
23. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. AWS CDK Pipelines 27 Account 111111111111 (CI/CD) Account 222222222222 (test) Account 333333333333 (prod) AWS CodePipeline AWS CodeBuild AWS CodeDeploy AWS CloudFormation
24. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. AWS CDK Pipelines 28 Account 111111111111 (CI/CD) Account 222222222222 (test) Account 333333333333 (prod) AWS CodePipeline AWS CodeBuild AWS CodeDeploy AWS CloudFormation
25. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. More than a language, a unified experience! 29
26. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. Unified development environment • Single IDE • Single codebase • monorepo • shared libraries / model • Single build tool (tsc) • Single test framework (jest…) è Streamline/ease the development process è Increase consistency / productivity / efficiency 31
27. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. Unified team è Pluri-disciplinary members (aka ‘full-stack engineers’) è Ease collaboration 32
28. ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Thank you! Jerome Van Der Linden @jeromevdl