One programming language from the floor to the ceiling

ONE PROGRAMMING LANGUAGE FROM THE FLOOR TO THE CEILING
© 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

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

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

Javascript seen by a Java developer
4

View Slide

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

Frontend, the no-brainer
6

View Slide

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

Backend, let’s go Serverless !
10

View Slide

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

A W S L A M B D A
13
Autoscaling
Fault Tolerance
Security / Isolation
OS management
Logging & monitoring
Pay for usage

View Slide

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

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

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

{
"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

Even the infrastructure...
19

View Slide

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

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

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

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

… and the CI/CD pipeline
24

View Slide

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 { MyPipelineStack } from '../lib/my-pipeline-stack';
const app = new cdk.App();
new MyPipelineStack(app, 'MyPipelineStack', {
env: {
account: ‘111111111111',
region: 'eu-west-1',
}
});
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

AWS CDK Pipelines
26
Account 111111111111 (CI/CD)
Account 222222222222 (test)
Account 333333333333 (prod)
AWS CodePipeline AWS CodeBuild AWS CodeDeploy
AWS CDK

View Slide

AWS CDK Pipelines
27
Account 111111111111 (CI/CD)
AWS CloudFormation

View Slide

AWS CDK Pipelines
28
Account 111111111111 (CI/CD)
AWS CloudFormation

View Slide

More than a language,
a unified experience!
29

View Slide

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

Unified team
è Pluri-disciplinary members
(aka ‘full-stack engineers’)
è Ease collaboration
32

View Slide

Thank you!
Jerome Van Der Linden
@jeromevdl

View Slide

One programming language from the floor to the ceiling

One programming language from the floor to the ceiling

Jérôme Van Der Linden

More Decks by Jérôme Van Der Linden

Other Decks in Technology

Featured

Transcript