$30 off During Our Annual Pro Sale. View Details »

One programming language from the floor to the ceiling

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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 {
    variable : T;
    }
    let cl = new MyClass();
    Looks
    familiar…

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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, …

    View Slide

  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 = (
    event: TEvent,
    context: Context,
    callback: Callback,
    ) => void | Promise;
    import { Handler } from 'aws-lambda’;
    export const handler: Handler =
    async (event, context) => {
    return await convertStringToNumber(event);
    }
    npm install @types/aws-lambda

    View Slide

  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://.lambda-url..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

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide