DEV Community: Nabeel Valley

Using React.memo for Controlling Component Rendering

Nabeel Valley — Tue, 16 Aug 2022 00:00:00 +0000

React Top Level API
Component Rendering
API Definition
Rendering On a Specific Type of Change
Conclusion
REPL
References

React Top Level API

The React library contains some functions at it's top level scope. Amongst these are the built-in hooks (like useState, useCallback, etc.) as well as some other functions for manipulating React Elements directly - which I've covered in a previous post on The React Top Level API

Component Rendering

By default, React will trigger a component render whenever there is a change to its state or props. React.memo allows us to take control of the props triggered render by giving us a way to look into the prop-change process

React.memo is a higher order component (HOC) that allows us to wrap a component and control whether or not it is updated/re-rendered by defining a function that tells react whether or not it's props are different - and effectively whether this should trigger a new render

Doing the above is useful for complex components that don't necessarily need to be rendered every time their props are changed

API Definition

The React Docs give us the following example for the React.memo HOC:

const MyComponent = (props) => {
  /* render using props */
}

const areEqual = (prevProps, nextProps) => {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}

const MyComponentMemo = React.memo(MyComponent, areEqual);

The component MyComponent will be rendered whenever props are changed, however, using React.memo lets us define a function called areEqual that we can can use to tell React.memo whether or not the new props would render a different result to the old props

We can then use MyComponentMemo in place of MyComponent to take control of when the component is rendered

Rendering On a Specific Type of Change

Say we have the specific component TimeDisplay which shows the time that's being passed into it from App:

import './App.css'
import React, { useState, useEffect } from 'react'

interface TimeDisplayProps {
  time: number
}

const TimeDisplay: React.FC<TimeDisplayProps> = ({ time }) => {
  const display = new Date(time).toString()

  return <h1>{display}</h1>
}

export default function App() {
  const [time, setTime] = useState(Date.now())

  useEffect(() => {
    const handle = setInterval(() => {
      setTime(Date.now())
    }, 100)

    return () => {
      clearInterval(handle)
    }
  }, [])

  return (
    <main>
      <TimeDisplay time={time} />
    </main>
  )
}

The TimeDisplay component in our case only displays time to the second, so any millisecond-level changes don't matter to the component and so we can save on those renders by checking if the difference in time is similar to the previous render's time

Let's assume for our purpose that it's acceptable for the time to be delayed by about 5 seconds, we then can define a function called areTimesWithinOneSecond which compares the next render's props with the previous and returns if they are within 5 seconds of each other:

const areTimesWithinFiveSeconds = (prev: TimeDisplayProps, next: TimeDisplayProps): boolean => {
  const diff = next.time - prev.time

  return diff < 5000
}

We can use the above function in a React.memo to define a version of the TimeDisplay component which will prevent unnecessary renders:

const TimeDisplayMemo = React.memo(TimeDisplay, areTimesWithinFiveSeconds)

And it can then be used as a drop-in replacement for the TimeDisplay component:


export default function App() {
  const [time, setTime] = useState(Date.now())

  useEffect(() => {
    const handle = setInterval(() => {
      setTime(Date.now())
    }, 100)

    return () => {
      clearInterval(handle)
    }
  }, [])

  return (
    <main>
      <TimeDisplayMemo time={time} />
    </main>
  )
}

Conclusion

From the above implementation we can see that it's possible to delay rendering of a component using React.memo if the component doesn't need to be re-rendered, hence improving performance by decreasing the number of renders react needs to carry out

REPL

The REPL with the example above can seen below:

References

The React Docs

stdout: Type Guards and Narrowing in Typescript

Nabeel Valley — Tue, 31 May 2022 00:00:00 +0000

Type guards (also known as Narrowing) allow us create conditions under which an object of one type can be used as if it is of another type. We usually use this in conjunction with union types to allow us to specify different handling of the types based on the resulting value

Using typeof
Using in
Using is
References

Using `typeof`

We can use the typeof keyword in javascript to find out what type an object is. This is useful if we have an object that can take on different structures, for example

type Data = string[]
type GetData = Data | (() => Data)

In the above example, we have a type called GetData which can be either some data or a function to get data. Using this, we can can create a function which fetches data like so:

const fetchData = (getData: GetData): Data => {
  if (typeof getData === 'function') {
    return getData()
  }

  return getData
}

Using `in`

Javascript also has the in operator which can be used to infer types by us checking a property of an object

type SimpleData = { 
  name:string;
}

type ComplexData = {
  name: {
    first: string;
    last: string;
  }
  isComplex: true;  
}

type AnyData = SimpleData | ComplexData

We can then use the in operator to check the existence of a property of an object by using it along with a key that we expect to be in one object but not another

const getComplexName = (data: AnyData): string => {
  // isComplex is the name of the key that we expect in `ComplexData` but not `SimpleData`
  if ('isComplex' in data) {
    return [data.name.first, data.name.last].join(' ')
  }

  return data.name
}

Using `is`

We can use the typescript is keyword to specify that the return of a boolean means that a variable satisfies a specific condition

For example, we can create a function that basically does what the in operator in the above function does:

const isComplex = (data: AnyData): data is ComplexData => {
  return (data as ComplexData).isComplex
}

This can be used in place of the in check in the above example like so:

const getComplexName2 = (data: AnyData): string => {
  // isComplex is the name of the key that we expect in `ComplexData` but not `SimpleData`
  if (isComplex(data)) {
    return [data.name.first, data.name.last].join(' ')
  }

  return data.name
}

References

stdout: Localhost HTTP Proxy with Node.js

Nabeel Valley — Tue, 08 Mar 2022 00:00:00 +0000

A localhost HTTP proxy is useful for debugging and can be easily defined using Node.js by installing http-proxy

yarn add http-proxy

And then adding the following to an index.js file:

index.js

const httpProxy = require('http-proxy')

const target = 'http://my-target-website.com:1234'

httpProxy.createProxyServer({ target }).listen(8080)

Which will create a server that listens on 8080 and will proxy requests to the target

Build Data Visualizations with React

Nabeel Valley — Fri, 11 Feb 2022 15:40:53 +0000

If you want to take a look at the full code alongside the resulting SVG then head on over to my website

React is a library for building reactive user interfaces using JavaScript (or Typescript) and D3 (short for Data-Driven Documents) is a set of libraries for working with visualizations based on data

Before getting started, I would recommend familiarity with SVG, React, and D3

Some good references for SVG are on the MDN SVG Docs

A good place to start for React would be the React Docs or my React Notes

And lastly, the D3 Docs

Getting Stared

To follow along, you will need to install Node.js and be comfortable using the terminal

I'm going to be using a React App with TypeScript initialized with Vite as follows:

yarn create vite

And then selecting the react-ts option when prompted. Next, install d3 from the project root with:

yarn add d3
yarn add --dev @types/d3

Now that we've got a basic project setup, we can start talking about D3

Scales (`d3-scale`)

d3-scale Documentation

Broadly, scales allow us to map from one set of values to another set of values,

Scales in D3 are a set of tools which map a dimension of data to a visual variable. They help us go from something like count in our data to something like width in our rendered SVG

We can create scales for a sample dataset like so:

type Datum = {
  name: string
  count: number
}

export const data: Datum[] = [
  { name: "🍊", count: 21 },
  { name: "🍇", count: 13 },
  { name: "🍏", count: 8 },
  { name: "🍌", count: 5 },
  { name: "🍐", count: 3 },
  { name: "🍋", count: 2 },
  { name: "🍎", count: 1 },
  { name: "🍉", count: 1 },
]

Also, a common thing to do when working with scales is to define margins around out image, this is done simply as an object like so:
const margin = {
  top: 20,
  right: 20,
  bottom: 20,
  left: 35,
};
This just helps us simplify some position/layout things down the line

Scales work by taking a value from the domain (data space) and returning a value from range (visual space):

const width = 600;
const height = 400;

const x = d3
  .scaleLinear()
  .domain([0, 10])    // values of the data space
  .range([0, width])  // values of the visual space

const position = x(3) // position = scale(value)

Additionally, there's also the invert method which goes the other way - from range to domain

const position = x(3)      // position === 30
const value = x.invert(30) // value === 3

The invert method is useful for things like calculating a value from a mouse position

D3 has different Scale types:

Continuous (Linear, Power, Log, Identity, Time, Radial)
Sequential
Diverging
Quantize
Quantile
Threshold
Ordinal (Band, Point)

Continuous Scales

These scales map continuous data to other continuous data

D3 has a few different continuous scale types:

Linear
Power
Log
Identity
Radial
Time
Sequential Color

For my purposes at the moment I'm going to be looking at the methods for Linear and Sequential Color scales, but the documentation explains all of the above very thoroughly and is worth a read for additional information on their usage

Linear

We can use a linear scale in the fruit example for mapping count to an x width:

const maxX = d3.max(data, (d) => d.count) as number;

const x = d3
  .scaleLinear<number>()
  .domain([0, maxX])
  .range([margin.left, width - margin.right]);

If we don't want the custom domain to range interpolation we can create a custom interpolator. An interpolator is a function that takes a value from the domain and returns the resulting range value

D3 has a few different interpolators included for tasks such as interpolating colors or rounding values

We can create a custom color domain to interpolate over and use the interpolateHsl or interpolateRgb functions:

const color = d3
  .scaleLinear<string>()
  .domain([0, maxX])
  .range(["pink", "lightgreen"])
  .interpolate(d3.interpolateHsl);

Sequential Color

If for some reason we want to use the pre-included color scales

The scaleSequential scale is a method that allows us to map to a color range using an interpolator.

D3 has a few different interpolators we can use with this function like d3.interpolatePurples, d3.interpolateRainbow or d3.interpolateCool among others which look quite nice

We can create a color scale using the d3.interpolatePurples which will map the data to a scale of purples:

const color = d3
  .scaleSequential()
  .domain([0, maxX])
  .interpolator(d3.interpolatePurples);

These can be used instead of the scaleLinear with interpolateHsl for example above but to provide a pre-calibrated color scale

Ordinal Scales

Ordinal scales have a discrete domain and range and are used for the mapping of discrete data. These are a good fit for mapping a scale with categorical data. D3 offers us the following scales:

Band Scale
Point Scale

Band Scale

A Band Scale is a type of Ordinal Scale where the output range is continuous and numeric

We can create a mapping for where each of our labels should be positioned with scaleBand:

const names = data.map((d) => d.name);

const y = d3
  .scaleBand()
  .domain(names)
  .range([margin.top, height - margin.bottom])
  .padding(0.1);

The domain can be any size array, unlike in the case of continuous scales where the are usually start and end values

Building a Bar Graph

When creating visuals with D3 there are a few different ways we can output to SVG data. D3 provides us with some methods for creating shapes and elements programmatically via a builder pattern - similar to how we create scales.

However, there are also cases where we would want to define out SVG elements manually, such as when working with React so that the react renderer can handle the rendering of the SVG elements and we can manage our DOM structure in a way that's a bit more representative of the way we work in React

The SVG Root

Every SVG image has to have an svg root element. To help ensure that this root scales correctly we also use it with a viewBox attribute which specifies which portion of the SVG is visible since the contents can go outside of the bounds of the View Box and we may not want to display this overflow content by default

