DEV Community: Collin Kleest

Optimizing API calls in web components

Collin Kleest — Mon, 01 Feb 2021 15:18:51 +0000

Overview

When building a web component you may need to grab a resource from an external entity. This is typically called an "API call", in this particular blog post I will go over how we can optimize API calls when fetching data using Javascripts fetch method and some extra tricks. Throughout this article, I will be referring to code in an element I wrote for elmsln/lrnwebcomponents web component mono-repo.
Here is the full source code of the element itself github-preview-source

Main Points

How the browser loads Javascript
Making an api request using fetch
Lit-element lifecycle methods
Using timeout and debounce
Applying headers for caching

How the browser loads javascript

This may seem like a simple concept, you include your script on an HTML page and your javascript is loaded. Under the hood, your browser is doing a lot more than just loading that script. Javascript is built on the idea of asynchronous processing which is basically processing the code while the browser is doing other things to set up the page. This all happens very quickly but occurs in the browser's event loop.

The event loop sets tasks in a queue executing each task and waiting for it to finish, then executing the next task in the queue. This is important to understand because our API call will be registered as a task, queued behind our script because we encapsulate it in a setTimeout call. More on this later...

Making an API request using fetch

This may be straightforward but I am still going to cover it. Inside my web component, I will define a function called fetchGithubData. This function will accept some parameters needed to make the call to Github's API and return data to a handler method, which will save the data inside our element so it can display it.

fetchGithubData(apiUrl, org, repo){
   fetch(`${apiUrl}/repos/${org}/${repo}`)
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
      })
      .then((json) => {
        this.handleResponse(json);
      })
      .catch((error) => {
        this.__assetAvailable = false;
        console.error(error);
      });
}

