momentjs vs date-fns

Date handling libraries

To handle Date objects in a project with Google Calendar API easily, I used open source library. Among them, I used momentjs and date-fns. And post here what I feel that after use those two libraries and performance that compare each other.

momentjs

I think it is most popular Date library. Easy to use, support various functions to operation of Date. It is defined object type and use like new Date(). For your convenience, it support unordered function parameter although it was deprecated now.

momentjs was made to handle Date/Time and the set of these concept. For this reason, It can be a OOP library.

date-fns

date-fns is set of ‘functions’ to handle native Date object unlike momentjs. date-fns has so many functions as much as momentjs. But it can import functions only what you need unlike momentjs.

Difference

These two libraries has some difference.

Concept

momentjs is OOP library. Create a momentjs instance and run functions from it.

But date-fns is set of functions. Use native Date object and perform operation on Date object.

One of the biggest difference is immuatable and mutable. date-fns is immutable but momentjs is mutable. date-fns return new Date instance from function which was run. But momentjs change its own state. The difference of immutable and mutable is too huge to explain here. So I do not post it this article.

Size

momentjs has his all functions as member function. So you have to import all functions even you need only ‘Add’ function. Once you create a instance, all function are included.

date-fns is divided by function level. So you can import and use only what you need.

Becuase of this reason, in result of build on web application, generally momentjs has more size than date-fns.(no tree shaking)

Compare momentjs and date-fns library size in result of build web application that show daily/monthly schedule from Google Calendar API.

Performance

From the conclusion, to consider performance, I recommend to use date-fn. In momentjs, once create a instance, it start to initialize member variables. This step has lots of validation check than you think. After this step finally create native Date instance and save it. In other word, it consume more time to create momentjs instance than native Date its.

time of 'new Moment()' = time of 'new Date()' + α

Other example, in ‘Add’ operation, momentjs has pre-process before real add operation. At first unordered parameter options still works although it was deprecated. Because of this, parameter validation check are run. And Add operations for day, month, year etc are handled by ‘Add’ function. So code that which unit have to determined are run. For these reason, lots of code that unrelated with what you want are run compare with date-fns.

date-fns/date-fns

In fact, add function in date-fns is very clearly and simple as separated by day, month, year etc. addDays function has just a few lines.

It can find more clear difference in application that show daily and monthly schedule from Google Calendar API. In comparison of date-fns and momentjs, it has about 8~10 times difference in performance.

The time of Goole Calendar API daily parsing result(ms)

The time of Goole Calendar API monthly parsing result(ms)

Conclusion

OOP momentjs and function date-fns has same purpose to handle Date object but has many differences such as Immutable and mutable, OOP and function and so on. choose library as your taste. but in performance, date-fns win. In size of result, if you are use tree shaking properly, momentjs might be reduce its size. And locale module can remove if you are not use it. Then I think momentjs can be reduced as much as date-fns. File size can be one of the factor of performance. because it affect transfer. Anyway date-fns performance is better than momentjs.(There are some exception, but totally date-fns is overall) So if you consider performance, use date-fns.