Use the platform with Web Components

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.

Gabriel Mayta

@grandemayta

With the introduction of ES Modules, maybe we don't need module bundler.
Credits: Johannes Ewald
#FrontEnd #javascript #webdeveloper

09:54 AM - 02 Apr 2019

1 4

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:

    <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:

      <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

Github Repositories

Github Followers

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

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

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

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

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

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

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
• Codepen Demo
• Heroku Demo

Keep calm and code!