The function takes in an apiUrl (https://api.github.com), a GitHub organization or user, and a repository name then feeds that data to our handler function.

handleResponse(response) {
    if (response) {
      this.__assetAvailable = true;
      this.__description = response.description;
      this.repoLang = response.language;
      this.__stars = response.stargazers_count;
      this.__forks = response.forks;
    }
  }

Our data handler first checks if we got a response, if we do have a response it sets some properties that get rendered inside of our web component.

Here is what our web component looks like for reference.

We can see it contains some of the properties that we set in our handler method like title, the repos primary language, forks, description and stars.

Lit Element lifecycle methods

Since my element uses the lit-element library we will take advantage of the life cycle methods to make our API call. Lit element provides a couple of life cycle methods but the two we will look at are firstUpdated and updated.

The firstUpdated method gets called as soon as the DOM registers the element. The updated lifecyle method gets called immediately after firstUpdated and is where we will make our API call.

We want to make our call in the update function because if the repository or organization changes after the element has been mounted and rendered we can respond to that change because our element has been "updated". Take a look at this demo video to show why we use our API call inside the updated lifecycle method.

If you are interested in learning more about lit-elements life cycle methods visit their docs: https://lit-element.polymer-project.org/guide/lifecycle

Using timeout and debounce

So now I am going to show why and how we will use the Javascripts built-in setTimeout function to make our API call.

Here is the code in our updated life cycle method.

updated(changedProperties) {
    changedProperties.forEach((oldValue, propName) => {
      // only make the fetch after we get everything setup
      if (
        [
          "repo",
          "org",
        ].includes(propName) &&
        this[propName]
      ) {
        clearTimeout(this.__debounce);
        this.__debounce = setTimeout(() => {
          this.fetchGithubData(
            this.apiUrl,
            this.repo,
            this.org,
          );
        }, 0);
      }
    });
  }

We use a forEach to go through each property that changed. You may be wondering well what about the initial properties set, these properties are still considered new, and are passed into the updated function when the component mounts.

Next, we check if the properties we want to consider are properties of the class. Then if there is already a timeout set in debounce variable we clear this. We do this to make sure we only make the API call once, so once our forEach gets to the last changed property the timeout won't clear and make the API call.

We use setTimeout because our browser will call this once all the javascript in the file has been processed. This allows the browser to make sure everything is in place before we make our API call. The setTimeout callback gets added to the browser's event loop queue and gets called immediately after it's interpreted all the other Javascript in the file.

Applying headers for caching

Lastly, we will apply headers to our request that tells the browser to cache our result (save it for later). This increases performance when your browser makes the same request, it checks the cache first if the response object is present it will use the cached response instead of making a new request.

We can set out headers to do this in the constructor of the element as shown here:

constructor() {
    super();
    this.url = "https://github.com";
    this.apiUrl = "https://api.github.com";
    this.rawUrl = "https://raw.githubusercontent.com";
    this.extended = false;
    this.readMe = "README.md";
    this.branch = "master";
    this.viewMoreText = "View More";
    this.notFoundText = "Asset not found";
    this.headers = {
      cache: "force-cache",
    };
  }

Then we can use these headers in our fetch call.

fetch('https://someendpoint.com/git/', this.headers)

Conclusion

That's it! If you are interested in learning more about web components and some of the stuff I referenced in this blog post check out the resources section below.

Resources

Socials

LinkedIn
Github

Contributing to an Open Source Project

Collin Kleest — Thu, 07 May 2020 03:51:11 +0000

Diving into a open source project can seem intimidating and daunting at first but when documentation is well written and you have google on your side it isn't anything impossible to figure out.

When I was testing this open source content management system called HAXcms I noticed a small issue that I thought should be fixed.

So after looking at their documentation on how to contribute and a couple of chats with the lead developer I had a development environment up and running. Now this did come with some hiccups that were related to my Operating System (fedora 31) which I am going to cover in the post.

First off HAXcms is built out of web components (reusable pieces of HTML, CSS, and Javascript). There were too main repositories I had to clone and fork. One was the HAXcms repository and the other one called the lrnwebcomponents repository, a repo that contained most elements in HAXcms. Forking a repository is essentially taking a copy of repo and saving it as a repository on your account. This is typically the first step when contributing to an open source project.

After I forked both the HAXcms repository and the lrnwebcomponents repositories I had to clone a local copy to my system.

$ git clone https://github.com/collinkleest/HAXcms

$ git clone https://github.com/collinkleest/lrnwebcomponents

There was also a couple of pieces of software I needed to get a proper development environment running. These were docker, yarn, docker-compose and ddev.
Here are the commands I used to install these on Fedora, these commands will vary depending on your system.
Docker Install:

$ sudo dnf config-manager --add-repo https://download.docker.com/linux/fedora/docker-ce.repo

$ sudo dnf install docker-ce docker-ce-cli containerd.io

$ sudo usermod -aG docker $USER

Yarn Install:

$ sudo dnf -y install yarn

DDEV Install:

$ sudo curl -L https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh | bash

Docker-Compose Install:

sudo curl -L "https://github.com/docker/compose/releases/download/1.25.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

Now installing all this software on your system may seem like a daunting task but if you can use google I believe anyone can figure it out. Also for all of these software their is documentation on and guides to installing on your system.

Once I installed all the necessary software for my system I had to get the development environment setup so I could work on the feature I wanted to add. With following documentation and recommendations from the lead developer I installed the node dependencies inside the lrnwebcomponents repository and made a symbolic link on these node modules to the haxcms folder so it can utilize the node dependencies without installing them in the hax directory.
Here are the commands I executed to do this.

# change directory into the lrnwebcomponents folder
$ cd lrnwebcomponents/

# install the node dependencies with "yarn install"
$ yarn install

# change into the HAXcms directory
$ cd ../HAXcms
$ sudo ln -s ../lrnwebcomponents/node_modules

After this I was almost sure that everything was perfectly setup to begin development, I was wrong. When running ddev start in the HAXcms directory to get the content management system running I ran into a issue. This issue seems to occur with the newer versions of Fedora particularly Fedora 31 and 32.
This was the error I was getting cgroups: cgroup mountpoint does not exist: unknown. I initially had no clue what was causing this but after a bit of research on google I found that the newer versions of fedora use cgroupsv2 when Docker only supports cgroupsv1. I finally found a "unthethored" temporary solution to this issue on the docker issues tab on github. The solution follows:

$ sudo mkdir /sys/fs/cgroup/systemd
$ sudo mount -t cgroup -o none,name=systemd cgroup /sys/fs/cgroup/systemd

Now I was ready to begin development, the feature I wanted to implement was a simple url redirect to the sites page in haxcms.
This is what the element looks like.

All I want this button to do is redirect me to the sites page of HAXcms where I can manage all my sites, it's almost like a dashboard or a "go to home" button.
This is how I implemented it, I had to add an onlick event handler inside the element itself. After looking at the LitElement Documentation I found an example of how I can call a function when the element is clicked.

<paper-avatar
        @click=${this.redirectToSites}
        id="username"
        label="${this.userName}"
        two-chars
        src="${this.userPicture}"
></paper-avatar>

Then I had to write the actual function that redirects the user back to the sites page. After some research and google searchs I found out I could create a temporary anchor element, and grab the url from the anchor element with anchorElement.href. I also learned some JavaScript Regex from freecodecamps web development course. This allowed me to extract if the http method is standard encrypted http or encrypted https.
In the end this is what the JavaScript function looks like.

redirectToSites() {
    let redirectUrl = "";
    let webTypeRegex = /^http/;
    let tmp = document.createElement("a");
    tmp.href = window.location.href;
    if (webTypeRegex.test(tmp.href)) {
      redirectUrl = `http://${tmp.host}`;
    } else {
      redirectUrl = `https://${tmp.host}`;
    }
    window.location.replace(redirectUrl);
  }

Result

Conclusion
Contributing to an open source project is something every developer should do. Not only is it a good learning experience but you also get the good feeling of helping others with a project that is for the greater good.

How to build a basic Web Component with Lit Element

Collin Kleest — Sat, 28 Mar 2020 21:39:50 +0000

Welcome to my first "dev.to" post, in this post I am going to be going through the basics of building a web component with Lit Element. I will be creating a project card html element that can be reused to list mutiple projects. This is great if you have a personal portfolio with a projects page.

Youtube Video Tutorial: https://www.youtube.com/watch?v=8gMDhXWMxRg&t=2s
Github Repo w/ Code: https://github.com/collinkleest/lit-element-demo/

What is a Web Component and what is Lit Element?

Web Component: a web component is a custom html tag that encapsulates HTML, CSS, and Javascript functionality into a single html tag. Web components work across modern browsers and work inside any web framework (e.g. react, vue, or angular). Web Components use the shadow document object model (DOM) which allow components to be excluded from global css styling, therefore components have their own styling defined inside the component.

Lit Element: lit element is base class for creating web components, it is backed by the polymer project web framework which is being worked on by google developers. Web components can be developed "natively" by extending HTMLElement but Lit Element makes it much easier for developers to create components.

Lets Build a Web Component!

Installation

I am currently on Fedora a Red Hat Linux distribution so the installation of everything will be tailored towards Linux users but the same can be done on Mac and Windows with a little bit of extra googling. Lets get started!

Lets first install nodejs, when you install node it will also include the node package manager (NPM). You can find the download here NodeJS.

On Fedora you will need to have the RPM Fusion repositories for easy installation. Go ahead and install the free and non-free RPM fusion repos.
Free:

$ sudo dnf install \
  https://download1.rpmfusion.org/free/fedora/rpmfusion-free-release-$(rpm -E %fedora).noarch.rpm

Non-free (optional):

$ sudo dnf install \
  https://download1.rpmfusion.org/nonfree/fedora/rpmfusion-nonfree-release-$(rpm -E %fedora).noarch.rpm

We are going to install the latest stable version, you can install the newest cutting edge version if you desire to.
Install nodejs and npm:

$ sudo dnf -y install nodejs

Make sure the installation was successful by checking the version.

$ node --version
v12.16.1

Check if NPM was successful as well.

$ npm --version
6.14.4

Now we are going to install polymer but first since we have a fresh installation of node we need to make sure we have sufficient permissions to the node_modules folder usually in the /usr/local/lib/node_modules directory.
Perform the following command:

$ sudo chown -R $USER /usr/local/lib/node_modules

Now that we have permissions we are going to use NPM to install polymer-cli, use the following command and check the version to make sure it was installed correctly.

$ npm install -g polymer-cli
$ polymer --version
1.9.11

The last step for getting setup is 1) creating a folder for our project, 2) creating a JavaScript file (projectCard.js) and an html starter point (index.html) 3) installing lit-element in the current project directory. Use the following commands to do so:

