Success Stories That Define Innovation: Ad Revenue Surge, DevTools Evolution, and Front-End Efficiency!

📰 Breaking News: Success Stories in Tech Optimization

In today's edition, we bring you three compelling case studies from the world of technology optimization. First, discover how Yahoo! JAPAN News saw a remarkable 9% increase in ad revenue by improving its BFCache performance. Then, explore the 13-month journey of Google Chrome DevTools as they migrated to TypeScript, reshaping the future of development tools. Finally, join the quest for front-end efficiency in Jira, where duplicated dependencies were minimized to enhance performance. These stories of innovation and transformation highlight the ever-evolving tech landscape's pursuit of excellence. Stay informed and inspired!

Let’s Begin …

Case Study 1: Unlocking BFCache Benefits at Yahoo! JAPAN News

• Yahoo! JAPAN News, a prominent news platform in Japan, sought to improve its BFCache hit rate and achieved remarkable results.

• An A/B test revealed a 9% increase in ads revenue for pages utilizing BFCache.

Removing BFCache Blockers

• Yahoo! JAPAN News encountered blockers such as unload handlers and the "no-store" directive on Cache-control headers.

• Solutions:

  • Transitioning from "unload" to "pagehide" event due to unload event unreliability.

  • Chrome's "permission-policy: unload" introduced in Chrome 115 for reliable handler removal.

  • Transitioning from "no-store" to "no-cache" in Cache-control headers, with future plans for Chrome to cache BFCache even with "no-store."

Measuring BFCache Impact

• Yahoo! JAPAN News conducted a 2-week A/B test, comparing pages with BFCache fixes to those without.

• Significant improvements were observed:

  • BFCache hit rate increased by 54.03 points on mobile and 47.28 points on desktop.

  • Page views saw a 2.26% increase on mobile and 0.65% on desktop.

  • Ads revenue surged by 9.0% on mobile and 0.6% on desktop.

Enhancing User Experience with BFCache

• BFCache enabled instant page loading during navigation, eliminating waiting times.

• Improved scroll position restoration during backward navigation ensured a seamless experience.

• Users could easily transition between articles without interruptions.

Benefits of BFCache Implementation

• Increased pageviews due to enhanced user experience.

• A significant 9% boost in mobile ad revenue compared to the non-BFCache group.

Conclusion

• BFCache not only makes websites instant but also reduces friction in the overall user experience, leading to increased user engagement and revenue.

• Yahoo! JAPAN News continues to optimize its website for better user experiences.

Case Study 2: DevTools architecture refresh: migrating DevTools to TypeScript

The case study titled "DevTools architecture refresh: migrating DevTools to TypeScript" discusses a 13-month journey of transitioning the Google Chrome DevTools project from using the Closure Compiler type checker to TypeScript. Here is a summary of the key points:

Introduction:

• DevTools adopted the Closure Compiler for type checking in 2013 to ensure type correctness and confidence in code changes.

• Over time, alternative type checkers like TypeScript gained popularity, and DevTools noticed regressions that should have been caught by a type checker.

• The decision was made to evaluate whether to continue using Closure Compiler or migrate to a new type checker.

Evaluating Type Checkers:

• TypeScript was evaluated as it had become an officially supported language at Google and showed promise in catching type issues that Closure Compiler missed.

• The migration to JavaScript modules had already improved Closure Compiler's effectiveness, but TypeScript's type inference was found to be even more accurate.

Choosing TypeScript:

• TypeScript was chosen over improving Closure Compiler due to its improved type correctness, support from TypeScript teams at Google, and features like interfaces.

• The migration to TypeScript was estimated to take at least a year.

Performing the Migration:

• The challenge was how to migrate 150,000 lines of code incrementally.

• The approach involved adding @ts-nocheck annotations to files and then gradually removing them and fixing TypeScript errors.

• Although time-consuming, this method allowed for a thorough review of all code and ensured type correctness.

Analyzing the Aftermath:

• Progress was steady but slower than anticipated, so more engineers joined the effort to speed up the migration.

• The migration was completed in November 2020, 13 months after starting, which was earlier than the initial estimate.

Mitigating TypeScript Compiler Performance:

• The migration revealed performance issues with the TypeScript compiler.

• Efforts were made to report the issue to the TypeScript team, but the behavior was considered intentional.

• The project is actively seeking solutions to mitigate the performance impact, especially for non-Google contributors.

