Last updated on March 20, 2020
In this week blog post, I share my recent work about How I built JavaScript Framework Agnostic UI Component.
NOTE: Those who are all new to my blog, Here I will be releasing a blog post on every Saturday about building UI using Library/Framework but JavaScript based.
Introduction
As a beginner, this term Framework Agnostic UI Component might look like buzz word.
That is nothing but, Web Component which helps us to build the reusable UI component that will work nicely with all the JavaScript based frameworks.
How I built Framework Agnostic UI Component?
How COOL is that having our own Top Header Bar as a web component that we can use it any Angular, React, Vue and Svelte JavaScript Frameworks.
Obviously, I developed this idea for keeping this component as a reusable thing that I am going to share here.
Covering Web Component basics is beyond the scope of this post as I want to share how I built it with Vanilla JavaScript rather than using Web Component Libraries.
Designing the Component
As part of building any UI component, first things first. Let’s sort out the needs.
- Logo (Brand)
- Logo/Brand title
- Menu Links
In order to keep this component very simple and short, the above needs are the most widely used across all the web applications.
Sole purpose of this component must be reusable and able to customize by other developers and component name would be vj-top-bar.
To change the menu links and logo brand name along with anchor link, everything I designed it to get as the input via attribute.
I had an option for Logo/Brand Title as the named slot thus the developer can have their own markup for keeping brand name as they wish.
The below snippet depicts about the said points,
<vj-top-bar logo="https://cdn.pixabay.com/photo/2017/02/15/20/58/ekg-2069872_1280.png">
<span class="logo-title" slot="logo_title">VJ-Topbar</span>
</vj-top-bar>Logo input accepts either empty value or external URL/relative path for an image file and kept for complete customization.
Last but not least, the menu links which accepts an array of objects to represent each menu link that will comprise of address and anchorText as properties. For example, let’s consider the below data input.
[
{ address: '#grey', anchorText: 'Grey' },
{ address: '#red', anchorText: 'Red' },
{ address: '#blue', anchorText: 'Blue' }
]This data input must be set it to links attribute of vj-top-bar web component.
Before setting this array to links property we convert that raw value to string with JSON.stringify().
// To assign links & config attributes of vj-top-bar Web component
const topBar = document.getElementsByTagName('vj-top-bar');
if (topBar && topBar.length && topBar[0]) {
const element = topBar[0];
element.setAttribute(
'links',
`${JSON.stringify([
{ address: '#grey', anchorText: 'Grey' },
{ address: '#red', anchorText: 'Red' },
{ address: '#blue', anchorText: 'Blue' }
])}`
);
}FINALLY, YAY!!! We built our top header bar web component.