Using the definitions for margin, width and height from before we can get the viewBox for the SVG we're trying to render like so:

const viewBox = `0 ${margin.top} ${width} ${height - margin.top}`;

And then, using that value in the svg element:

return (
  <svg viewBox={viewBox}>
    {/* we will render the graph in here */}
  </svg>
)

At this point we don't really have anything in the SVG, next up we'll do the following:

Add Bars to the SVG
Add Y Labels to the SVG
Add X Labels to the SVG

Bars

We can create Bars using the following:

const bars = data.map((d) => (
  <rect
    key={y(d.name)}
    fill={color(d.count)}
    y={y(d.name)}
    x={x(0)}
    width={x(d.count) - x(0)}
    height={y.bandwidth()}
  />
));

We make use of the x and y functions which help us get the positions for the rect as well as y.bandWidth() and x(d.count) to height and width for the element

We can then add that into the SVG using:

return (
  <svg viewBox={viewBox}>
    <g>{bars}</g>
  </svg>
);

Y Labels

Next, using similar concepts as above, we can add the Y Labels:

const yLabels = data.map((d) => (
  <text key={y(d.name)} y={y(d.name)} x={0} dy="0.35em">
    {d.name}
  </text>
));

Next, we can add this into the SVG, and also wrapping the element in a g with a some basic text alignment and translation for positioning it correctly:

return (
  <svg viewBox={viewBox}>
    <g
      fill="steelblue"
      textAnchor="end"
      transform={`translate(${margin.left - 5}, ${y.bandwidth() / 2})`}
    >
      {yLabels}
    </g>
    <g>{bars}</g>
  </svg>
);

X Labels

Next, we can add the X Labels over each rect using:

const xLabels = data.map((d) => (
  <text key={y(d.name)} y={y(d.name)} x={x(d.count)} dy="0.35em">
    {d.count}
  </text>
));

And the resulting code looks like this:

return (
  <svg viewBox={viewBox}>
    <g
      fill="steelblue"
      textAnchor="end"
      transform={`translate(${margin.left - 5}, ${y.bandwidth() / 2})`}
    >
      {yLabels}
    </g>
    <g>{bars}</g>
    <g
      fill="white"
      textAnchor="end"
      transform={`translate(-6, ${y.bandwidth() / 2})`}
    >
      {xLabels}
    </g>
  </svg>
);

Final Result

The code for the entire file/graph can be seen below:

Fruit.tsx

import React from "react";
import * as d3 from "d3";
import { data } from "../data/fruit";

const width = 600;
const height = 400;

const margin = {
  top: 20,
  right: 20,
  bottom: 20,
  left: 35,
};

const maxX = d3.max(data, (d) =&gt; d.count) as number;

const x = d3
  .scaleLinear()
  .domain([0, maxX])
  .range([margin.left, width - margin.right])
  .interpolate(d3.interpolateRound);

const names = data.map((d) =&gt; d.name);

const y = d3
  .scaleBand()
  .domain(names)
  .range([margin.top, height - margin.bottom])
  .padding(0.1)
  .round(true);

const color = d3
  .scaleSequential()
  .domain([0, maxX])
  .interpolator(d3.interpolateCool);

export const Fruit: React.FC = ({}) =&gt; {
  const viewBox = `0 ${margin.top} ${width} ${height - margin.top}`;

  const yLabels = data.map((d) =&gt; (

      {d.name}

  ));

  const bars = data.map((d) =&gt; (

  ));

  const xLabels = data.map((d) =&gt; (

      {d.count}

  ));

  return (


        {yLabels}

      {bars}

        {xLabels}


  );
};

Ticks and Grid Lines

Note that D3 includes a d3-axis package but that doesn't quite work given that we're manually creating the SVG using React and not D3

We may want to add Ticks and Grid Lines on the X-Axis, we can do this using the scale's ticks method like so:

const xGrid = x.ticks().map((t) => (
  <g key={t}>
    <line
      stroke="lightgrey"
      x1={x(t)}
      y1={margin.top}
      x2={x(t)}
      y2={height - margin.bottom}
    />
    <text fill="darkgrey" textAnchor="middle" x={x(t)} y={height}>
      {t}
    </text>
  </g>
));

And then render this in the svg as:

return (
<svg viewBox={viewBox}>
  <g>{xGrid}</g>
  { /* previous graph content */ }
</svg>
);

Building a Line Graph

We can apply all the same as in the Bar Graph before to draw a Line Graph. The example I'll be using consists of a Datum as follows:

export type Datum = {
  date: Date;
  temp: number;
};

Given that the X-Axis is a DateTime we will need to do some additional conversions as well as formatting

Working with Domains

In the context of this graph it would also be useful to have an automatically calculated domain instead of a hardcoded one as in the previous example

We can use the d3.extent function to calculate a domain:

const dateDomain = d3.extent(data, (d) => d.date) as [Date, Date];
const tempDomain = d3.extent(data, (d) => d.temp).reverse() as [number, number];

We can then use this domain definitions in a scale:

const tempScale = d3
  .scaleLinear<number>()
  .domain(tempDomain)
  .range([margin.top, height - margin.bottom])
  .interpolate(d3.interpolateRound);

const dateScale = d3
  .scaleTime()
  .domain(dateDomain)
  .range([margin.left, width - margin.right]);

Create a Line

The d3.line function is useful for creating a d attribute for an SVG path element which defines the line segments

The line function requires x and y mappings. The line for the graph path can be seen as follows:

const line = d3
  .line<Datum>()
  .x((d) => dateScale(d.date))
  .y((d) => tempScale(d.temp))(data) as string;

We also include the Datum type in the above to scope down the type of data allowed in the resulting function

Formatting

D3 includes functions for formatting DateTimes. We can create a formatter for a DateTime as follows:

const formatter = d3.timeFormat("%Y-%m")

We can then use the formatter like so:

formatter(dateTime)

Grid Lines

We can define the X Axis and grid lines similar to how we did it previously:

const xGrid = dateTicks.map((t) => (
  <g key={t.toString()}>
    <line
      stroke="lightgrey"
      x1={dateScale(t)}
      y1={margin.top}
      x2={dateScale(t)}
      y2={height - margin.bottom}
      strokeDasharray={4}
    />
    <text fill="darkgrey" textAnchor="middle" x={dateScale(t)} y={height}>
      {formatter(t)}
    </text>
  </g>
));

And the Y Axis grid lines:

const yGrid = tempTicks.map((t) => (
  <g key={t.toString()}>
    <line
      stroke="lightgrey"
      y1={tempScale(t)}
      x1={margin.left}
      y2={tempScale(t)}
      x2={width - margin.right}
      strokeDasharray={4}
    />
    <text
      fill="darkgrey"
      textAnchor="end"
      y={tempScale(t)}
      x={margin.left - 5}
    >
      {t}
    </text>
  </g>
));

Final result

Using all the values that have been defined above, we can create the overall graph and grid lines like so:

return (
  <svg viewBox={viewBox}>
    <g>{xGrid}</g>
    <g>{yGrid}</g>
    <path d={line} stroke="steelblue" fill="none" />
  </svg>
);

Unfortanately, since DEV seems to be breaking my code samples, you'll have to jump over to my website if you want to see the final code and SVG samples here

blog: Building Serverless Apps using the Serverless Stack Framework

Nabeel Valley — Thu, 17 Jun 2021 00:00:00 +0000

Prior to doing any of the below you will require your ~/.aws/credentials file to be configured with the credentials for your AWS account

Serverless Stack Framework

SST Framework is a framework built on top of CDK for working with Lambdas and other CDK constructs

It provides easy CDK setups and a streamlined debug and deploy process and even has integration with the VSCode debugger to debug stacks on AWS

Init Project

To init a new project use the following command:

npx create-serverless-stack@latest my-sst-app --language typescript

Which will create a Serverless Stack applocation using TypeScript

Run the App

You can run the created project in using the config defined in the sst.json file:

{
  "name": "my-sst-app",
  "stage": "dev",
  "region": "us-east-1",
  "lint": true,
  "typeCheck": true
}

Using the following commands command will build then deploy a dev stack and allow you to interact with it via AWS/browser/Postman/etc.

npm run start

Additionally, running using the above command will also start the application with hot reloading enabled so when you save files the corresponding AWS resources will be redeployed so you can continue testing

The Files

The application is structured like a relatively normal Lambda/CDK app with lib which contains the following CDK code:

Stack

lib/index.ts

import MyStack from "./MyStack";
import * as sst from "@serverless-stack/resources";

export default function main(app: sst.App): void {
  // Set default runtime for all functions
  app.setDefaultFunctionProps({
  runtime: "nodejs12.x"
  });

  new MyStack(app, "my-stack");

  // Add more stacks
}

lib/MyStack.ts

import * as sst from "@serverless-stack/resources";

export default class MyStack extends sst.Stack {
  constructor(scope: sst.App, id: string, props?: sst.StackProps) {
  super(scope, id, props);

  // Create the HTTP API
  const api = new sst.Api(this, "Api", {
    routes: {
    "GET /": "src/lambda.handler" },
  });

  // Show API endpoint in output
  this.addOutputs({
    "ApiEndpoint": api.httpApi.apiEndpoint,
  });
  }
}

And src which contains the lambda code:

src/lambda.ts

import { APIGatewayProxyEventV2, APIGatewayProxyHandlerV2 } from "aws-lambda";

export const handler: APIGatewayProxyHandlerV2 = async (
  event: APIGatewayProxyEventV2
) => {
  return {
  statusCode: 200,
  headers: { "Content-Type": "text/plain" },
  body: `Hello, World! Your request was received at ${event.requestContext.time}.`,
  };
};

Add a new Endpoint

Using the defined constructs it's really easy for us to add an additional endpoint:

src/hello.ts

import { APIGatewayProxyEventV2, APIGatewayProxyHandlerV2 } from "aws-lambda";

export const handler: APIGatewayProxyHandlerV2 = async (
  event: APIGatewayProxyEventV2
) => {
  const response = {
    data: 'Hello, World! This is another lambda but with JSON'
  }

  return {
  statusCode: 200,
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(response),
  };
};

And then in the stack we just update the routes:

lib/MyStack.ts

const api = new sst.Api(this, "Api", {
  routes: {
  "GET /": "src/lambda.handler",
  "GET /hello": "src/hello.handler" // new endpoint handler
  },
});

So that the full stack looks like this:

lib/MyStack.ts

import * as sst from "@serverless-stack/resources";

export default class MyStack extends sst.Stack {
  constructor(scope: sst.App, id: string, props?: sst.StackProps) {
  super(scope, id, props);

  // Create the HTTP API
  const api = new sst.Api(this, "Api", {
    routes: {
    "GET /": "src/lambda.handler",
    "GET /hello": "src/hello.handler"
    },
  });

  // Show API endpoint in output
  this.addOutputs({
    "ApiEndpoint": api.httpApi.apiEndpoint,
  });
  }
}

VSCode Debugging

SST supports VSCode Debugging, all that's required is for you to create a .vscode/launch.json filw with the following content:

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug SST Start",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["start"],
      "port": 9229,
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Debug SST Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/sst",
      "args": ["test", "--runInBand", "--no-cache", "--watchAll=false"],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "env": { "CI": "true" },
      "disableOptimisticBPs": true
    }
  ]
}

