Bake A Javascript Library using Vanilla JS (Part 2)

Before you go ahead, this is a mini-series where we start from ground zero to a shippable Javascript Date Library 📅

View the previous article to be on the track! 😄

Let’s Go! 🚀

Ingredients matter for a perfect bake!

Previously —

We built our workflow to begin our project up and running on our local workstation!

Next, we learn to utilize the modern techniques of modularizing our current setup using ES Module.

Content

1. Understanding import/export from ES Module.
2. Exporting
3. Importing
4. Package.json

Understanding import/export from ES Module.

A magician never reveals his tricks.

What are ES Modules?

As of ES6 (ES2015), JavaScript supports a native module format called ES Modules, or ECMAScript Modules. This is modern way to do modules in JavaScript.

As you know we live in an era where there are 100’s libraries, left-right & center. But what makes one distinct from another? Modularity and ease of picking only the helper function required from the library!

There is another term that highly relates to the above description, which is Tree Shaking.

Tree shaking is a term commonly used within a JavaScript context to describe the removal of dead code. It relies on the import and export statements in ES2015 to detect if code modules are exported and imported for use between JavaScript files.

We might have 100(s) of methods in our library, but our end users only require certain methods for their projects cherry-picked from our library. So let's give them that 🎉.

Exporting

The ship is ready captain! Sail’s Ahoy!

In the previous article, we had created time.js, which looked something like this.

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

We shall add two more methods

• First, getMonth(date) , which takes the Javascript Date object as a parameter and returns the corresponding month.
• Second, addDays(date, n) , which takes the Javascript Date object as the first parameter and integer n , which adds the number of days nto the existing date object.

function getDay (date) {
 let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',       'Friday', 'Saturday'];
 
 return days[date.getDay()]
}
function getMonth (date) {
  let months = ['January', 'February', 'March', 'April', 'May',    'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  return months[date.getMonth()]
}
function addDays(date, n) {
  date.setDate(date.getDate() + n) //setDate is a inbuilt prototype function of JS Date.
}
export {
  getDay,
  getMonth,
  addDays,
}

In the end, we used something called export —
1. This allows us to export only the methods which are needed to be exposed publicly.
2. This lets us have control over the methods we want to keep private or not.

Importing

This would be my much-awaited Ps5.

Now that we have exposed or exported helper functions. Let’s import the methods onto our index.js file.

/*index.js*/
import {
 getDay,
 getMonth,
} from "./time.js"
let christmas = new Date('December 25, 2022')
let day = getDay(christmas)
let month = getMonth(christmas)
console.log(day, month)

As you can see we have imported getDay & getMonth from time.js but not addDays this way we don’t need to import everything but only the required methods on the particular file.

Oops, we hit a snag!

If you now refresh the browser, you might not see the console.log(day, month output.

But would see something like this —

Something’s missing?

This is because import and export does NOT work straight out of the box.
As you can remember we are running an HTTP server over using node-static, which is basically a node js runtime. But we need to tell our node js runtime to identify the usage of import/export statements. How do we do that?

Introducing package.json

What is package.json ?

The package. json file is the heart of any Node project. It records important metadata about a project which is required before publishing to NPM, and also defines functional attributes of a project that npm uses to install dependencies, run scripts, and identify the entry point to our package

Explaining the entire package.json would be out of the limited scope of our mini-series, but, the only key which you need to understand is the type key in package.json

To create a package.json —

npm init -y

Will simply generate an empty npm project without going through an interactive process.

Your folder would look like this

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

On viewing add the following —

{
 "type": "module",
 //...rest of the package.json
}

This will instruct our node js application to address the Javascript files in a module method, allowing the usage of import & export syntax.

Also, index.html where we have our script tags, we need to add attribute type="module" to our script tags.

<script type="module" src="time.js"></script>
<script type="module" src="index.js"></script>

Now, check your browser, everything should be working fine! 🌟

In Part 3, we shall explore more advanced topics on creating a robust and clean Javascript Date Library 📅 using OOPs & bringing concepts like immutability and chaining ⛓.

P.S: Part 3 would be published on August 3rd, 2022!

****************************************************************

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!