$ mkdir lit-element-demo
$ touch index.html projectCard.js
$ npm install lit-element

Lets start with the HTML, here I will list the most important things needed. We must link our JavaScript file to our HTML file, we can do this with the following HTML script tag:

<script type="module" src="projectCard.js"></script>

Even though we haven't written any code for our web component lets define it in our html. Our component which will be called <project-card> will have three attributes; name, url, and img. The name attribute will be the name of our project, the img attribute will be a link to an image we want the card to display and the url is a direct link to the project.

<project-card name="Python Automation" img="https://img.icons8.com/nolan/300/python.png" url="https://github.com/collinkleest">
</project-card>

For reference here is the complete HTML.

Complete HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Lit Element Demo</title>
    </head>
    <body>

        <project-card name="Python Automation" img="https://www.stickpng.com/assets/images/5848152fcef1014c0b5e4967.png" url="https://github.com/collinkleest/GitHub_CLI_Automator"></project-card>
        <script type="module" src="projectCard.js"></script>
    </body>
</html>

Now lets go over to our JavaScript file, I am going to highlight some of the key parts of building a Web Component.
First we must import lit-element at the top of our file, then we will need to create a class, and lastly we will inject our element into the document with customELements.define('element-name', Element-Class);.

// import LitElement, HTML, & CSS from our lit element module
// when Polomer deploys it fill fill the path for our lit-element module
import {LitElement, html, css} from 'lit-element';

