Bake A Javascript Library using Vanilla JS (Part 1)

3 min readJul 31, 2022

Hey, folks! A short hiatus and I’m back, with a brand new part series article!

What is a Javascript Library?

JavaScript libraries are collections of prewritten code snippets that can be used and reused to perform common JavaScript functions.

Being a front-end developer you might have used a multitude of Javascript Libraries via CDN ( Content Delivery Network ) or NPM (Node Package Manager). Wonder how they work and would like to build one yourself?
This article aims to keep it short and sweet! to help you get started to build your very own shippable Javascript Library!

It would be an mini-article series, where we would learn from scratch to -

Create a simple utility library.
Making the library modular and tree-shakeable with ES modules.
Converting it to a chainable, immutable library with OOP.
Providing developers with hooks to customize how it works.
Bundling a library for distribution and performance.
BONUS ( This one is really special, stay tuned!)

Project Setup.
Creating our base files/workflow.

Project Setup

We need an HTTP server to run at a particular port of your workstation, where we could see our results on any file changes occurring during our journey.

Node-Static -

This npm package allows you to serve any HTML file statically over your network.

npm install -g node-static

This would install a package globally available in your system to be used via terminal.

Creating our base files/workflow

We would require an HTML file where we would import the individual Javascript scripts, which in turn would be served over the HTTP server.

In this tutorial, we would be building a date utility library.

mkdir <your-folder-name>
cd <your-folder-name>
touch index.html
touch index.js
touch time.js

Your project folder should look something like this.

. └── <your-folder-name>/
    ├── index.html
    ├── index.js
    └── time.js

Now use your favorite code editor and edit the index.html file.

/*index.html*/
<!DOCTYPE html>
  <html>
   <head>
    <title>JS Library</title>
   </head>
   <body>
    <p>Hogwarts Ahoy!</p>
    <script src="time.js"></script>
    <script src="index.js"></script>
   </body>
  </html>

Let’s edit the index.js file

/*index.js*/let christmas = new Date('December 25, 2022')
let day = getDay(christmas)
console.log(day)

and finally, the time.js

function getDay (date) {  let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 
  return days[date.getDay()];}

Once the above is done, open up your terminal and do the following —

cd <to-your-folder>
static -p 8000 // the port can be changed

Voila, open up your favorite browser, access localhost:8000 we should see the following.

You have now successfully created the base workflow, where we shall go ahead and build a Javascript Date Library 📆.

In Part 2, we shall deal with packaging it into a decent module structure using ES Modules ✨

****************************************************************
This post was inspired by — https://gomakethings.com/ , please do check out this wonderful blog based on pure Javascript.

I’m Saurav Tiru, Front End Engineer at building UI at Radius.

I would be posting articles related to Front End Engineering, Photography, and Video Editing every week!

Bake A Javascript Library using Vanilla JS (Part 1)

What is a Javascript Library?

Contents

Project Setup

Creating our base files/workflow

Written by Saurav Tiru