Current State of TypeScript in DevTools:

• Closure Compiler type checker has been removed, and DevTools relies solely on TypeScript.

• TypeScript-specific features like interfaces and generics are now used.

• Confidence in TypeScript's ability to catch type errors and regressions has increased, justifying the migration effort.

Overall, this case study outlines the decision-making process, challenges, and benefits of migrating a large-scale project like Chrome DevTools from one type checker to TypeScript.

Case Study 3: Performance in Jira front-end: solving bundle duplicates with Webpack and yarn

In this case study authored by Alexey Shpakov on December 22, 2020, the focus is on optimizing front-end performance in Jira by addressing the issue of duplicated dependencies in JavaScript bundles using Webpack and Yarn. Here's a summarized overview of the case study:

Setting the Scene:

• The study begins by defining terminology related to dependencies, specifically direct dependencies, transitive dependencies, and duplicated dependencies.

The Problem with Duplicated Dependencies:

• It highlights that in large-scale projects like Jira, duplicated dependencies are inevitable due to the extensive use of npm packages.

• In Jira, there are approximately 250 direct production dependencies, resulting in over 1,000 unique libraries, or 2,845 if duplicates are counted.

• The goal is to minimize duplicate dependencies to reduce the final JavaScript bundle size, emphasizing the importance of deduplication.

Deduplication in Yarn:

• The case study illustrates how Yarn handles deduplication, especially in cases where compatible versions of dependencies can be deduplicated.

• It provides an example of how Yarn's deduplication works within the project's yarn.lock file.

Deduplication in Yarn - Non-Compatible Version:

• It discusses scenarios where non-semver deduplicatable transitive dependencies create challenges.

• An example is given where two different versions of a dependency (button) are unavoidable due to non-compatibility.

• The case study suggests that in such cases, upgrading dependencies to versions with compatible transitive dependencies is a common solution.

Duplicated Dependencies Installation:

• The study explains how dependencies are installed by npm, where npm hoists as much as possible to the root node_modules.

• It emphasizes that even if dependencies are deduped at the yarn.lock level, each package with the same dependency version will install its own copy.

Duplicated Dependencies and Webpack:

• It delves into how Webpack builds a graph of files and their dependencies.

• The issue arises when Webpack treats duplicated dependencies as unique files and bundles them together, potentially leading to multiple copies of the same dependency.

Deduplication in Webpack - First Attempt:

• The case study explores the use of Webpack plugins, specifically the NormalModuleReplacementPlugin, to replace one file with another based on a regular expression.

• It describes the process of detecting and replacing duplicated dependencies.

Deduplication in Webpack - The Non-Determinism Problem:

• It highlights an issue where Webpack's behavior became non-deterministic after implementing deduplication.

• The study emphasizes the need to debug and find a solution to maintain deterministic builds.

Findings and Other Curiosities:

• Various findings related to the non-deterministic behavior and the limitations of NormalModuleReplacementPlugin are discussed.

• The case study mentions that a plugin was extracted from Jira, published, and made available on npm.

Bringing it Together:

• The final solution to the non-deterministic behavior is described, which involves replacing request with the resolved absolute path from both modules.

• The study concludes by stating that the plugin, called "WebpackDeduplicationPlugin," can be used to reduce bundle sizes and improve performance.

Final Thoughts:

• The case study acknowledges that these efforts are part of Jira's ongoing journey to improve front-end performance.

• It highlights the success of these changes, including a 10% reduction in bundle size and a 300ms Time-To-Interactive (TTI) improvement in the Jira Issue View.

In summary, this case study outlines the challenges of duplicated dependencies in front-end development, the use of Webpack and Yarn for deduplication, and the development of a Webpack plugin to address non-deterministic behavior, ultimately leading to performance improvements in Jira.

💌 Feedback Corner

Help us refine 'TypeScript Daily' to be your go-to TypeScript guide, with a special weekly roundup. Your feedback drives our content. Share your insights and suggestions with us! Please hit reply to this email and share your thoughts.

🏁 Wrapping It Up

Another day, another dive into the world of TypeScript. As we cross the finish line today, remember to keep exploring, keep learning, and most importantly, keep coding. If you found value in today's insights, please consider sharing this newsletter with friends or on social media — every share helps us reach more TypeScript enthusiasts like you! Stay tuned for tomorrow's journey.