DemocracyLab / DemocracyLab/CivicTechExchange

Replace moment.js with date-fns

Open
#973 7 comments 0 reactions 1 assignee Claimed by @caveman0612 View on GitHub
Front End javascript
Dominant language
JavaScript
Stars
105
Forks
71
PR merge metrics
No merged PRs in 30d

Description

Short version: load date-fns directly, replace functions which use moment.js with date-fns, remove moment from our package.json, double check that all existing datetime functions still work as expected.

Longer version:

Moment.js is quite large (the two biggest pieces of our bundle, per [this analysis of package.json](https://bundlephobia.com/scan-results?packages=@tryghost/content-api@1.11.0,bluebird@3.5.2,django-react-csrftoken@1.0.4,flow-bin@0.75.0,flux@4.0.0,form-serialize@0.7.2,immutable@3.8.2,lodash@4.17.21,moment@2.22.2,moment-timezone@0.5.21,path@0.12.7,react@16.11.0,react-bootstrap@1.0.1,react-datepicker@2.14.1,react-dom@16.11.0,react-file-drop@0.2.8,react-google-recaptcha@1.1.0,react-helmet@5.2.0,react-image-crop@8.3.0,react-markdown@7.0.1,react-moment@0.7.9,react-select@2.4.2,react-sortablejs@6.0.0,repeating@2.0.0,sortablejs@1.13.0,validator@13.7.0&sortMode=size), are moment) and the maintainers themselves [suggest moving to an alternative](https://momentjs.com/docs/#/-project-status/).

We use moment in [quite a few places](https://github.com/search?q=repo%3ADemocracyLab%2FCivicTechExchange%20moment&type=code) and any replacement must be able to handle all of them. The reason I specify date-fns is it's already a dependency of [react-datepicker](https://www.npmjs.com/package/react-datepicker), which we also use and want to keep at this time. Unless there's a critical reason not to use it, loading one datetime library is better than two.

To sum up, in order for this issue to be resolved,
- add date-fns to our package.json (react-datepicker uses 2.30.0 - let's load this only once, so use the same version)
- update all our datetime functions which use moment to use date-fns or vanilla js
- remove moment, moment-timezone, and react-moment from package.json
- enjoy new, smaller bundle size

## resources
These may help with the process:
- https://github.com/you-dont-need/You-Dont-Need-Momentjs
- https://dockyard.com/blog/2020/02/14/you-probably-don-t-need-moment-js-anymore
- https://date-fns.org/

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.