Building UI using JavaScript Classes

Introduction

Classes are fundamental to Object Oriented Programming.

In our applications, it is very common to use Classes for business objects, data transfer objects etc. and today we will see how we can use classes to build a User Interface for front-end projects.

Modern UI frameworks such as Angular, React etc. are already using classes for most of the UI components. However, we will not be using those frameworks but rather build one ourselves for practice purposes, which you can later extend and use for some small projects if you don’t wanna bring in a heavy duty front-end framework to your application.

Setting the scene

I am assuming that you are already familiar with ES6 way working with classes in JavaScript and how import and export works in general.

If you are new to these topics, I will suggest to first check the following posts, as we’ll be building on top of these learnings:

• Structure JavaScript Code using Classes
• Import Bootstrap and Font-Awesome using Parcel JS

These posts shall provide you enough background information to follow along.

For the initial setup, I’ve started with a plain JavaScript application and already installed following packages using npm:

        >>npm install parcel-bundler --save-dev
        >>npm install jquery   
        >>npm install bootstrap
        >>npm install @popperjs/core
        >>npm install --save @fortawesome/fontawesome-free

Then configured ParcelJS and updated package.json as follows:

If you download the git repository, you’ll have all this setup for you.

Now ParcelJS is optional here and you can use any other JavaScript bundler.

and here is how the initial setup looks:

index.js file is the entry-point for JavaScript code:

we can run the app in development mode using npm run dev command:

and here is the browser output:

Ok, with this setup part done, lets focus on creating classes for UI objects, next.

Creating UI Classes

We can structure User Interface as objects e.g. a page, navigation-bar, button, table etc.

Some of these objects share properties and methods and we can create a Base class for this purpose.

Here is a BaseElement class (other UI object classes will extend it)

BaseElement Class

Base element class is very simple. We typically do not initialize such classes in our code directly. These are used by other classes.

As you can see that, in this class, we have an element property which is initialized to null in the constructor. so this property will hold the element itself e.g. a button, a table, a nav-bar etc.

BaseElement class represent a contract that getElementString() function shall be implemented (override) by the child classes. That’s why we are throwing exception in this method here to force the developers to override it in the actual child class.

createElement() method just wraps the HTML in a JQuery object and appendToElement() takes an element as a parameter and append the wrapped JQuery object to it.

As mentioned before, we typically do not initialize base classes in our code. So, lets create a simple HTML element button class which will extend the BaseElement.

Create a Button Class

Lets create a simple class which will represent a button on the UI.

Here is the code for this class:

Button class extends the BaseElement and constructor requires a title (which will be the text on button) and you can see that getElementString() is building up an HTML string utilizing bootstrap styling.

Before we go any further, lets do a simple test next by putting this button to our application.

Add button dynamically

As you can see that in index.js (javascript file referenced in index.html, which is the entry-point for our application) we imported some libraries and then our UI button class.

we created a button object b and append it to body.

Here is the browser output:

And we can see that the button is dynamically added to UI. It is not doing anything useful just yet, but its a start.

Lets build something a little bit more complex e.g. a Navbar.

Create A NavBar

Here is the code for the nav-bar class. As you can see that it follows the same structure of button class we created earlier:

We have a links array for individual link items in nav-bar.

For the getElementString() HTML part of navigation bar, we can get the HTML markup from bootstrap website:

as you can see that in getElement() method, we are building the links string using string-interpolation by looping over links array and then embed it in bootstrap nav-bar HTML.

Add nav-bar dynamically

Here is the code in index.js file which utilizes the nav-bar class:

Browser output:

Summary

In this post, we started putting together pieces to build using JavaScript classes.

We can model UI components as objects, just like we model business objects, and this way the resulting code is clean, easier to manage, test and extend.

Now I am using Bootstrap here, but you can easily replace it with other UI framework e.g. Material Design Lite etc.

The examples we saw very basic, but its just a start and you can now experiment with other HTML elements and try creating classes for those in similar way e.g. create a class for dropdown list or image element etc.

I will cover more on this topic in later posts with few more examples and we’ll build on top of what we have covered in this post.

You can download the source code from this git repository.

Let me know if you have some questions or comments. Till next Time.