This will then allow you to run Debug SST Start which will configure the AWS resources using the npm start command and connect the debugger to the instance so you can debug your functions locally as well as make use of the automated function deployment

Add a DB

From these docs

We can define our table using the sst.Table class:

const table = new sst.Table(this, "Notes", {
  fields: {
  userId: sst.TableFieldType.STRING,
  noteId: sst.TableFieldType.NUMBER
  },
  primaryIndex: {
  partitionKey: "userId", sortKey: "noteId"
  }
})

Next, we can add some endpoint definitions for the functions we'll create as well as access to the table name via the environment:

const api = new sst.Api(this, "Api", {
  defaultFunctionProps: {
      timeout: 60, // increase timeout so we can debug
    environment: {
      tableName: table.dynamodbTable.tableName,
    },
  },
  routes: {
  // .. other routes
    "GET /notes": "src/notes/getAll.handler", // userId in query
    "GET /notes/{noteId}": "src/notes/get.handler", // userId in query
    "POST /notes": "src/notes/create.handler"
  },
});

And lastly we can grant the permissions to our api to access the table

api.attachPermissions([table])

Adding the above to the MyStack.ts file results in the following:

import * as sst from "@serverless-stack/resources";

export default class MyStack extends sst.Stack {
  constructor(scope: sst.App, id: string, props?: sst.StackProps) {
  super(scope, id, props);

  const table = new sst.Table(this, "Notes", {
    fields: {
    userId: sst.TableFieldType.STRING,
    noteId: sst.TableFieldType.STRING
    },
    primaryIndex: {
    partitionKey: "userId", sortKey: "noteId"
    }
  })

  // Create the HTTP API
  const api = new sst.Api(this, "Api", {
    defaultFunctionProps: {
    timeout: 60, // increase timeout so we can debug
    environment: {
      tableName: table.dynamodbTable.tableName,
    },
    },
    routes: {
    // .. other routes
    "GET /notes": "src/notes/getAll.handler", // userId in query
    "GET /notes/{noteId}": "src/notes/get.handler", // userId in query
    "POST /notes": "src/notes/create.handler"
    },
  });

  api.attachPermissions([table])

  // Show API endpoint in output
  this.addOutputs({
    "ApiEndpoint": api.httpApi.apiEndpoint,
  });
  }
}

Before we go any further, we need to install some dependencies in our app, particularly uuid for generating unique id's for notes, we can install a dependency with:

npm install uuid
npm install aws-sdk

Define Common Structures

We'll also create some general helper functions for returning responses of different types, you can view the details for their files below but these just wrap the response in a status and header as well as stringify the body

src/responses/successResponse.ts

const successResponse = <T>(item: T) => {
  return {
  statusCode: 200,
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(item),
  };
};

export default successResponse;

src/responses/badResuestsResponse.ts

const badRequestResponse = (msg: string) => {
  return {
  statusCode: 400,
  headers: { "Content-Type": "text/plain" },
  body: msg,
  };
}

export default badRequestResponse

src/responses/internalErrorResponse.ts

const internalErrorResponse = (msg: string) => {
  console.error(msg);
  return {
    statusCode: 500,
    headers: { "Content-Type": "text/plain" },
    body: "internal error",
  };
  };

export default internalErrorResponse

And we've also got a Note type which will be the data that gets stored/retreived:

src/notes/Note.ts

type Note = {
  userId: string;
  noteId: string;
  content?: string;
  createdAt: number;
};

export default Note

Access DB

Once we've got a DB table defined as above, we can then access the table to execute different queries

We would create a DB object instance using:

const db = new DynamoDB.DocumentClient();

Create

A create is the simplest one of the database functions for us to implement, this uses the db.put function with the Item to save which is of type Note:

const create = async (tableName: string, item: Note) => {
  await db.put({ TableName: tableName, Item: item }).promise();
};

Get

We can implement a getOne function by using db.get and providing the full Key consisting of the userId and noteId

const getOne = async (tableName: string, noteId: string, userId: string) => {
  const result = await db.get({
    TableName: tableName,
    Key: {
      userId: userId,
      noteId: noteId
    }
  }).promise();

  return result.Item
};

GetAll

We can implement a getByUserId function which will make use of db.query and use the ExpressionAttributeValues to populate the KeyConditionExpression as seen below:

const getByUserId = async (tableName: string, userId: string) => {
  const result = await db.query({
    TableName: tableName,
    KeyConditionExpression: "userId = :userId",
    ExpressionAttributeValues: {
      ":userId": userId,
    },
  }).promise();

  return result.Items
};

Define Lambdas

Now that we know how to write data to Dynamo, we can implement the following files for the endpoints we defined above:

Create

src/notes/create.ts

import { APIGatewayProxyEventV2, APIGatewayProxyHandlerV2 } from "aws-lambda";
import { DynamoDB } from "aws-sdk";
import { v1 } from "uuid";
import internalErrorResponse from "../responses/internalErrorResponse";
import successResponse from "../responses/successResponse";
import badRequestResponse from "../responses/badRequestResponse"
import Note from "./Note";

const db = new DynamoDB.DocumentClient();

const toItem = (data: string, content: string): Note => {
  return {
    userId: data,
    noteId: v1(),
    content: content,
    createdAt: Date.now(),
  };
};

const parseBody = (event: APIGatewayProxyEventV2) => {
  const data = JSON.parse(event.body || "{}");

  return {
    userId: data.userId,
    content: data.content,
  };
};

const isValid = (data: Partial<Note>) =>
  typeof data.userId !== "undefined" && typeof data.content !== "undefined";

const create = async (tableName: string, item: Note) => {
  await db.put({ TableName: tableName, Item: item }).promise();
};

export const handler: APIGatewayProxyHandlerV2 = async (
  event: APIGatewayProxyEventV2
) => {
  if (typeof process.env.tableName === "undefined")
    return internalErrorResponse("tableName is undefined");

  const tableName = process.env.tableName;
  const data = parseBody(event);

  if (!isValid(data)) return badRequestResponse("userId and content are required");

  const item = toItem(data.userId, data.content);
  await create(tableName, item);

  return successResponse(item)
};

Get

src/notes/get.ts

import { APIGatewayProxyEventV2, APIGatewayProxyHandlerV2 } from "aws-lambda";
import { DynamoDB } from "aws-sdk";
import badRequestResponse from "../responses/badRequestResponse";
import internalErrorResponse from "../responses/internalErrorResponse";
import successResponse from "../responses/successResponse";

type RequestParams = {
  noteId?: string;
  userId?: string
};

const db = new DynamoDB.DocumentClient();

const parseBody = (event: APIGatewayProxyEventV2): RequestParams => {
  const pathData = event.pathParameters;
  const queryData = event.queryStringParameters;

  return {
    noteId: pathData?.noteId,
    userId: queryData?.userId
  };
};

const isValid = (data: RequestParams) => typeof data.noteId !== "undefined" && typeof data.userId !== 'undefined'

const getOne = async (tableName: string, noteId: string, userId: string) => {
  const result = await db.get({
    TableName: tableName,
    Key: {
      userId: userId,
      noteId: noteId
    }
  }).promise();

  return result.Item
};

export const handler: APIGatewayProxyHandlerV2 = async (
  event: APIGatewayProxyEventV2
) => {
  const data = parseBody(event);

  if (typeof process.env.tableName === "undefined")
    return internalErrorResponse("tableName is undefined");

  const tableName = process.env.tableName;

  if (!isValid(data)) return badRequestResponse("noteId is required in path, userId is required in query");

  const items = await getOne(tableName, data.noteId as string, data.userId as string);

  return successResponse(items)
};
import { APIGatewayProxyEventV2, APIGatewayProxyHandlerV2 } from "aws-lambda";
import { DynamoDB } from "aws-sdk";
import badRequestResponse from "../responses/badRequestResponse";
import internalErrorResponse from "../responses/internalErrorResponse";
import successResponse from "../responses/successResponse";

type RequestParams = {
  noteId?: string;
  userId?: string
};

const db = new DynamoDB.DocumentClient();

const parseBody = (event: APIGatewayProxyEventV2): RequestParams => {
  const pathData = event.pathParameters;
  const queryData = event.queryStringParameters;

  return {
    noteId: pathData?.noteId,
    userId: queryData?.userId
  };
};

const isValid = (data: RequestParams) => typeof data.noteId !== "undefined" && typeof data.userId !== 'undefined'

const getOne = async (tableName: string, noteId: string, userId: string) => {
  const result = await db.get({
    TableName: tableName,
    Key: {
      userId: userId,
      noteId: noteId
    }
  }).promise();

  return result.Item
};

export const handler: APIGatewayProxyHandlerV2 = async (
  event: APIGatewayProxyEventV2
) => {
  const data = parseBody(event);

  if (typeof process.env.tableName === "undefined")
    return internalErrorResponse("tableName is undefined");

  const tableName = process.env.tableName;

  if (!isValid(data)) return badRequestResponse("noteId is required in path, userId is required in query");

  const items = await getOne(tableName, data.noteId as string, data.userId as string);

  return successResponse(items)
};

GetAll

src/notes/getAll.ts

import { APIGatewayProxyEventV2, APIGatewayProxyHandlerV2 } from "aws-lambda";
import { DynamoDB } from "aws-sdk";
import badRequestResponse from "../responses/badRequestResponse";
import internalErrorResponse from "../responses/internalErrorResponse";
import successResponse from "../responses/successResponse";

type PathParams = {
  userId?: string;
};

const db = new DynamoDB.DocumentClient();

const parseBody = (event: APIGatewayProxyEventV2): PathParams => {
  const data = event.queryStringParameters;

  return {
    userId: data?.userId,
  };
};

const isValid = (data: PathParams) => typeof data.userId !== "undefined";

const getByUserId = async (tableName: string, userId: string) => {
  const result = await db.query({
    TableName: tableName,
    KeyConditionExpression: "userId = :userId",
    ExpressionAttributeValues: {
      ":userId": userId,
    },
  }).promise();

  return result.Items
};

export const handler: APIGatewayProxyHandlerV2 = async (
  event: APIGatewayProxyEventV2
) => {
  const data = parseBody(event);

  if (typeof process.env.tableName === "undefined")
    return internalErrorResponse("tableName is undefined");

  const tableName = process.env.tableName;

  if (!isValid(data)) return badRequestResponse("userId is required in query");

  const items = await getByUserId(tableName, data.userId as string);

  return successResponse(items)
};

Testing

Once we've got all the above completed, we can actually test our endpoints and create and read back data

create:

POST https://AWS_ENDPOINT_HERE/notes

{
  "userId": "USER_ID",
  "content": "Hello world"
}

Which responds with:

200

{
  "content": "Hello world",
  "createdAt": 1619177078298,
  "noteId": "NOTE_ID_UUID",
  "userId": "USER_ID"
}

get:

GET https://AWS_ENDPOINT_HERE/notes/NOTE_ID_UUID?userId=USER_ID


200

{
  "content": "Hello world",
  "createdAt": 1619177078298,
  "noteId": "NOTE_ID_UUID",
  "userId": "USER_ID"
}

getAll

GET htttps://AWS_ENDPOINT_HERE/notes?userId=USER_ID


