Does your application use dates in some way? I am pretty sure that there are almost no use cases that don’t use dates, and if they exist, they can be improved to a higher extent with dates as a pivot for history. So did ours at HolidayPirates GmbH, and we used in our frontend app to transform and manipulate them for our use cases. moment.js Though moment.js is heavy for FE apps and we might not use all the capabilities provided by moment.js. We had already achieved a major cutdown on the package size by removing the unnecessary locales. But still, it wasn’t slim enough. Challenges The major challenges to move away from moment.js were: : Because we have codebase which, in terms of users, is medium-to-semi-large in size. So the current use moment.js will also limit to migrate or move away from itself. → Magnitude of its Usage : As moment.js is used in so many places, and that’s why we need something with similar API to replace it. → API Solution If we look at ; we have suggested package as with as 2.76kB bundlephobia report of moment.js dayjs 96% smaller package size And the repository states that the it has following features → Familier moment.js API → Chain-able & Immutable → Localised i.e. i18n (internationalization) support So we started the migration and we realized we had to de the following every time we use the days: dayjs ; ;

dayjs.locale( ); import from 'dayjs' import 'dayjs/locale/de' 'de' This seems doable, though it was needed to be done for every instance of dayjs being created. We carried on, but the dayjs presented two different problems: → Initialization with a format was not possible → Locale assignment has to be done every time you import a module Initialization with a Format For that dayjs provides a plugin called `AdvancedFormat` which extends the capabilities of dayjs similar to moment.js AdvancedFormat ‘dayjs/plugin/advancedFormat’;

dayjs.extend(AdvancedFormat); import from Though we are again in the same circle where we have to import and attach the plugin every single time. The main reason for this to happen is that the node modules execute in a separate scope and expose the values that are only exported. And by nature, dayjs is very much immutable & tree shakable and its instance does not mutate the behavior of other instances. Getting dayjs ready for use every single time To solve this, we took the following approach: dayjs ; ; AdvancedFormat ‘dayjs/plugin/advancedFormat’;

dayjs.locale( );
dayjs.extend(AdvancedFormat); dayjs; import from 'dayjs' import 'dayjs/locale/de' import from 'de' export default Now save it as ; we made ourselves service which is already localized and patched for advanced format initialization. services/dayjs dayjs Now in the place of its usage, instead of doing dayjs ; import from 'dayjs' We do this: dayjs ; import from 'services/dayjs' Note that for above import to work, we have aliases added in our web pack configuration as follows: aliases: { services: 'src/javascript/services', }, Conclusion Moment.js is an awesome library and it helped a lot to make things easier to develop with the dates. Though it was the time to part the ways. What do you guys use for date object manipulation in JavaScript? Share your experience with us. Let me know what do you think about this article through comments 💬 or on Twitter at and @patel_pankaj_ @time2hack If you find this article helpful, please share it with others 🗣; subscribe to the mailing list for the new posts and see you the next time. Credits Icons made by from flaticon.com Flat Icons Photo by on Curtis MacNewton Unsplash Originally published at on November 13, 2019. https://time2hack.com

Chain

Twitter

Checkout Time to Hack

Too Long; Didn't Read

Get free API security automated scan in minutes

Optimize Your Front End Applications by Migrating From Moment to Dayjs

Too Long; Didn't Read

Company Mentioned

Coin Mentioned

@pankajpatel

RELATED STORIES