//this is our class where everything that goes into our element will be
class ProejctCard extends LitElement{

}

// this is where we "inject" our custom element into our HTML file
customElements.define('project-card', ProjectCard);

Inside our class lets define two methods, a get method for our properties aka (class variables, attributes) and an empty constructor. The empty constructor is used if someone creates an element without passing in attributes.

constructor(){
        super(); //calls the empty LitElement constructor
        this.name = "Project Name";
        this.url = "https://google.com";
        this.img = "https://img.icons8.com/cotton/2x/folder-invoices.png"
    }

    static get properties(){
        return{
            name: { type: String },
            url: { type: String},
            img: { type: String}
        };
    }

Next, lets call the render function which actually renders our HTML. Make sure you are still in the ProjectCard class.

render(){
        return html`
            <div class="card">
                <img src="${this.img}" width=300px>

                <div class="container">
                    <h3> <b> ${this.name} </b> </h3>
                    <p> <a href="${this.url}"> Project Link </a></p>
                </div>
            </div>
        `;
    }

Lastly add a get styles method for CSS styling.

static get styles(){
        return css`
            .card{
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
                transition: 0.3s;
                border-radius: 5px;
                width: 300px;
            }
            .card:hover{
                box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
            }
            .container  {
                padding: 2px 16px;
            }
        `;
    }

Complete `projectCard.js` file.

import {LitElement, html, css} from 'lit-element';

class ProjectCard extends LitElement{
    // defined css styling
    static get styles(){
        return css`
            .card{
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
                transition: 0.3s;
                border-radius: 5px;
                width: 300px;
            }
            .card:hover{
                box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
            }
            .container  {
                padding: 2px 16px;
            }
        `;
    }


    render(){
        return html`
            <div class="card">
                <img src="${this.img}" width=300px>

                <div class="container">
                    <h3> <b> ${this.name} </b> </h3>
                    <p> <a href="${this.url}"> Project Link </a></p>
                </div>
            </div>
        `;
    }

    constructor(){
        super();
        this.name = "Project Name";
        this.url = "https://google.com";
        this.img = "https://img.icons8.com/cotton/2x/folder-invoices.png"
    }

    static get properties(){
        return{
            name: { type: String },
            url: { type: String},
            img: { type: String}
        };
    }

}

customElements.define('project-card', ProjectCard);

We are done! Make sure you save your files and go to your command line or terminal to deploy with polymer!

Use the following command to deploy with Polymer!

$ polymer serve

#EXPECTED OUTPUT:

info:   Files in this directory are available under the following URLs
      applications: http://127.0.0.1:8081
      reusable components: http://127.0.0.1:8081/components/lit-element-demo/

Use that first link to view your web component in action.
For me it was http://127.0.0.1:8081 or http://localhost:8081.

DEV Community: Collin Kleest

Optimizing API calls in web components

Overview

Main Points

How the browser loads javascript

Making an API request using fetch

Lit Element lifecycle methods

Using timeout and debounce

Applying headers for caching

Conclusion

Resources

Socials

Contributing to an Open Source Project

How to build a basic Web Component with Lit Element

What is a Web Component and what is Lit Element?

Lets Build a Web Component!

Installation

Complete HTML

Complete `projectCard.js` file.

Finished Product!

Additional Resources / Links

Social Media

DEV Community: Collin Kleest

Optimizing API calls in web components

Overview

Main Points

How the browser loads javascript

Making an API request using fetch

Lit Element lifecycle methods

Using timeout and debounce

Applying headers for caching

Conclusion

Resources

Socials

Contributing to an Open Source Project

How to build a basic Web Component with Lit Element

What is a Web Component and what is Lit Element?

Lets Build a Web Component!

Installation

Complete HTML

Complete projectCard.js file.

Finished Product!

Additional Resources / Links

Social Media

Complete `projectCard.js` file.