Upgrade to Pro — share decks privately, control downloads, hide ads and more …

One programming language from the floor to the ...

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!

Tweet

More Decks by Jérôme Van Der Linden

Other Decks in Technology

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