Exploring Javascript libraries

Victor Kurauchi — Mon, 04 Feb 2019 05:31:21 +0000

This blog post will explore JavaScript, focusing in how we can create a JavaScript library that works either in client-side and server-side, what many people call today as Isomorphic Javascript.

We’ll go through a few important parts in this article, which are:

Build the library
Create the build file with Webpack
Use the library from a server side application
Use the library from a client side application

You can check this repo for guidance during our next steps.

Build the library

So, what’s a library ?

In small words, it’s safe to say that a library is a set of code responsible for doing one thing, and doing it with excellence. This way you can reuse your library whenever and wherever you need to work with this specific situation.

So, why use a library ?

Think about making HTTP requests, we don’t want to add more complex code in every project in which we need to make HTTP calls, so we could choose one from many existent HTTP libraries. In Javascript land we have axios and node-fetch that are quite popular.

So instead of making our own functions every time to make HTTP calls in our projects, we just require the library and save some time and effort for what we really need to do.

What are we going to create ?

A library that can fetch weather by city, showing the next 5 days' predictions (consuming a Public API https://www.metaweather.com/api/). We definitely can have a more complex library to handle the infos as we need. For the sake of simplicity, now we're doing only the fetch and showing predictions.

Let’s start our library. First things first:

mkdir weather && cd weather
npm init -y

Adding axios dependency
npm i axios

Adding our code to grab weather information from the public API

As we saw before, we can benefit from libraries to focus on what we need to build. In this case we are using axios to make our HTTP calls and focus only on Weather information that is returned to us and handle this response.

For now our library will only return the sources where the predictions came from and the weather data grouped by dates.

Now if you create a test file you can see our library in action.

You now can run from your terminal node weather-consumer.js and you'll see our library doing its job :)

Quite simple, isn’t ?

So now we don’t need to add repeated code in our many different projects every time we need to handle weather. We can only require our new library and do the job with few lines of javascript code.

Create the build file with Webpack

Now we want to use our library from another project. And we're going in parts, so first we'll make it work for server-side applications and then for client-side apps. And for this to happen Webpack can be a good friend!

At its core, webpack is a static module bundler for modern JavaScript applications

There's a lot more about what Webpack can offer, but for now I’ll assume we know the basics about what Webpack is and what Webpack can do for us. (But please feel free to check the docs and intro at https://webpack.js.org/concepts/.)

Installing and configuring Webpack

npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev babel-loader @babel/core @babel/preset-env
npm install --save @babel/polyfill

Babel and polyfills

We are using babel and polyfills to be able to build our library using ES6 syntax and use the awesome features that come with it. So Babel will take care of transpiling our fresh code to ES5 syntax, making it to work in older browsers or environments.

Babel can definitely get more complex depending on what is your use and the result you want to achieve, but for our purposes those packages will be enough.

We need to add our npm scripts to run on dev and production environment:

Also we need to add webpack.config.js, so when we run npm run build webpack will read the config from it to build our final script.

Note that for now we're not focussing on optimising our build file, but it's good to have in mind that it should be optimised and we can do that.

You can now run npm run build and will see that we have a dist/weather.js

Please check the file here.

What's happening with our build script is that we call the webpack cli and then the cli goes through our configuration file webpack.config.js, read the config we have set before and create the bundle for us.

Our webpack.config.js is using babel-loader to transpile our code to ES5, this way our bundle file will contain JavaScript code that is compatible with current and older browsers or environments.

Also, on line 5 note that we have target: node, which means:

Because JavaScript can be written for both server and browser, webpack offers multiple deployment targets that you can set in your webpack configuration.

One important point to pay attention: We need to add require('@babel/polyfill'); as the first line of our library code, to prevent regeneratorErrors when using our built file. And make sure you already have run npm i --save @babel/polyfill

So let's check that in action…

Use the library from a server side application

We're going to use fastify, a small nodejs framework to create this example.

Our test case
Our server side application will use the weather library, let's say this application handles a catalog of places to travel.

We want to show a list of places, then we can get the place detail and return the weather conditions for the next days for that place. For this scenario we're going to create 2 endpoints in our server side application.

endpoint to list our travel destinations
endpoint to retrieve details from a destination

So let's get started.

cd .
mkdir server-weather-app && cd server-weather-app
npm init -y
npm install fastify

vim server.js

Now our base app is created and we need to use a feature from npm called npm link that will make it easier to work with our package locally.

cd ..
cd weather
npm link

cd ..
cd server-weather-app
npm link weather

The code to handle our server will be like this:

You can see it in action with:

node server
go to http://localhost:3000/destinations
go to http://localhost:3000/destinations/sydney

By accessing those 2 endpoints you can check the work we did until here. The first one lists some destinations from a static json file (destinations.json).

destinations.json

[
  {
    "id": 1,
    "name": "sydney",
    "price": 700
  },
  {
    "id": 2,
    "name": "london",
    "price": 600
  },
  {
    "id": 3,
    "name": "paris",
    "price": 800
  }
]

The last one will return the destination you choose with the weather information about it. Something like that:

So I think that's it for our server side part! Hopefully all the way until here will be useful for you. Maybe for next libraries that you need to create, or next projects you need to refactor and think about using some library. Or just to have some reference about it.

Originally posted on Medium.
*The blog post on Medium contemplates the second part as well, which is using the library from a client-side application. Maybe here it would be good to have the second part in a different post.

DEV Community: Victor Kurauchi

Exploring Javascript libraries

Build the library

Create the build file with Webpack

Use the library from a server side application