DEV Community: Lee O'Connell

Web components with vanilla JavaScript

Lee O'Connell — Mon, 26 Apr 2021 18:17:30 +0000

What is a web component you ask?

Web components are reusable and encapsulated HTML elements, created using JavaScript. They let you create functionality inside a page that can be reused on another page, project or site. I thought I would create a quick tutorial creating a simple component while explaining the concepts.

Why use web components?

Web Components can be used in any framework, meaning if we build a component for one project we can carry it across to another project using a different framework with no extra coding required.
Shadow DOM, Shadow DOM allows components to have their own DOM tree that can’t be accidentally accessed from the main document. Styles cannot penetrate a component from the outside, and styles inside a component won’t bleed out.

Creating a simple tooltip component

To explain the basics of components we will create a tooltip component.

To start we will need to create a project to hold our component

.
+-- index.html
+-- components
|   +-- tooltip.js

After we have a basic structure we can start with our index.html file. Lets add some boiler plate html, and import our tooltip.js script

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Web Components</title>
    <!-- scripts -->
    <script src="./components/tooltip.js"></script>
  </head>
  <body>
    <h1>Tooltip example</h1>
  </body>
</html>

Basic setup

Now we have the index.html setup, we can start creating our first web component
Inside of the tooltip.js file we will create a new class called tooltip. We will extend this class from HTMLElement which represents all HTML elements.

class Tooltip extends HTMLElement {}

We have a empty class, now to add the constructor.

constructor() {
    super();
    this.attachShadow({ mode: "open" });
}

Because we are extending the HTMLElement we need to call super() to inherit the features of that class. this.attachShadow({mode: "open"}) attaches our element to the shadow DOM which keeps our components behaviour separate to the rest of the html.

Now we can add some html to our component

this.shadowRoot.innerHTML = `
            <style>
                #tooltip-container {
                    font-size: 24px;
                }

                .tooltip{
                    padding: 1rem;
                    border-radius: 10px;
                    background-color: black;
                    color: white;
                }
            </style>
            <slot></slot>
            <span id="tooltip-container">👉</span>
        `;

So we are accessing the shadowRoots innerHTML and setting it to what we want the component to be. This is mostly normal HTML apart from one element you may not have seen before, the <slot> tag. This is an element that we can use to add elements from the light DOM to inside of our component. In this case we will have the text that our tooltip will wrap around.

We can now define our component for our index.html to use.

customElements.define("example-tooltip", Tooltip);

^ Add this below the class definition. This is how we define our component to use it in our html. It takes two arguments, first the name of the element, this always has to be at least two words separated by a -. The second is our components class.

Let's try it out! In our html let's add our new element.

<example-tooltip>
    Testing the tooltip
</example-tooltip>

We should be able to see our text plus the pointing hand emoji, if we inspect the element we can also see the shadowDOM with our span inside.

Lets add some functionality

This is cool and all, but it doesn't do much... to add some functionality we can add in a method called connectedCallback() this method is called when our component is attached to the DOM.

connectedCallback() {
    console.log("Ready to go 😎");
  }

Try it out now, you can see in the console our component is ready to go. Still a bit useless though.

Let's add some event listeners to see when a mouse hovers over the tooltip.

this._tooltipContainer = this.shadowRoot.querySelector(
      "#tooltip-container"
    );

// Add event listeners to our div element
this._tooltipContainer.addEventListener(
   "mouseover",
   console.log('mouse over');
);
this._tooltipContainer.addEventListener(
    "mouseleave",
    console.log('mouse left');
);

We can listen to the mouse events now, time to add some methods to show a tooltip.

The show method will append a new element into the shadow root with our tooltip text

_showTooltip() {
    this._tooltip = document.createElement("span");
    this._tooltip.innerText = 'Default text';
    this._tooltip.className = "tooltip";

    this.shadowRoot.append(this._tooltip);
}

In this method we are creating a span and setting the text to default text and appending this element to our tooltip element.

Lets handle the mouse leaving the tooltip

_hideTooltip() {
    this._tooltip.remove();
}

Let's update the event listers to call our shiny new methods.
Inside of the connected callback update the event listeners.

this._tooltipContainer.addEventListener(
      "mouseover",
      this._showTooltip.bind(this)
);
this._tooltipContainer.addEventListener(
      "mouseleave",
      this._hideTooltip.bind(this)
);