200

[
  {
    "content": "Hello world",
    "createdAt": 1619177078298,
    "noteId": "NOTE_ID_UUID",
    "userId": "USER_ID"
  }
]

Creating Notes Using a Queue

When working with microservices a common pattern is to use a message queue for any operations that can happen in an asynchronous fashion, we can create an SQS queue which we can use to stage messages and then separately save them at a rate that we're able to process them

In order to make this kind of logic we're going to break up our create data flow - a the moment it's this:

lambda -> dynamo
return <-

We're going to turn it into this:

lambda1 -> sqs
 return <-

          sqs -> lambda2 -> dynamo

This kind of pattern becomes especially useful if we're doing a lot more stuff with the data other than just the single DB operation and also allows us to retry things like saving to the DB if we have errors, etc.

A more complex data flow could look something like this (not what we're implementing):

lambda1 -> sqs
 return <-

           sqs -> lambda2 -> dynamo // save to db
               -> lambda3 -> s3 // generate a report
           sqs <-

           sqs -> lambda4 // send an email

Create Queue

SST provides us with the sst.Queue class that we can use for this purpose

To create a Queue you can use the following in stack:

const queue = new sst.Queue(this, "NotesQueue", {
  consumer: "src/consumers/createNote.handler",
});

queue.attachPermissions([table]);
queue.consumerFunction?.addEnvironment(
  "tableName",
  table.dynamodbTable.tableName
);

The above code does the following:

Create a queue
Give the queue permission to access the table
Add the tableName environment variable to the queue's consumerFunction

We will also need to grant permissions to the API to access the queue so that our create handler is able to add messages to the queue

api.attachPermissions([table, queue]);

Which means our Stack now looks like this:

lib/MyStack.ts

import * as sst from "@serverless-stack/resources";

export default class MyStack extends sst.Stack {
  constructor(scope: sst.App, id: string, props?: sst.StackProps) {
    super(scope, id, props);

    const table = new sst.Table(this, "Notes", {
      fields: {
        userId: sst.TableFieldType.STRING,
        noteId: sst.TableFieldType.STRING,
      },
      primaryIndex: {
        partitionKey: "userId",
        sortKey: "noteId",
      },
    });

    const queue = new sst.Queue(this, "NotesQueue", {
      consumer: "src/consumers/createNote.handler",
    });

    queue.attachPermissions([table]);
    queue.consumerFunction?.addEnvironment(
      "tableName",
      table.dynamodbTable.tableName
    );

    // Create the HTTP API
    const api = new sst.Api(this, "Api", {
      defaultFunctionProps: {
        timeout: 60, // increase timeout so we can debug
        environment: {
          tableName: table.dynamodbTable.tableName,
          queueUrl: queue.sqsQueue.queueUrl,
        },
      },
      routes: {
        "GET /": "src/lambda.handler",
        "GET /hello": "src/hello.handler",
        "GET /notes": "src/notes/getAll.handler",
        "POST /notes": "src/notes/create.handler",
        "GET /notes/{noteId}": "src/notes/get.handler",
      },
    });

    api.attachPermissions([table, queue]);

    // Show API endpoint in output
    this.addOutputs({
      ApiEndpoint: api.httpApi.apiEndpoint,
    });
  }
}

Update the Create Handler

Since we plan to create notes via a queue we will update our create function in the handler to create a new message in the queue, this is done using the SQS class from aws-sdk:

src/notes/create.ts

import { SQS } from "aws-sdk";

const queue = new SQS();

Once we've got our instance, the create function is done by means of the queue.sendMessage function:

src/notes/create.ts

const create = async (queueUrl: string, item: Note) => {
  return await queue
    .sendMessage({
      QueueUrl: queueUrl,
      DelaySeconds: 0,
      MessageBody: JSON.stringify(item),
    })
    .promise();
};

Lastly, our handler remains mostly the same with the exception of some additional validation to check that we have the queue connection information in the environment:

src/notes/create.ts

export const handler: APIGatewayProxyHandlerV2 = async (
  event: APIGatewayProxyEventV2
) => {
  // pre-save validation
  if (typeof process.env.queueUrl === "undefined")
    return internalErrorResponse("queueUrl is undefined");

  const queueUrl = process.env.queueUrl;

  const data = parseBody(event);

  if (!isValid(data))
    return badRequestResponse("userId and content are required");

  // save process
  const item = toItem(data.userId, data.content);
  const creatresult = await create(queueUrl, item);

  if (!creatresult.MessageId) internalErrorResponse("MessageId is undefined");

  return successResponse(item);
};

Implementing the above into the create handler means that our create.ts file now looks like this:

src/notes/create.ts

import { APIGatewayProxyEventV2, APIGatewayProxyHandlerV2 } from "aws-lambda";
import { v1 } from "uuid";
import internalErrorResponse from "../responses/internalErrorResponse";
import successResponse from "../responses/successResponse";
import badRequestResponse from "../responses/badRequestResponse";
import Note from "./Note";
import { SQS } from "aws-sdk";

const queue = new SQS();

// helper functions start

const toItem = (data: string, content: string): Note => {
  return {
    userId: data,
    noteId: v1(),
    content: content,
    createdAt: Date.now(),
  };
};

const parseBody = (event: APIGatewayProxyEventV2) => {
  const data = JSON.parse(event.body || "{}");

  return {
    userId: data.userId,
    content: data.content,
  };
};

const isValid = (data: Partial<Note>) =>
  typeof data.userId !== "undefined" && typeof data.content !== "undefined";

// helper functions end

const create = async (queueUrl: string, item: Note) => {
  return await queue
    .sendMessage({
      QueueUrl: queueUrl,
      DelaySeconds: 0,
      MessageBody: JSON.stringify(item),
    })
    .promise();
};

export const handler: APIGatewayProxyHandlerV2 = async (
  event: APIGatewayProxyEventV2
) => {
  // pre-save validation
  if (typeof process.env.queueUrl === "undefined")
    return internalErrorResponse("queueUrl is undefined");

  const queueUrl = process.env.queueUrl;

  const data = parseBody(event);

  if (!isValid(data))
    return badRequestResponse("userId and content are required");

  // save process
  const item = toItem(data.userId, data.content);
  const creatresult = await create(queueUrl, item);

  if (!creatresult.MessageId) internalErrorResponse("MessageId is undefined");

  return successResponse(item);
};

Add Queue-Based Create Handler

Now that we've updated our logic to save the notes into the queue, we need to add the logic for the src/consumers/createNote.handler consumer function as we specified above, this handler will be sent an SQSEvent and will make use of the DynamoDB Table we gave it permissions to use

First, we take the create function that was previously on the create.ts file for saving to the DB:

src/consumers/createNote.ts

import { DynamoDB } from "aws-sdk";

const db = new DynamoDB.DocumentClient();

const create = async (tableName: string, item: Note) => {
  const createResult = await db
    .put({ TableName: tableName, Item: item })
    .promise();
  if (!createResult) throw new Error("create failed");

  return createResult;
};

We'll also need a function for parsing the SQSRecord object into a Note:

src/consumers/createNote.ts

const parseBody = (record: SQSRecord): Note => {
  const { noteId, userId, content, createdAt } = JSON.parse(
    record.body
  ) as Note;

  // do this to ensure we only extract information we need
  return {
    noteId,
    userId,
    content,
    createdAt,
  };
};

And finally we consume the above through the handler, you can see in the below code that we are iterating over the event.Records object, this is because the SQSEvent adds each new event into this array, the reason for this is because we can also specify batching into our Queue so that the handler is only triggered after n events instead of each time, and though this isn't happening in our case, we still should handle this for our handler:

src/consumers/createNote.ts

export const handler: SQSHandler = async (event) => {
  // pre-save environment check
  if (typeof process.env.tableName === "undefined")
    throw new Error("tableName is undefined");

  const tableName = process.env.tableName;

  for (let i = 0; i < event.Records.length; i++) {
    const r = event.Records[i];
    const item = parseBody(r);
    console.log(item);

    const result = await create(tableName, item);
    console.log(result);
  }
};

Putting all the above together our createNote.ts file now has the following code:

import { SQSHandler, SQSRecord } from "aws-lambda";
import Note from "../notes/Note";
import { DynamoDB } from "aws-sdk";

const db = new DynamoDB.DocumentClient();

const create = async (tableName: string, item: Note) => {
  const createResult = await db
    .put({ TableName: tableName, Item: item })
    .promise();
  if (!createResult) throw new Error("create failed");

  return createResult;
};

const parseBody = (record: SQSRecord): Note => {
  const { noteId, userId, content, createdAt } = JSON.parse(
    record.body
  ) as Note;

  // do this to ensure we only extract information we need
  return {
    noteId,
    userId,
    content,
    createdAt,
  };
};

export const handler: SQSHandler = async (event) => {
  if (typeof process.env.tableName === "undefined")
    throw new Error("tableName is undefined");

  const tableName = process.env.tableName;

  for (let i = 0; i < event.Records.length; i++) {
    const r = event.Records[i];
    const item = parseBody(r);
    console.log(item);

    const result = await create(tableName, item);
    console.log(result);
  }
};

This completes the implementation of the asynchronous saving mechanism for notes. As far as a consumer of our API is concerned, nothing has changed and they will still be able to use the API exactly as we had in the Testing section above

Deploy

Thus far, we've just been running our API in debug mode via the npm run start command, while useful for testing this adds a lot of code to make debugging possible, and isn't something we'd want in our final deployed code

Deploying using sst is still very easy, all we need to do is run the npm run deploy command and this will update our lambda to use a production build of the code instead:

npm run deploy

Teardown

Lastly, the sst CLI also provides us with a function to teardown our start/deploy code. So once you're done playing around you can use this to teardown all your deployed services:

npm run remove

Note that running the remove command will not delete the DB tables, you will need to do this manually

stdout: Multi-module Python project using an init.py file

Nabeel Valley — Thu, 06 May 2021 00:00:00 +0000

When creating a multi-module project for Python, especially when coming from another language ecosystem, you may encounter issues importing code from other files, let's take a look at this

The Modules

In our project, we've got the following files:

package1
  |- module1.py
package2
  |- namespace2
       |- module2.py
main.py

Let's say each of our modules export a function, here's the code for them:

package1/module1.py

def hello_p1_m1():
  return "hello"

package2/subpackage1/module1.py

def hello_p2_s1_m1():
  return "hello"

The Main

Now that we've got our files with their functions separated, we try using them from the main.py file:

main.py

import package1.module1 as p1m1
import package2.namespace1.module1 as p2s1m1

print(p1m1.hello_p1_m1())
print(p2n1m1.hello_p2_s1_m1())

The Error

Now, we try to run this using python:

python main.py

And we get the following error:

Traceback (most recent call last):
  File "main.py", line 1, in <module>
    import package1.module1 as p1m1
ImportError: No module named package1.module1

The Solution

Now, this can be pretty annoying, but the solution is very simple. Python identifies a module as a single file, and the assumption that leads to the issue above is that we assume a package has the same convention of just being a directory

However, a packgage requires an __init__.py file to be defined so that they are recognized correctly

So, we need to add two files:

package1/ __init__.py
package2/subpackage1/ __init__.py

Additionally, these files are completely empty, and only serve as information. Note that we don't need to include a file in package2 directly as this directory does not contain any modules within it so is not really a package in itself and is simply a wrapper subpackage1

Custom Attributes in C# Web Controllers

Nabeel Valley — Sat, 06 Mar 2021 17:42:41 +0000

Implementing an attribute for a WebAPI or class in C# can help to reduce duplication and centralize parts of the application logic. This could be used for a variety of tasks such as logging information when methods are called as well as managinng authorization

In this post I'm going to cover the following:

Attribute Types and Execution Order
- IActionFilter
- IAuthorizationFilter
Modify Response Data
Attribute on a Class
Attributes with Input Parameters
Attribute Setting at Class and Method Level

Attribute Types and Execution Order

There are a few different attribute types that we can handle on a WebAPI that provide us with the ability to wrap some functionality around our endpoints, below are some of the common attributes that we can implement and the order in which they execute (StackOverflow)

Authorization - IAuthorizationFilter
Action - IActionFilter
Result - IResultFilter
Exception - IExceptionFilter

IActionFilter

The IActionFilter executes before and after a method is executed and contains two different methods for doing this, namely the OnActionExecuting and OnActionExecuted methods respectively. A basic implemtation of IActionFilter would look like this:

namespace CSharpAttributes.Attributes
{
  public class LogStatusAttribute : Attribute, IActionFilter
  {
    public LogStatusAttribute()
    {
      Console.WriteLine("Attribute Initialized");
    }

    public void OnActionExecuting(ActionExecutingContext context)
    {
      Console.WriteLine("OnActionExecuting");
    }

    public void OnActionExecuted(ActionExecutedContext context)
    {
      Console.WriteLine("OnActionExecuted");
    }
  }
}

This can then be implemented on a controller method with a [LogStatus] attribute:

[LogStatus]
[HttpGet]
public IEnumerable<WeatherForecast> Get()
{
  Console.WriteLine("Executing Get");
  return data;
}

The order of logging which we see will be as follows:

Attribute Initialized when the controller is instantiated
OnActionExecuting when the controller is called
Executing Get when the controller is executed
OnActionExecuted when the controller is done executing

IAuthorizationFilter

The IAuthorizationFilter executes as the first filter on a controller's method call

namespace CSharpAttributes.Attributes
{
  public class CustomAuthorizeAttribute : Attribute, IAuthorizationFilter
  {
    public CustomAuthorizeAttribute()
    {
      Console.WriteLine("Attribute Initialized");
    }

    public void OnAuthorization(AuthorizationFilterContext context)
    {
      Console.WriteLine("OnAuthorization");
    }
  }
}

This can then be implemented on a controller method with a [CustomAuthorize] attribute:

[CustomAuthorize]
[HttpGet]
public IEnumerable<WeatherForecast> Get()
{
  Console.WriteLine("Executing Get");
  return data;
}

The order of logging which we see will be as follows:

Attribute Initialized when the controller is instantiated
OnAuthorization when the controller is called
Executing Get when the controller is executed

Modify Response Data

An attribute's context parameter gives us ways by which we can access the HttpContext as well as set the result of a method call so that it can be handled down the line. For example, we can implement our CustomAuthorize attribute with the following:

public void OnAuthorization(AuthorizationFilterContext context)
{
  if (!context.HttpContext.Request.Headers.ContainsKey("X-Custom-Auth"))
  {
    context.Result = new UnauthorizedResult();
  }

  Console.WriteLine("Attribute Called");
}

This will mean that if we set the context.Result in our method then the controller will not be executed and the endpoint will return the UnauthorizedResult early. You can also see that we're able to access things like the HttpContext which makes it easy for us to view the request/response data and do things based on that

Attribute on a Class

Note that it's also possible to apply the above to each method in a class by adding the attribute at the top of the class declaration:

[ApiController]
[LogStatus]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
  ...

Attributes with Input Parameters

We are also able to create attributes that enable the consumer to modify their behaviour by taking input parameters to the constructor, we can update our LogStatus attribute to do something like add a prefix before all logs:

namespace CSharpAttributes.Attributes
{
  public class LogStatusAttribute : Attribute, IActionFilter
  {
    private readonly string _prefix;

    public LogStatusAttribute(string prefix = "")
    {
      _prefix = prefix;
      Console.WriteLine("Attribute Initialized");
    }

    public void OnActionExecuted(ActionExecutedContext context)
    {
      Console.WriteLine(_prefix + "OnActionExecuted");
    }

    public void OnActionExecuting(ActionExecutingContext context)
    {
      Console.WriteLine(_prefix + "OnActionExecuting");
    }
  }
}

Then, applying to our controller method like so:

[LogStatus("WeatherController-Get:")]
[HttpGet]
public IEnumerable<WeatherForecast> Get()
{
  Console.WriteLine("Executing Get");
  return data;
}

So the new output will look like so:

Attribute Initialized when the controller is instantiated
WeatherForecast-Get:OnActionExecuting when the controller is called
Executing Get when the controller is executed
WeatherForecast-Get:OnActionExecuted when the controller is done executing

Attribute Setting at Class and Method Level

Since an attribute can be implemented at a class and method level it's useful for us to be able to implement it at a class and the override the behaviour or add behaviour for a specific method

We can do this by setting the attribute inheritence to false

Updating out LogStatusAttribute we can add the AttributeUsage Attribute as follows:

namespace CSharpAttributes.Attributes
{
  [AttributeUsage(AttributeTargets.All, Inherited = false)]
  public class LogStatusAttribute : Attribute, IActionFilter
  {
    ...

This means that we can independently apply the attribute at class and method levels, so now our controller can look something like this:

namespace CSharpAttributes.Controllers
{
  [ApiController]
  [Route("[controller]")]
  [LogStatus("WeatherForecast:")]
  public class WeatherForecastController : ControllerBase
  {
    [LogStatus("Get:")]
    [HttpGet]
    public IEnumerable<WeatherForecast> Get()
    {
      Console.WriteLine("Executing Get");
      return data;
    }
  }
}

Which will output the logs as follows:

Attribute Initialized when the controller is instantiated
WeatherForecast:OnActionExecuting when the class is called
Get:OnActionExecuting when the controller is called
Executing Get when the controller is executed
Get:OnActionExecuted when the controller is done executing
WeatherForecast:OnActionExecuted when the class is done executing

Code in a Container

Nabeel Valley — Sun, 26 Jul 2020 16:20:29 +0000

This post originally appeared on my website. To keep up with my latest posts and projects you can follow me on DEV, Twitter or GitHub where my profiles are kept up to date with my work

Recently I'd started using Visual Studio Code's Remote Containers functionality for development and it's been really useful

The Remote Containers extension allows us to write code and develop applications within a virtualized environment that makes it easier for us to manage our development environment as well as more closely resemble our target deployment environment (if we're deploying to Docker or Kubernetes)

In this post, I'll take a look at what a Docker container is, why we would want to use one as a development environment, and how we can go about setting one up for VSCode

Contents

Prerequisites
Docker Containers
Docker Images
- Create an Application
- Create a Dockerfile
Development Containers
- Why Develop in a Container
- How to Develop in a Container
- Use an Existing Dockerfile
- Using a Preconfigured Dockerfile
- Which Method to Use
Summary
- Further Reading

Prerequisites

If you intend to follow along with this post you'll need to have the following installed:

A Windows or Mac OS version capable of running Docker Desktop
Docker Desktop
Visual Studio Code
Visual Studio Code's Remote Containers Extension
Visual Studio Code's Docker Extension
Some familiarity with using the command line

Docker Containers

A Container, in this context, is a simple virtual machine that contains the code required to run an application with all its dependencies

A Docker container is built from a docker image and run by the docker command. I'll explain these as we go along

To check that Docker is installed correctly on your machine run the following command:

docker run hello-world

If your install is working correctly you should see something like this:

Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
0e03bdcc26d7: Pull complete

Digest: sha256:49a1c8800c94df04e9658809b006fd8a686cab8028d33cfba2cc049724254202
Status: Downloaded newer image for hello-world:latest

Hello from Docker

...

Docker Images

Docker images are typically used to run applications in a production-type environment, every Docker container we run needs to be based on an image, every running container is like an instance of an image - similar to how objects are an instance of a class

An image states what our container will need to be made of, what it depends on, and how it runs. We define how docker should build our image in a Dockerfile

We're going to go through some of the basics of Docker Images and Docker as would typically be done when creating a container to be run in production before we get into development containers so you've got an understanding of how this all works

To get started create a new folder and open it from Visual Studio Code and do the following:

Create an Application

We'll need a simple "hello-world" web server using Node.js, for the sake of example. You can, however, use any language (or Languages) you want when creating an application to run within Docker. You do not need to have any dependencies for the specific application or language installed on your computer, we will handle this using Docker

For our purpose, create a file called index.js with the following:

const http = require("http");

const requestListener = function (req, res) {
  res.writeHead(200);
  res.end("Hello, World!");
};

const serverListeningCallback = function () {
  console.log("Server started");
};

const server = http.createServer(requestListener);
server.listen(8080, serverListeningCallback);

You can see in the above on the last line that the application will listen on port 8080, just keep this in mind

We don't need to run this file as yet, but if we want, we can run this with the following command from our working directory:

node app.js

At this point our working directory should look like this:

working-directory
|__ index.js

Create a Dockerfile

There are a few steps that are the same for most Dockerfiles you'll be building:

A Base Image that your container/image should use, in our case node:12, which has node and npm preinstalled
Copy all the code in the current (.) directory
Define your runtime port/ports (in the case of a web application)
The command that will be run to start the application

Any line starting with a # is a comment, Docker will ignore these

Dockerfile

# step 1 - FROM baseImage
FROM node:12

# step 2 - COPY source destination
COPY . .

# step 3 - EXPOSE port
EXPOSE 8080

# step 4 - CMD stratupCommandArray
CMD ["node", "app.js"]

At this point our working directory should look like this:

working-directory
|__ index.js
|__ Dockerfile

We can build our image, based on the Dockerfile using the following docker command:

Note the . at the end of the command

docker build -t my-docker-app .

The above command can be broken down as follows:

docker build the command from the Docker CLI to build an image
-t my-docker-app says what we want our image to be called, in the above my-docker-app
. which is the directory in which the Dockerfile is located, in our case our current directory

We can then run the image we just built like so:

docker run -p 8080:8080 my-docker-app

docker run is the command from the Docker CLI to run a container
-p 8080:8080 is our port mapping, it is ordered as HOST_PORT:CONTAINER_PORT and allows us to say which port on our host we want to map to our container, the container port is the same port that our app listens on and is EXPOSEd in the Dockerfile
my-docker-app is the image tag we would like to run

Each time we change the app files for a container like above we need to rebuild the container before running, and that normally making changes to files during the image build or container run will not modify the original files on our computer

Now that the application is running on port 8080 you can open http://localhost:8080 in your browser and you should see your Hello World app running

When you're done with that you can go back to the terminal where the container was started and use ctrl + c to stop the container

If you've never used Docker before and have got everything running this far, congratulations! If you've got any questions you can comment below or hit me up on Twitter @not_nabeel

Moving swiftly along

Development Containers

So now that we understand a bit about containers and how we can go about using them in production, we'll look at why we may want to use them as a development environment

Why Develop in a Container

As developers, we are far too familiar with the "it runs on my machine" dilemma. Development environments can be wildly inconsistent between different developers or different operating systems, and ensuring that our development code runs easily on everyone's computer can be challenging

Containers can help us to explicitly define our development environment, our application dependencies, what networking relationships, and (potentially) what other sibling applications need to be running in development, like databases, or other application tiers

Visual Studio Code can help transport us into a container so that we work on our application in a well-defined environment, not just run our application within one while reducing the overall number of things we need to have installed on our computer

How to Develop in a Container

To develop in a Container using Visual Studio Code we will need to have:

What's important to note is that we don't need any of our application's runtime or development dependencies installed, like Node.js, these will all be handled by VSCode within our container

To configure our project for running in a container we need to first open the project folder (the folder we used previously) in Visual Studio Code

Use an Existing Dockerfile

Once open use the keyboard shortcut ctrl + shift + p to open the Command Palette and search for Remote-Containers: Add Development Container Configuration Files and click enter, you will then have an option to use the existing Dockerfile from Dockerfile which will generate a .devcontainer/devcontainer.json file

At this point our working directory should look like this:

working-directory
|__ .devcontainer
|   |__ devcontainer.json
|
|__ index.js
|__ Dockerfile

The .devcontainer/devcontainer.json file that was created will contain the following:

devcontainer.json

// For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.128.0/containers/docker-existing-dockerfile
{
    "name": "Existing Dockerfile",

    // Sets the run context to one level up instead of the .devcontainer folder.
    "context": "..",

    // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
    "dockerFile": "..\\Dockerfile",

    // Set *default* container specific settings.json values on container create.
    "settings": {
        "terminal.integrated.shell.linux": null
    },

    // Add the IDs of extensions you want installed when the container is created.
    "extensions": []

    ...
}

The above file is the configuration for our development container, we can also allow VSCode to generate a Dockerfile which we'll look at later in the post

We'll stick to our simple Dockerfile for this post, but if you've got a different Dockerfile when running your application in Production and Development then you may need a different file in the dockerFile property below

Now that we've got a starting point we can add a little to our configuration so that everything is just right:

Change the name property to name our workspace (purely aesthetic)
Add a forwardPorts property to expose our application port to our localhost network, be sure to add the , after "extensions":[]

Once we make the above changes we should have this:

devcontainer.json

{
    "name": "My Workspace",

    // Sets the run context to one level up instead of the .devcontainer folder.
    "context": "..",

    // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
    "dockerFile": "..\\Dockerfile",

    // Set *default* container specific settings.json values on container create.
    "settings": {
        "terminal.integrated.shell.linux": null
    },

    // Add the IDs of extensions you want installed when the container is created.
    "extensions": [],

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    "forwardPorts": [
        8080
    ],
    ...
}

Now that we've configured our build container, use ctrl + shift + p to open the Command Palette again and search for Remote-Containers: Reopen in Container and click enter which will build the container and set up an image with the following setup for us:

Linked ports as defined in the forwardPorts property
Configure a VSCode development server inside the container so our editor can link to it
Mount our system's file directory into the container so we can edit our files
Does not run the CMD command from our Dockerfile
Open a VSCode window linked to the container so we can start working with our code

Now that you're in the container you can edit your files and run it by doing the following:

Use ctrl + shift + p and then search for Terminal: Create new Integrated Terminal and click enter
Type node app.js into the new Terminal window and click enter to run our app.js file
Navigate to http://localhost:8080 in your browser to view your running app

At this point we've created a container to use as a development file and run our application, you can stop the application with ctrl + c

You can switch from developing in a container back to your local environment with ctrl + shift + p and searching for Remote-Containers: Reopen locally and clicking enter

Now that we're back on our local environment (and not docker) we can look at the other way we can set up our project for VSCode

Using a Preconfigured Dockerfile

Visual Studio Code's Remote Containers Extension provides some pre-configured Dockerfiles for common application or application framework types. One of the available preconfigured Dockerfiles is for working on Node.js applications

The preconfigured files usually just provide a starting point for applications and often you will need to modify these to suit your application, we don't need this for the application we're working on however

To redefine our Docker development config, let's delete the .devcontainer directory in our application and regenerate this

We can regenerate the files needed with ctrl + shift + p, and searching for Remote-Containers: Add Development Container Configuration Files again, clicking enter and then selecting the From a predefined configuration definition option, and then selecting Node.js 12, this should now create a .devcontainer/devcontainer.json file as well as a new .devcontainer/Dockerfile that we did not have previously, our working directory will now look like so:

working-directory
|__ .devcontainer
|   |__ devcontainer.json  
|   |__ Dockerfile         # predefined dev container Dockerfile
|
|__ index.js
|__ Dockerfile             # our self-defined Dockerfile

If we look at the devcontainer.json file we will see something similar to what we had before:

devcontainer.json

{
    "name": "Node.js 12",
    "dockerFile": "Dockerfile",

    // Set *default* container specific settings.json values on container create.
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },

    // Add the IDs of extensions you want installed when the container is created.
    "extensions": [
        "dbaeumer.vscode-eslint"
    ]

    ...
}

You may, however, note that the dockerFile property is missing, this just means that VSCode will use the default Dockerfile which has been created in the .devcontainer directory

We can go ahead and change the name if we want, we should also add the forwardPorts option as we did previously:

devcontainer.json

{
    ...

    "forwardPorts": [
        8080
    ],

    ...
}

Now looking at the Dockerfile which defines the base development container:

Dockerfile

FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-12

This is a bit different to ours because Visual Studio Code will handle the file copying and port exposing on its own for the development container. Note that this configuration can only be used for development and can't really be deployed as a production container. This type of setup is necessary if our development image and production image will be different (which they usually are)

Now that the development container has been set-up, we can use ctrl + shift + p and Remote-Containers: Reopen in Container to open our development container, from here we can work on our application and run the application the same as we did before

Which Method to Use

We've looked at two different methods for configuring our development container, either of which can be used in any project. Below are my recommendations:

If you've got an existing Dockerfile and your development container can be the same as your production container, for things like simple node.js or python apps, and you don't want to maintain another Dockerfile then this may be a quick solution to opt for

Otherwise, if your development container needs to be different from your production one then it's probably easier to start with a predefined VSCode Container as a base and add in any development configuration you need to the .devcontainer/Dockerfile

Lastly, if you don't have an existing Dockerfile at all then I'd suggest using a predefined one so that even if it's not fully configured you've got a relatively good starting point, especially when working with more complex languages and frameworks as a custom Dockerfile for these can be some work to configure

Summary

In this post, we've covered the basics of using Docker to run your applications in a container as well as how to define and build your images. We also looked at why we may want to use a container for development and how we can do this using Visual Studio Code

Code For Noobs

Nabeel Valley — Thu, 21 May 2020 05:23:47 +0000

So I've been meaning to write an introductory post about the basics of JavaScript for quite some time. A few weeks ago I managed to finally get something going on this Twitter thread (@not_nabeel)

Let's get into it

0. What is Programming

Programming is our way of telling a computer to do things. This can be anything from checking our spelling to making trippy digital art

The basics of programming are the same in most languages and doesn't involve much math or binary (0010101) like a lot of people seem to think. Programming languages usually make use of a very small subset of words and concepts of a normal human language like English

The language I'm going to be using is called JavaScript but many of these concepts are the same in most other programming languages

1. What is JavaScript?

JavaScript is the language used to add interactivity to a website but it can also be used to do pretty much anything you like. JavaScript runs in all modern web browsers and can be accessed through your browser's developer tools, but it can also be used on other devices using something like @nodejs

For our purposes though, we don't need to worry too much about how that all works right now. To get started we'll be using tools like @CodePen, @replit and @glitch which give you text editor and a place to run your code

You'll see some code samples in the post as you go along, the interactive examples can be found on my website

2. Text Data

In a program, we can store different types of data (known as "data types")

When we store text we use a data type called string. In JavaScript a string is just text surrounded in either double quotes, single quotes, or `these things` (which are known as backticks):

"i am text"

"i am also text"

 `me too.`

 `unlike the others,
  i can b
multiple lines
lllooonnnggg
    and have random spaces`

3. Variables

If we want to keep our data for use at a later stage we need to give it a name, otherwise how do we know what data we're trying to use right? To give a piece of data (or text, in our case) a name we create a variable

We create a variable using let or const along with a variable name and the data that we want to give the name to :

// this code shouldn't do anything if you run it
// we are just creating some variables

let myText = "Hello World"

const myOtherText = "Bye World"

We use let for data whose data may change and const for data whose data won't you can remember this like: const = constant

Note that it is also possible to use the keyword var to create a variable. This is something that is left over from older versions of JavaScript and can have some effects that are better to just avoid (if you're interested you can read this article about how it impacts variable scope but it is a bit of a more challenging concept to understand)

When creating a variable, there are a few rules we need to follow:

Variable names must not contain spaces or stuff like !@#%%^&\*(), underscores and dollar signs are okay though
Variable names must not be a word the language has set aside for something else. e.g const or let
Variable names must not start with a number
Variable names should be descriptive. while names like "x" and "blah" are allowed, if they have no meaning in the context it's better to opt for something people will understand

4. Printing Data

Languages have ways we can show data to a user (or programmer). In JavaScript this is the "console.log" function. We'll discuss functions later on but for now know that when we give them data, and they do stuff

// print the data
console.log("Bob Smith") //prints -> Bob Smith

// print a variable
const jenny = "Jenny Smith"
console.log(jenny) // prints -> Jenny Smith

5. Numbers

Numbers are another type of data in JavaScript, to store a number we can just write the number. using numbers we can also do things like getting fat or running from the po-lice

- is plus
- is minus
* is multiply
/ is divide

const myWeight = 100
const food = 100 + 50

const myNewWeight = myWeight + food

console.log(myNewWeight) // print -> 250

const myWeightAfterRunnin = myWeight - myWeight * 0.2

console.log(myWeightAfterRunnin) // print -> 80

But, JavaScript lets us add do maths with anything. so maybe like - don't do this:

const dontDoThis = "apple" * "pineapple"

console.log(dontDoThis) // print -> NaN (Not a Number)

6. Arrays

Arrays are how we store a set of data. an array can have different data types in it, but usually, we want to be storing the same stuff in an array. we make an array by wrapping our items in [ ] and separating each item with a comma (,)

const myFriends = ["i", "don't", "have", "any"]

const thingsToRemember = ["uhmm", 42, 12, "idk, i guess i forgot"]

const multipleLines = [
  "arrays don't have to be",
  "on a single",
  "line"
]

If we want to get a specific element in an array we can use the variable name with the index (position) of the element. the index starts at 0. we will get undefined (I'll explain this in a bit) if we try to get a value at an index that does not exist

  const myData = [
  "zeroeth index", 
  "first index", 
  "second index", 
  "third index"
]

console.log(myData[0]) // print -> zeroeth index
console.log(myData[1]) // print -> first index
console.log(myData[2]) // print -> second index
console.log(myData[3]) // print -> third index

// indexes that do not exist in our array
console.log(myData[-1]) // print -> undefined
console.log(myData[100]) // print -> undefined

7. Booleans

So far we've looked at strings and numbers, we have an even more basic data type called a boolean. a boolean is a value that can either be true or false. when creating a variable for a boolean we do not wrap the value in quotes

var myTrueBool = true

var myFalseBool = false

console.log(myTrueBool)
console.log(myFalseBool)

8. Complex Data

If we want to store data that are more complex than the ones we've seen above, we can make use of "objects". use { } around our data to group more basic data. these use keys as names for values in the object

const jenny = {
  id: 123,
  name: "Jenny",
  surname: "Smith",
  age: "idk, can't ask a woman that",
  favouriteBooks: [
    "To not kill a Mockingbird",
    "Why are books so voilent, yoh"
  ]
}

// we can get specific values using their keys
const jennyName = jenny.name
const jennyBooks = jenny.favouriteBooks

9. Undefined and Null

the values undefined and null have a special meaning.

undefined is a representation for a variable that does not have a value
null is a value of "nothing"

For example:

What's wrong with chocolate? null
What's a flobuir? undefined

10. Functions

Functions are a way we can group code for a specific set of instructions, usually with some end purpose. In JavaScript we define a function in one of two ways: using the word function or with the fat arrow syntax

// using the "function" keyword
// this creates a variable called "myFunc1"
function myFunc(){
  const stuff = "I am Function"
  console.log(stuff)
}

// we can also create the variable using
// "let" or "const" like we do for other variables
const myLetFunc = function(){
  const stuff = "I am another Function"
  console.log(stuff)
}

// fat arrow function
const myFatFunc = () => {
  console.log("Phat Funk")
}

// single line fat-arrow functions don't need the {}
const mySingleLineFunct = () => console.log("single line")

To use a function we simply write the name of the function and then add () at the end, provided the function doesn't take any data (also known as parameters)

const sayHello = function(){
  console.log("Hello")
}

// "call" the function
sayHello() // prints -> Hello

const sayBye = () => console.log("BYEE")

// "call" the function
sayBye() // prints -> BYEE

Remember earlier I said that functions take data and do stuff? For us to give a function data we need to tell it what variables to store that data as when we call it. We do this by having the data in the () when we create (or 'declare') our function

function sayHello(name) {
  console.log("Hello " + name)
} 

// use the function
sayHello("Bob") // print -> Hello Bob

const sayBye = (name) => console.log("Bye " + name)

//use the function
const name = "Jenny"
sayBye(name) // print -> Bye Jenny

When computers are following our code they do so from the top down, so the first line is handled by the computer before the second. the second before the third, etc. functions are a way for us to reuse code that was written on a line higher up in our code. You may notice that we use the variable name in a lot of different places above. this uses scope and broadly means any variable name created in a function (or pretty much anywhere between { }) is only available within that section

Scope complicated, you can read more about it here

Functions can also take multiple parameters, this is done by listing the parameters between the () and separating them by commas. the order that we list them when we create our function is the same as the order we need to put them when using the function

const sayBye = (firstName, lastName) => {
  console.log("Bye " + firstName + " " + lastName)
}

// use the function
const jennyName = "Jenny"
const jennySurname = "Smith"
sayBye(jennyName, jennySurname) // print -> Bye Jenny Smith

Functions are also able to give us back a value after doing some stuff. They do this by using the return keyword which tells it what to give back. A function stops processing when it sees the keyword return - anything after it in a function is ignored

const addNumbers = (num1, num2) => {
  const result = num1 + num2
  return result
}

const mySum = addNumbers(1, 2)

console.log(mySum) // print -> 3

Summary

That's it for now, I'll definitely be updating this post/series as things are added over on My Blog

Nabeel Valley

The Gatsby Migration, pt.1 - Setting the Scene

Nabeel Valley — Tue, 21 Jan 2020 00:00:00 +0000

Introduction
The React App
Hard Coded Pages
Dynamic Post Page
App Layout and Routes
Summary

Introduction

Lately I've been a little concerned with my current SPA approach on my personal site as well as a few others. More specifically the high initial load time due to the calls to the backend to retrieve content

With the aim of solving this problem I've spent a lot of time looking at and playing with Static Site Generators.Foreword: they're all a lot more complicated than one would think

So for a static site the "static" content only changes so often, based on this we can generate page content with the data we're planning to load in - that's what we're going to try to do

Now we'll be starting off with a React app generated with create-react-app so that we can have a starting point for our Gatsby site as well as understanding how we can approach some of the challenges when switching over to a site generator like Gatsby

For the sake of completeness, this series will be broken into four posts covering the following:

Creating the initial React App (This post)
Rendering the "Dumb" pages with Gatsby
Rendering the "Smart" page with Gatsby

The React App

First we're going to be starting off with a new React app that we will work on changing into a Gatsby one parts 2 and 3, we'll then focus on using plugins to enhance our content in 4

For this part we'll build a basic React app that has the following:

Two "hard-coded" pages and a 404 page
A dynamic page with an API call to retrieve data
Overall app layout with child routes for 1 - 3

To get started, we'll create a fresh React App:

npx create-react-app gatsby-to-be

And add the react-router

yarn add react-router-dom

Running this command should set up the application, if you don't know much about React I'd suggest taking a look at the documentation

Next cd gatsby-to-be and run yarn start, you should be able to visit the application in your browser at http://localhost:3000/

Looking at the generated files we have a public directory with some icons, an index.html file into which our React application will run once built, and a src directory that has the application code. The index.js file is what loads the application into the DOM and the App.js file which is the main component for our application

Hard Coded Pages

We will create the following three hard-coded pages in the src/pages directory

These pages are just React components that we will assign Routes to.

The pages we are using are known as functional components because they are javascript functions that return JSX

If we intend to use JSX in a file we need to ensure that we import React. The other component we are importing is the Link component which is a lot like a normal HTML a tag but with some special functionality to make the client-side navigation work

Blog.js

import React from "react"
import { Link } from "react-router-dom"

const Blog = () => (
  <div className="Blog">
    <h1>Blog</h1>
    <p>This is the Blog page</p>
    <div>
      <Link to="/blog/post-1">Post 1</Link>
    </div>
    <div>
      <Link to="/blog/post-2">Post 2</Link>
    </div>
  </div>
)

export default Blog

Additionally we have the Home.js and NotFound.js files which are similar to the Blog.js file we created

`Home.js`

import React from "react"

const Home = () => (
  <div className="Home">
    <h1>Home</h1>
    <p>This is the Home page</p>
  </div>
)

export default Home

`NotFound.js`

import React from "react"

const NotFound = () => (
  <div className="NotFound">
    <h1>404</h1>
    <p>Page Not Found</p>
  </div>
)

export default NotFound

Dynamic Post Page

Next up we'll create a component that can render out content for a blog post. This will consist of a few hooks which are react functions that we can use to sort of control the data in a function

The Post component will:

Display a loading indicator initially
Figure out what post we're trying to render based on the URL
Retrieve a JSON file from the public directory based
Set the component state after reading the file
Display the content from the file in a JSX template

The useState hook is used to initialize the state the component, in this case using the hasError and data variables, as well as providing the functions necessary for updating those in the form of setHasError and setData respectively

We use fetch in the useEffect hook to retrieve the data from the public directory. The useEffect hook allows us to pass a function that will be called to update side effects. The second input, in our case [] is the array of objects that, when are changed, we want the hook to run - since we only want it to run once and don't care about any other state changes we pass in an empty array for this value

Post.js

import React, { useEffect, useState } from "react"

const Post = ({ match }) => {
  const slug = match.params.slug

  const [hasError, setHasError] = useState(false)
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(`/posts/${slug}.json`)
        const json = await res.json()
        setData(json)
      } catch (error) {
        console.log(error.toString())
        setHasError(true)
      }
    }

    fetchData()
  }, [])

  return (
    <div className="Post">
      <p>
        This is the <code>{slug}</code> page
      </p>
      {data ? (
        <div className="content">
          <h1>{data.title}</h1>
          <p>{data.body}</p>
          <img src={data.image} alt="" />
        </div>
      ) : hasError ? (
        <div className="error">
          <h1>Error</h1>
          <p>{hasError}</p>
        </div>
      ) : (
        <p>Loading .. </p>
      )}
    </div>
  )
}

export default Post

In the above component we're making use of the following pattern to decide what to render conditionally:

If the data is loaded then show the data
Else if there is an error then show the error data
Otherwise show a loading message

The way we are rendering the Post component with a parameter for match. The match parameter will be passed in as a prop from the Router that we will configure next, this allows us to use the slug from the URL to retrieve the content for the page

The two data files we have to pull content from in the public/posts directory are post-1.json and post-2.json

`post-1.json`

{
  "title": "Post 1",
  "body": "Hello world, how are you",
  "image": "/posts/1.jpg"
}

`post-2.json`

{
  "title": "Post 2",
  "body": "Hello world, I am fine",
  "image": "/posts/2.jpg"
}

The images posts/1.jpg and posts/2.jpg can also just be any images in that directory

App Layout and Routes

Lastly, we'll specify our application layout with the relevant routes in the App.js file, referencing the components we have created, we do this using the BrowserRouter. When we switch the project over to a Gatsby one, the App.js file will be converted into our Layout component to wrap our different pages

We use the Router component and the page inside of it, this essentially handles Routing via the Link components. Next we have a div as a wrapper for our component as well as a header, nav, and main tags to organise the page

The Route component takes in the component that we would like to display for a given route, and the Switch helps us to ensure that only route is actively being fisplayed at a time. The Switch will navigate from the first to last Route and render the first one that matches the given path

Fow now, our App.js file is as follows:

import React from "react"
import "./App.css"
import { BrowserRouter as Router, Link, Switch, Route } from "react-router-dom"
import Home from "./pages/Home"
import Blog from "./pages/Blog"
import Post from "./pages/Post"
import NotFound from "./pages/NotFound"

const App = () => (
  <Router>
    <div className="App">
      <header>
        <nav>
          <h1>My Website Title</h1>
          <Link to="/">Home</Link>
          <Link to="/blog">Blog</Link>
        </nav>
      </header>
      <main>
        <Switch>
          <Route exact path="/" component={Home}></Route>

          <Route exact path="/blog" component={Blog}></Route>

          <Route exact path="/blog/:slug" component={Post}></Route>

          <Route path="/*" component={NotFound}></Route>
        </Switch>
      </main>
    </div>
  </Router>
)

export default App

In the above component we can see that where we are rendering the Post component we have a parameter in the route called slug, this parameter will be passed in to the Post component as part of the match object

Summary

We have built a fairly simple application that makes use of both static and data-based pages, we have also tied all of these together using the App component and a Router with the following routes:

/ which will render the Home component
/blog which will render the Blog component
/blog/:slug which will render the Post component and retrieve the data based on the given slug
/* which will match any other routes and render the NotFound component

In the next post we're going to look at how to take what we have so far and transform this application into a Gatsby one, but for now it may be useful to think about what kind of steps we may need to take if we'd like to make this a static website based on the way our current routes work

Nabeel Valley

Intro to F# Web APIs

Nabeel Valley — Wed, 30 Oct 2019 00:00:00 +0000

So we're going to be taking a bit of a look on how you can go about building your first F# Web API using .NET Core. I'm going to cover a lot of the basics, a lot of which should be familiar to anyone who has worked with .NET Web Applications and F# in general.

Along the way I'm also going to go through some important concepts that I feel are maybe not that clear from a documentation perspective that are actually super relevant to using this F# in a real-life context

If you're totally new to F# though you may want to take a look at F# for Fun and Profit or my personal quick reference documentation over on GitHub

Getting Started

Assuming you've got the .NET Core SDK with F# installed, you can simply create a new project with the following:

dotnet new webapi --language F# --name FSharpWebApi

code .\FSharpWebApi

Alternatively, if you're feeling a little unexperimental you can use the Visual Studio project creation wizard, psshhtt

Once you have the project open you can run the following command to launch the application:

dotnet run

Which should start the application on https://localhost:5001 and http://localhost:5000, you can see the current existing endpoint at /weatherforecast, this is handled by the Controllers/WeatherForecastController.fs file

Looking Around

Looking at the structure of the project files you should see the following:

FSharpWebApi
│ appsettings.Development.json
│ appsettings.json
│ FSharpWebApi.fsproj
│ Program.fs
│ Startup.fs
│ WeatherForecast.fs
│
├───Controllers
│ WeatherForecastController.fs
│
└───Properties
        launchSettings.json

So, mostly we see the typical Web API stuff that we'd expect for a C# project such as the startup and program files. In F# they serve pretty much the same purpose.

Looking at the Program.fs file we can see that it contains the main function and configures the Web Host, next we can see that the Startup.fs file contains the usual configuration methods. We should note that the method calls within these functions are piped to an ignore so the the functions to not return their respective Builders as this will break the application

The Program.fs and Startup.fs files can be seen below

Program.fs

namespace FSharpWebApi

module Program =
    let exitCode = 0

    let CreateHostBuilder args =
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(fun webBuilder ->
                webBuilder.UseStartup<Startup>() |> ignore
            )

    [<EntryPoint>]
    let main args =
        CreateHostBuilder(args).Build().Run()

        exitCode

Startup.fs

namespace FSharpWebApi

type Startup private () =
    new (configuration: IConfiguration) as this =
        Startup() then
        this.Configuration <- configuration

    // This method gets called by the runtime. Use this method to add services to the container.
    member this.ConfigureServices(services: IServiceCollection) =
        // Add framework services.
        services.AddControllers() |> ignore

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    member this.Configure(app: IApplicationBuilder, env: IWebHostEnvironment) =
        if (env.IsDevelopment()) then
            app.UseDeveloperExceptionPage() |> ignore

        app.UseHttpsRedirection() |> ignore
        app.UseRouting() |> ignore

        app.UseAuthorization() |> ignore

        app.UseEndpoints(fun endpoints ->
            endpoints.MapControllers() |> ignore
            ) |> ignore

    member val Configuration : IConfiguration = null with get, set

Next we have the FSharpWebApi.fsproj file which contains references to the relevant code files. It's important to note that the order of the files in the ItemGroup specifies the order that files depend on each other. Lower files depend on files higher up

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <Compile Include="WeatherForecast.fs" />
    <Compile Include="Controllers/WeatherForecastController.fs" />
    <Compile Include="Startup.fs" />
    <Compile Include="Program.fs" />
  </ItemGroup>

</Project>

Lastly, we have a controller that resides in the Controllers/WeatherForecastController.fs with its types defined in the WeatherForecast.fs file. Looking at the WeatherForecast.fs file we can see that the type has a few simple properties and one function

WeatherForecast.fs

namespace FSharpWebApi

open System

type WeatherForecast =
    { Date: DateTime
      TemperatureC: int
      Summary: string }

    member this.TemperatureF =
        32 + (int (float this.TemperatureC / 0.5556))

Next up, we can see the controller which contains a single GET endpoint which delivers a random array of weather forecasts. Here we can see a few different things. First, the namespace is FSharpWebApi.Controllers, this pretty much follows the .NET standard of the Namespace being related to the Folder name, we can also see the ApiController attribute that adds some useful functionality for basic API handling and the Route attribute that states the controller route

The WeatherForecastController type defines the controller and that it inherits from ControllerBase, additionally the constructor requires the ILogger service which will be provided by DependencyInjection

Lastly, looking at the __Get method we can see the HttpGet attribute that specifies that this is a Get Method, and the __ shows that we don't care about references to the function's this, and the return type for the function is an array of WeatherForecast

WeatherForecastController.fs

namespace FSharpWebApi.Controllers

open System
open Microsoft.AspNetCore.Mvc
open Microsoft.Extensions.Logging
open FSharpWebApi

[<ApiController>]
[<Route("[controller]")>]
type WeatherForecastController (logger : ILogger<WeatherForecastController>) =
    inherit ControllerBase()

    let summaries = [| "Freezing"; "Bracing"; "Chilly"; "Cool"; "Mild"; "Warm"; "Balmy"; "Hot"; "Sweltering"; "Scorching" |]

    [<HttpGet>]
    member __.Get() : WeatherForecast[] =
        let rng = System.Random()
        [|
            for index in 0..4 ->
                { Date = DateTime.Now.AddDays(float index)
                  TemperatureC = rng.Next(-20,55)
                  Summary = summaries.[rng.Next(summaries.Length)] }
        |]

Creating a Controller

Creating a new controller is not particularly complex given that we have the above as a starting point.

Get Handler

We're going to create a handler that is able to return a simple message for an even param, and a 404 for a odd param in order to look at how we can return actual response codes in cases where we aren't always able to return something of a constant type

First, we can create a Controllers/MessageController.fs file with just some basic scaffolding to start with. We'll define a Get controller that just returns the id it receives as a route param multiplied by two if the the result shouldDouble param is set to true. Additionally we can see the sprint function used to format the output as a string

Before we can add the data to the actual controller we need to add the <Compile Include="Controllers/MessageController.fs" /> to the ItemGroup in the FSharpWebApi.fsproj file, :

FSharpWebApi.fsproj

  <ItemGroup>
    <Compile Include="WeatherForecast.fs" />
    <Compile Include="Controllers/WeatherForecastController.fs" />
    <Compile Include="Controllers/MessageController.fs" />
    <Compile Include="Startup.fs" />
    <Compile Include="Program.fs" />
  </ItemGroup>

And then we can put together the controller in the MessageController.fs file:

MessageController.fs

namespace FSharpWebApi.Controllers

open Microsoft.AspNetCore.Mvc
open Microsoft.Extensions.Logging

[<ApiController>]
[<Route("[controller]")>]
type MessageController (logger : ILogger<MessageController>) =
    inherit ControllerBase()

    [<HttpGet("{id}")>]
    member __.Get (id : int, shouldDouble : bool) : string=
        logger.LogInformation("I am a controller")

        let result =
            match shouldDouble with
            | true -> id * 2
            | false -> id

        sprintf "Hello %d" result

From the function's signature we can see that it has an id and shouldDouble values as inputs and that it returns a string. We have made these explicit however if we were to leave them out it would be fine too as F# would be able to infer the types, see that below:

We can open the following URLs in our browser and should be able to open the /message/3 and /message/3?shouldDouble=true routes and see hello 3 and hello 6 respectively

Note that if not specified the handler inputs will try to be parsed from the body

Now, if we would want to update this to return some sort of general HTTP Response Code when a user sends some kind of input, for example if the result is 4, we will need to modify the function such that we are able to reference the this and the return type of the function is now an IActionResult

[<HttpGet("{id}")>]
member this.Get (id : int, shouldDouble : bool) : IActionResult =
    logger.LogInformation("I am a controller")

    let result =
        match shouldDouble with
        | true -> id * 2
        | false -> id

    match result with
    | 4 -> this.NoContent() :> IActionResult
    | _ ->
        sprintf "Hello %d" result
        |> this.Ok
        :> IActionResult

From this we can see that we are using an additional match to either return this.NoContent() as an IActionResult or this.Ok with the piped message as an IActionResult. Just note that the following matches are equivalent:

// call the `this.Ok` function with
match result with
| 4 -> this.NoContent() :> IActionResult
| _ ->
    this.Ok(sprintf "Hello %d" result) :> IActionResult

// pipe the result of the format through
match result with
| 4 -> this.NoContent() :> IActionResult
| _ ->
    sprintf "Hello %d" result
    |> this.Ok
    :> IActionResult

// pipe the result of the format through on a single line
match result with
| 4 -> this.NoContent() :> IActionResult
| _ -> sprintf "Hello %d" result |> this.Ok :> IActionResult

Post Handler

We can also create a POST handler that will pretty much do the same as the above handler, we can pretty much just take the values from the function body and pass it to the previous handler we put together

Before we can create the handler, we need to create a type called PostData that can be used by the method to receive data, we can define this towards the top of the file, above the type definition for our MessageController. The type also needs to have the CLIMutable attribute so that the JSON deserializer can parse the data from the post body into it correctly

[<CLIMutable>]
type PostData =
    { id : int
      shouldDouble : bool }

Next we simply need to define the Post method with an HttpPost attribute which will just call the this.Get using the input params. this can be done pretty simply too

[<HttpPost>]
member this.Post(data : PostData) : IActionResult =
    this.Get(data.id, data.shouldDouble)

And that's really all that's needed

Conclusion

So yeah, that's pretty much it - Not that bad right? I feel like there are a couple of things that feel a little bit weird because of the pieces of OOP running around from C# that add a bit more overhead than I'd like, but it's .NET, that's inevitable

Still a few more to posts on F# to come, so stay in tuned

Nabeel Valley

DEV Community: Nabeel Valley

Using React.memo for Controlling Component Rendering

Contents

React Top Level API

Component Rendering

API Definition

Rendering On a Specific Type of Change

Conclusion

REPL

References

stdout: Type Guards and Narrowing in Typescript

Contents

Using typeof

Using in

Using is

References

stdout: Localhost HTTP Proxy with Node.js

Contents

Build Data Visualizations with React

Getting Stared

Scales (d3-scale)

Continuous Scales

Linear

Sequential Color

Ordinal Scales

Band Scale

Building a Bar Graph

The SVG Root

Bars

Y Labels

X Labels

Final Result

Ticks and Grid Lines

Building a Line Graph

Working with Domains

Create a Line

Formatting

Grid Lines

Final result

blog: Building Serverless Apps using the Serverless Stack Framework

Serverless Stack Framework

Init Project

Run the App

The Files

Stack

Add a new Endpoint

VSCode Debugging

Add a DB

Define Common Structures

Access DB

Create

Get

GetAll

Define Lambdas

Create

Get

GetAll

Testing

Creating Notes Using a Queue

Create Queue

Update the Create Handler

Add Queue-Based Create Handler

Deploy

Teardown

stdout: Multi-module Python project using an __init__.py file

The Modules

The Main

The Error

The Solution

Custom Attributes in C# Web Controllers

Attribute Types and Execution Order

IActionFilter

IAuthorizationFilter

Modify Response Data

Attribute on a Class

Attributes with Input Parameters

Attribute Setting at Class and Method Level

Code in a Container

Prerequisites

Docker Containers

Using `typeof`

Using `in`

Using `is`

Scales (`d3-scale`)

stdout: Multi-module Python project using an init.py file

`Home.js`

`NotFound.js`

`post-1.json`

`post-2.json`