Use the platform with Web Components
Tags: webcomponents, javascript, esmodules, shadowdom
Published: 2019-04-02 21:40:58

---
title: Use the platform with Web Components
published: true
description: The Web is changing so fast in the last years, so maybe in some cases is better to choose the web standards
tags: webcomponents, javascript, esmodules, shadowdom
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nx6gqd7udsloe4czowfh.png
---

Major browsers support many features like Classes, Arrow Functions, Spread Operator, Template Literals, Instersection Observer, Web Components and with the introduction of ES Modules we can develop Web Applications without the help of module bundlers like Webpack or Rollup.

{% twitter 1113016962483998720 %}

I know what do you think... Talk is cheap, show me the code!

So I created a repository to share my test with Web Components and ES Modules.
I used the Github's API to develop 3 Web Components:

```html
    <github-profile nickname="timbl"></github-profile>
    <github-repositories nickname="timbl"></github-repositories>
    <github-followers nickname="timbl"></github-followers>
```

As you can see I added the nickname attribute, I used this attribute to retrieve data from Rest API. With WCs you can use html templates to handle fragments of markup to load with JS. For your information the template content is not render by the browser, but can be instantiated later or at runtime.
Below you can find the profile template:

```html
      <template id="github-profile-template">
         <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            div {
                display: inline-block;
                padding: 20px;
                width: 240px;
                height: 300px;
                border: 2px solid #f0f0f0;
                border-radius: 4px;
                overflow: hidden;
            }
            img {
                width: 100%;
                border-radius: 50%;
            }
            h1 {
                margin-top: 20px;
                font-size: 16px;
                color: #f0f0f0;
                text-transform: uppercase;
                text-align: center;
            }
        </style>
        <div>
            <img>
            <h1></h1>
        </div>
    </template>
```

Below you can find the javascript classes of every WC and you can see how the templates are loaded:

### Github Profile

{% gist https://gist.github.com/grandemayta/e138ece22c2516c194319d5ef879dc00 %}

### Github Repositories
{% gist https://gist.github.com/grandemayta/b177664de06272f8efc9ce4c37359625 %}

### Github Followers
{% gist https://gist.github.com/grandemayta/11c6df3cee18b69fea4e202b9da5a2d4 %}

I developed a service function to make http calls with Fetch. This function will be load from every WC.

{% gist https://gist.github.com/grandemayta/7c0ba5542de8e1e914fb02f966dc715b %}

And then I created a script file to import my 3 Web Components, I called this file bootstrap.js:

{% gist https://gist.github.com/grandemayta/5ed7156e362c3dc30ecbf8d342c394a7 %}

After that I added in the bottom the bootstrap script, I used the type="module" (ES Modules) in the tag:

```html
    <script type="module" src="bootstrap.js"></script>
</body>
</html>
```

If you open the index.html with your browser, you should see the following files:

![Scripts downloaded](https://thepracticaldev.s3.amazonaws.com/i/tvkpn8d5ys7hnafoirv1.png)

To improve performance you can enable HTTPS/2 on server side like Facebook:

![Facebook http2](https://cdn-images-1.medium.com/max/1600/1*iUnZLRBnJgrWqNuL1f_hYQ.png)

## Conclusion
In this project I didn't use Babel, Webpack, libraries or frameworks, but I used the **Web Standards** and my code is working on Chrome, Safari, Firefox and Opera.
You need polyfill to support Microsoft Edge for now.

The Web is changing so fast in the last years, so maybe in some cases is better to choose the standard.

## Links
- [Repository](https://github.com/grandemayta/esmodules-webcomponent)
- [Codepen Demo](https://codepen.io/grandemayta/project/full/AyaWmg)
- [Heroku Demo](http://grandemayta.herokuapp.com/js/esmodules-github-wc)

Keep calm and code!