The .bind(this) is a quirk of Js, if we didn't have it our method wouldn't understand what this is in terms of our class.

We should now have a basic but working tooltip. Try it out!

Adding attributes

A tooltip isn't much use if we cant set the text inside of it. To do this we will use an attribute that we can pass in the tag of the element.
Inside of the connectedCallback() method add:

this._tooltipText = this.getAttribute("tip-text") || "Default Text";

We have the attribute data, now time to use it. Inside of the _showTooltip() update the inner text to:

this._tooltip.innerText = this._tooltipText;

We can now update our html to include the attribute inside of the <example-tooltip> element. Like so:

<example-tooltip tip-text="Some hint about this">

Try it out! We now have a working tooltip, with text we can pass into the component. We can use this component in any html file as long as our script has been imported.

Good practice

We have a working component. But what if our page dynamically adds and removes the element from the DOM. Our event listeners will remain, which could slow things down... There is a method that is called when our element is removed from the dom, the disconnectedCallback() it is similar to the connectedCallback(). To clean up our component we will add the following inside the class:

disconnectedCallback() {
    this._tooltipContainer.removeEventListener("mouseover", this._showTooltip);
    this._tooltipContainer.removeEventListener("mouseleave", this._hideTooltip);
    console.log("All clean 😊");
}

Try selecting the element and deleting it using the dev tools. You should see a console log when the component has been removed.

Thanks for reading!

Thanks for taking the time to read this article, it's been lengthy but hopefully now you understand what a web-component is, how to make one and how they can be beneficial. If you are stuck check out my Github repo for some help. If you are interested in doing more with this concept you should check out Stencil.js, a powerful complier that creates custom elements using typescript.

I am still new to components myself, so any comments are appreciated

Custom Cloudwatch Metrics using the CDK

Lee O'Connell — Fri, 14 Aug 2020 15:04:33 +0000

Over the past few months, I have been working to create an internal dashboard using AWS CloudWatch for my summer internship.

After trying to find a way to easily deploy the dashboard I came across the AWS Cloud Development Kit. This allowed me to create a Stack via a language I am familiar with (Python), rather than using CloudFormation.

This is by no means a tutorial with best practices on creating a stack with the CDK, but hopefully someone can find it helpful for getting started.

Thanks to Simon-Pierre Gingras for his post that helped me through custom metrics and the CDK.

Installing the CDK

I will link to the AWS Docs for installing the CDK: Installing CDK Docs

Let's get started!

Once we have the CDK installed we need to create a directory for our project to live in, once created we need to change directory into it and create the cdk project.

mkdir my-project
cd my-project
cdk init app --language python

This creates all the code/files necessary for the CDK. It also creates a python venv which we will need to start and install the requirements.txt onto.

source .env/bin/activate
python -m pip install -r requirements.txt

Creating the Dashboard

Now we have the project created we can get into creating a basic dashboard and include some AWS widgets for now.

Firstly we will need to import a few things from aws_cdk
I will explain what each is used for as we go along.

from aws_cdk import(
  aws_lambda as _lambda,
  aws_cloudwatch as cw,
  core
)
from aws_cdk.aws_cloudwatch
import TextWidget, SingleValueWidget, GraphWidget

Now we can create the dashboard and add some widgets. To do Under the __init__ function in the my_project_name_stack.py file we will add the following code:

cw.Dashboard(
  self,
  "dashboard_name",
  widgets = [
    TextWidget(
      markdown = 'Title widget'
      width = 24,
      height = 2
    )
  ]
)

This code will create a dashboard with the name of dashboard_name and will display a single text widget with the markdown specified. We have also added width and height attributes which will tell the dashboard how to display the widget.

We will add a more useful AWS default metric under the previous widget using the SingleValueWidget function:

SingleValueWidget(
  metrics = [cw.Metric(
    metric_name = 'ResourceCount',
    namespace = 'AWS/Usage',
    dimensions = dict(
      Type = 'Resource',
      Resource = 'vCPU',
      Service = 'EC2',
      Class = 'Standard/OnDemand'
    )
  )],
  width = 6,
  height = 3,
)

Add the code above to metrics=[]. Following up each separate widget with a , as the metrics=[] is expecting an list of widgets and uses the list to format the dashboard which we will look at shortly.

Deploy the stack

