This content originally appeared on Bits and Pieces - Medium and was authored by Chameera Dulanga
Comparing popular JavaScript date libraries.
MomentJS is one of the most used JavaScript date libraries among software engineers. However, over the past few years, other alternatives challenged its existence.
Out of these, Date-fns is one of the leading competitors to take over from MomentJS.
So, in this article, I will discuss the features of Date-fns, where it shines, and its limitations to give you a better understanding.
Understand Date-fns and Its Usage
Handling dates in JavaScript is not an easy task. Even with the MomentJS, we have to create a Moment object and use methods on that object.
Date-fns simplifies the JavaScript data manipulations by providing a variety of functions.
It provides more than 200 different time-related functions, and unlike MomentJS, it allows you to import a selected set of functions as needed.
For example, if you need to print the day of the week, you only need to import the format function and pass the date with the required JavaScript date format parameters.
// Install date-fns library
npm i date-fns
// Usage
import { format } from 'date-fns';
format(new Date(), "'Today is a' iiii");Do you know that Date-fns has over 10,750K weekly NPM downloads and 26.5K GitHub stars?
The below graph shows the npm trends comparison between these MomentJS and Date-fns. We can clearly see an upward trend in Date-fns while MomentJS seems to lose its traction.
But, that’s not all; Date-fns has some amazing features to attract developers.
So, let’s discuss a bit more about these features to see how it differs from MomentJS.
1. Function per file
Date-fns library consists of a variety of functions, and it allows you to import these functions individually as needed.
For example, if you need to get the distance between 2 days, you only need to import formatDistance and subDays functions.
import { formatDistance, subDays } from ‘date-fns’ formatDistance(subDays(new Date(), 3), new Date())However, if you use MomentJS, you will have to import all at once since MomentJS has its all functions as a member function.
This behavior of Date-fns not only makes your imports easy but also reduces the applications package size drastically.
2. Date-fns are Immutable
Being mutable is another difficulty we face when we work with MomentJS. For example, sometimes date values can change unexpectedly since MomentJS date objects change their own states.
Date-fns resolves this issue by providing a new JavaScript date object instance from each function we run, and this could definitely help you avoid unwanted modifications.
3. Supports more than 50 locales
Date-fns is the perfect solution to handle date and time-related operations if you target an international audience.
It supports more than 50 locales, and you can easily import the languages you need and use them as follows:
import { formatDistance } from ‘date-fns’
import { es }from 'date-fns/locale'const result = formatDistance(
new Date(2020, 8, 1),
new Date(2021, 8, 1),
{locale: es}
)
In addition to that, they invite developers to expand localization support. If you are interested, you can follow the guide provided by the Date-fns team to add new language support for the library.
4. It is Fast and Compact
If we consider performance, MomentJS has significant performance issues due to its complex API and packages size.
MomentJS package size is around 232 kB, while Date-fns package size is 300 Bytes.
Date-fns vs MomentJS Performance
However, I needed to see the performance difference myself, and I found this amazing benchmark comparison project by José Mussa on GitHub. So, I made few modifications and ran 3 tests to see the results.
As you can see, Date-fns are well ahead in all 3 operations in terms of operations performed per second and size and the simple API is the main reason behind this.
5. Other Features
As you can see, Date-fns are well ahead in all 3 operations in terms of operations performed per second and size, and the simple API is the main reason behind this.
- Supports TypeScript and Flow.
- Always returns dates in the same time zone.
- Functional programming submodule makes the code clean and safe.
- Respects Timezones & DST.
- Stick to ECMAScript behavior in edge cases.
- Provides good documentation.
Build & share independent JS components with Bit
Bit is an extensible tool that lets you create truly modular applications with independently authored, versioned, and maintained components.
Use it to build modular apps & design systems, author and deliver micro frontends and microservices, or simply share components between applications.
Bit: The platform for the modular web
Conclusion
In this article, I discussed why Date-fns had become the go-to solution in JavaScript instead of MomentJS.
MomentJS has indeed been there for a long period, and it has great features. But, it hasn’t been able to keep up with the modern-day requirements.
After trying out both MomentJS and Date-fns, I suggest using Date-fns over MomentJS for future projects since it provides all the features of MomentJS while maintaining the speed, size, and features.
So, I invite you to try out Date-fns in your next project and share your thought with others in the comment section.
Thank you for Reading !!!
Learn More
- Will Bit Replace npm?
- Secret Behind JavaScript Performance: V8 & Hidden Classes
- Simplified Peer to Peer Communication with PeerJS
Date-fns vs MomentJS: Choosing the Right Date Utility Library was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Chameera Dulanga
Chameera Dulanga | Sciencx (2021-08-10T16:46:29+00:00) Date-fns vs MomentJS: Choosing the Right Date Utility Library. Retrieved from https://www.scien.cx/2021/08/10/date-fns-vs-momentjs-choosing-the-right-date-utility-library/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.