Image for post
Image for post

The JavaScript libraries you should know as a JavaScript developer

In the past few years as a JavaScript developer, I’ve found some extremely useful libraries which I have to include in all my projects, no matter front end or back end.

Ramda

Install: yarn add ramda

When talking about utility libraries, some might think of lodash. But ramda is better, here is why:

  1. It is automatically curried
// When the number of parameters supplied is not sufficient,
// It returns a new function which waits for more parameters.
const add10 = R.add(10) // create a function to add 10 to inputconsole.log(add10(3)) // 13
console.log(add10(9)) // 19

2. It is immutable

const obj = {a: 1}const newObj = R.assoc('b', 2, obj)
console.log(newObj) // {a: 1, b: 2}
// ramda functions never mutate input parameters
console.log(obj) // {a: 1}

3. You can easily compose complex (yet readable) functions

// I need to pick all `thumbnails[0].large.url` property from an array of object
// if the `url` exist, replace `http://` by `https://`,
// else returns `null`
R.map(
R.pipe(
R.path(['thumbnails', 0, 'large', 'url']),
R.ifElse(
R.isNil,
R.always(null),
R.replace('http://', 'https://')
)
)
)(articles)

Axios

Install: yarn add axios

How would you make an HTTP request? By jQuery.ajax or window.fetch API? Axios is the best library to make HTTP requests! You can easily request by different HTTP methods (GET, POST, DELETE and others) and the code is very readable:

// fetch from `http://example.com/articles?limit=10`
axios.get('http://example.com/articles', {
params: {
limit: 10
}
})
// post data with custom header
axios.post('http://example.com/articles', {
title: 'A very good title',
content: 'Hello World!'
}, {
headers: {
Authorization: `Bearer ${accessToken}`
}
})

You can also create an API client with base url, timeout and interceptors:

const apiClient = axios.create({
baseURL: 'http://example.com/',
timeout: 5000
})
apiClient.interceptors.response.use(
response => response.data,
error => {
if (error.response && error.response.data) {
throw error.response.data
} else {
throw {
code: 'UNKNOWN_SERVER_ERROR',
message: 'Unknown server error.'
}
}
}
)

Dayjs

Install: yarn add dayjs

When you want to manipulate DateTime objects, you might think of moment or date-fns, but I have a better choice.

Sample code:

dayjs().startOf('month').add(1, 'day').format('YYYY-MM-DD')

It is small(~2kb), immutable, chainable, and supports i18n. need I say more?

Ms

Install: yarn add ms

When you need to set certain time intervals, e.g. execute some code block every 5 minutes, or set the lifetime of a token. Would you do something like:

setInterval(() => {
console.log('Code block executed.')
}, 300000) // 5 minutes

Now you can write:

setInterval(() => {
console.log('Code block executed.')
}, ms('5min'))

It’s more readable, right?

Conclusion

So here are my most-used JavaScript libraries. Try to use them in your projects, and tell me what you think about them!

A JavaScript/Node/Flutter developer who love technical stuffs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store