Now we have some basic widgets in the stack, we can try to deploy the dashboard to AWS using the CLI.

Firstly make sure you have valid AWS credentials in the .aws/credentials file within the project directory.
To test we don't have any errors we can use cdk synth to convert our CDK code into a cloudformation change set (This is what AWS cloudformation will receive when building the stack)
Finally we can deploy the stack to AWS using the cdk deploy command this will create the change set and send it to AWS CloudFormation which will create the dashboard with our widgets for us. (This can take a few minutes)
Once deployed, have a look for our new dashboard within the CloudWatch page on the AWS Console. If everything is working we can take down the stack again using cdk destroy this will delete all the resources from the stack so we wont get charged for them.

Custom Metrics time!

Now we have a basic dashboard working from the CDK, we can start to add some custom metrics. To do this we will need to create a lambda function using boto3 to access cloudwatch. We will also need to add the lamdba into our XXXX_stack.py file as it will need to be deployed at the same time as our dashboard.

Firstly we need to add a lambda folder into the project, and create a file within called custom_metric.py within the new file add the following code:

import boto3

metric_data = <The value you want the metric to display: int>
metric = {
    'MetricName': 'Instance Metrics',
    'Dimensions': [
        {
            'Name': 'MetricName',
            'Value': 'CustomNumberMetric',
        },
    ],
    'Unit': 'None',
    'Value': metric_data
}

MetricName the name of the metric within the namespace.
Name The name of the metric column.
Value the value of the metric itself.

Now we need to add the code to submit the metric to cloudwatch.

cloudwatch = boto3.client('cloudwatch', <RegionName>)
cloudwatch.put_metric_data(
    Namespace='CustomMetrics',
    MetricData=metric
)

Let's add the lambda function to the CDK!

Now we have our basic custom metric created we can add it into our stack. To do this we need to add a few other items. The CDK will try its best to create IAM roles for the lambda functions to give the access they need to function. In this tutorial we will add our own roles so our lambda can access CloudWatch.

Creating the IAM role:

Firstly we need to add another import statement aws_iam as iam inside the from aws_cdk import() import statement
Next we create the role with the following code

custom_metric_role = iam.Role(
            self, 'custom_metrics_role',
            assumed_by=iam.ServicePrincipal("lambda.amazonaws.com"),
         managed_policies=[
         iam.ManagedPolicy.from_managed_policy_arn(
             scope=self,
             id='ExeRole',                 
         managed_policy_arn='arn:aws:iam::aws:policy/service-role/AWSLambdaKinesisExecutionRole'
        )
    ]
)

custom_metric_role.add_to_policy(
    statement=iam.PolicyStatement(
        actions=[
            "cloudwatch:PutMetricData"
        ],
        resources=[
            "*"
        ]
     )
)

Note: This probably isnt the best way to create a role (I am still learning ahah!)

Adding the Lambda Function to the stack

Now we have our role we can add the lambda function into the stack.

Once again we need to add another import statement. Add aws_lambda as _lambda to the from aws_cdk import()
Now we add the code below for the lambda function

_lambda.Function(
  self, "custom_metric_lambda",
  runtime = _lambda.Runtime.PYTHON_3_7,
  code = _lambda.Code.from_asset('lambda'),
  handler = 'custom_metric.lambda_handler',
  role = custom_metric_role,
  timeout = core.Duration.seconds(10)
)

Add the metric to the dashboard

Add the following code inside the metric=[] argument of the cloudwatch dashboard function.

SingleValueWidget(
  metrics = [cw.Metric(
    metric_name = 'Instance Metrics',
    namespace = 'CustomMetrics',
    dimensions = dict(
      MetricName = 'CustomMetric',
    )
  )],
  width = 6,
  height = 3
)

That's all the coding finished!

Final Deployment!

Now all we have to do is deploy the stack.

In the terminal use cdk diff this command will run our code and will show any errors. It will also show you the differences in the code base compared to the last deployment.
If that all passes we can deploy using cdk deploy ***

Thank You!

I am by no means an expert in the topic but found the documentation really awkward to get your head around so hopefully this 'tutorial' helps.

Notes

Any comments would be greatly appreciated, I have a lot more to learn about the CDK and would love to create a sever-less app using this stack and the AWS SAM model.

This is also my very first Dev.to post, would love suggestions of good topics to look at as a student dev.