TypeScript Duration Formatting: Utilizing Built-In Features

Hey guys! Today, let's dive into how we can make our lives easier with TypeScript's built-in duration formatting. This is a super neat feature that can help us clean up our code and make it more maintainable. We're going to explore why this is important, how it works, and what steps we need to take to implement it. So, buckle up and let's get started!

The Power of Intl.DurationFormat

When it comes to formatting time durations in JavaScript, the standard Intl.DurationFormat function is a game-changer. This function provides a clean and efficient way to format a time duration according to the user's local language. Think about it – no more manual string manipulations or complex calculations to display durations in a human-readable format. This is especially crucial in applications that cater to a global audience, where different regions have different time formatting conventions.

The Intl.DurationFormat API is part of the Internationalization API, which is designed to handle various localization needs, such as date, time, number, and currency formatting. By leveraging this API, we can ensure that our applications provide a consistent and user-friendly experience across different locales. For instance, displaying a duration like “1 hour and 30 minutes” can be easily achieved using this API, and it will automatically adapt to the appropriate format based on the user's locale.

However, there's a catch! TypeScript, despite being a powerful superset of JavaScript, hasn't fully implemented this feature yet. There's an open pull request on the TypeScript GitHub repository (https://github.com/microsoft/TypeScript/pull/60646) that aims to address this, but until it's merged, we need to find workarounds. This is where understanding the current limitations and future possibilities becomes essential for us as developers.

Our Current Workaround

In the meantime, we've had to roll up our sleeves and create our own formatting function. If you peek into the client/packages/host/src/components/Sync/SyncModal.tsx file in our codebase (specifically line 172, available here: https://github.com/msupply-foundation/open-msupply/pull/9506/files/b4a648a01b533e0c8ec75d28d96a56417f2ce35a#diff-731875af95dcd78e1914fef02be2fc9b542bb89573a9b28242349539b7bcf521), you'll find our custom solution. It's not the end of the world, but it's definitely something we want to replace once TypeScript catches up.

Our current workaround, while functional, comes with its own set of challenges. It requires us to maintain the code, handle different edge cases, and ensure it aligns with various locale-specific formatting rules. This means more testing, more debugging, and potentially more issues down the line. By switching to the built-in Intl.DurationFormat, we can offload these responsibilities to the browser's implementation, which is typically more robust and optimized.

Moreover, relying on a custom solution can lead to inconsistencies across our application. Different developers might implement formatting logic in slightly different ways, resulting in a fragmented user experience. By adopting a standardized approach like Intl.DurationFormat, we can ensure that durations are displayed consistently throughout our application, regardless of the context or component.

Why Bother Switching?

Okay, so why should we even bother switching to the built-in function when TypeScript finally implements it? There are several compelling reasons:

• Maintainability: Using a standard, built-in function means less code for us to maintain. Less code equals fewer bugs and easier updates. This is a huge win in the long run.
• Consistency: The built-in function ensures consistent formatting across the application. No more discrepancies or weird edge cases to worry about.
• Performance: Built-in functions are often highly optimized by browser vendors. This means better performance compared to our custom solution.
• Future-Proofing: Adopting standard features sets a good pattern for future development. It makes our codebase cleaner and more aligned with best practices.

Switching to the built-in Intl.DurationFormat offers numerous advantages. By leveraging the browser's native implementation, we can reduce our maintenance burden, improve consistency, enhance performance, and future-proof our codebase. This aligns with our goal of building a robust and scalable application that provides a seamless user experience across different locales. The effort required to switch is minimal compared to the long-term benefits we'll gain.

Are There Any Risks?

Honestly, there aren't any significant risks associated with this change. The built-in function is well-tested and widely used. The main challenge will be the actual switch itself, which is more of a straightforward replacement than a complex refactoring. We just need to ensure that we handle the user's locale correctly when passing it to the new formatting function.

When considering any code change, it's crucial to evaluate the potential risks and benefits. In this case, the risks are minimal. The Intl.DurationFormat API is a stable and well-supported feature in modern browsers. The primary risk would be a potential mismatch between the format produced by our custom function and the format produced by the built-in function. However, this can be mitigated through thorough testing and validation.

To minimize any potential disruptions, we can adopt a phased approach. First, we can introduce the built-in function alongside our custom function, using a feature flag to control which one is used. This allows us to test the new functionality in a controlled environment and gather feedback. Once we're confident that the built-in function is working correctly, we can remove the feature flag and deprecate our custom function.

Effort Required

We're estimating this task will take around 15 minutes. It's a relatively quick and easy win. The main steps involve:

1. Deleting our old formatting function.
2. Replacing it with the built-in Intl.DurationFormat.
3. Adding a mechanism to fetch the user's locale.
4. Passing the locale to the new formatting function.
5. Removing redundant translation keys.

The effort required to implement this change is minimal, especially considering the long-term benefits. The process involves replacing our custom formatting function with the built-in Intl.DurationFormat, which is a straightforward task. The most significant part of the work will be ensuring that we can fetch the user's locale and pass it correctly to the new formatting function. This might involve accessing the browser's locale settings or using a localization library.

Additionally, we'll need to clean up some redundant translation keys. Our custom formatting function likely relied on specific translation keys for different time units (e.g., “label.hours_one”, “label.hours_other”). With the built-in function, we can consolidate these keys and simplify our localization resources. This cleanup will further reduce our maintenance burden and make our codebase more efficient.

Agreed Solution: Let's Do This!

The agreed solution is simple: we'll delete the old formatting function, replace it with the built-in one, and make sure we're passing the user's locale. We might also need to clean up some redundant translation keys like label.hours_one, label.hours_other, label.minutes_one, and so on. It's a clean, efficient, and forward-thinking approach.

To recap, the agreed solution involves several key steps: removing the old formatting function, replacing it with the built-in Intl.DurationFormat, ensuring we can fetch and pass the user's locale, and cleaning up redundant translation keys. Each of these steps contributes to the overall goal of improving our codebase's maintainability, consistency, and performance. By following this solution, we can ensure that our application's time duration formatting is robust, efficient, and user-friendly.

In addition to the technical aspects of the solution, it's important to consider the impact on our users. By switching to the built-in formatting function, we're providing a more consistent and localized experience. This can enhance user satisfaction and make our application more accessible to a global audience. It's a small change that can have a significant positive impact on the overall user experience.

So, there you have it, folks! Utilizing TypeScript's built-in duration formatting is a no-brainer. It's cleaner, more maintainable, and sets a great precedent for future development. Let's get this done and make our codebase even better! This move not only simplifies our code but also aligns us with best practices in internationalization and localization. By embracing the Intl.DurationFormat API, we ensure that our application speaks the language of our users, providing a seamless and intuitive experience across different locales. It's a win-win for both developers and users!