Mark Erikson, web dev professor/historian, OSS Maintainer & engineer at Replay, talks about the shift from CommonJS to ESM in JavaScript modules. They discuss the history of module patterns, challenges faced during the transition, modernizing packages to ESM and TypeScript compatibility, and the need for standards in package publishing.
The challenges faced in adopting ESM in the node ecosystem include issues with tooling, compatibility with bundlers, TypeScript integration, and module resolution confusion.
TypeScript adds complexity to the ESM ecosystem due to its types-only overlay, leading to mismatches between runtime code and type definitions, the need to rewrite import statements in JavaScript files, and publishing multiple copies of TypeScript types with different extensions.
The challenges encountered when working with React Server Components include lack of documentation and guidelines, confusion among app developers, and compatibility issues between React, Redux, and Apollo Client.
The current ecosystem's outdated coding practices hold back the web, resulting in larger file sizes, increased complexity, and slower loading times, necessitating community-driven resources, standards, and tools for easier publishing and integration of modern JavaScript dependencies.
Shipping modern JavaScript leads to smaller file sizes, faster loading times, and a more efficient web, emphasizing the need for standards and tooling to improve performance and sustainability.
Deep dives
Challenges of Modernizing Node Packages to Use ESM
The podcast episode discusses the challenges faced by Mark Erickson, a maintainer, in modernizing his node packages to use ECMAScript Modules (ESM). Mark explains that JavaScript initially lacked a built-in way to define packages, which led to the invention of different module formats like AMD and CommonJS. With the introduction of ES modules in the ES2015 spec, the ecosystem started transitioning towards them, but it hasn't been a smooth process. Mark highlights the issues related to tooling, compatibility with bundlers, TypeScript integration, and the confusion surrounding module resolution. He also mentions pain points experienced by app developers, such as compatibility issues when upgrading dependencies and the need to revert to previous versions. The summary captures the overall discussion of the challenges faced in adopting ESM in the node ecosystem.
The Complexity of TypeScript in the ESM Ecosystem
The podcast delves into the complexity introduced by TypeScript in the ecosystem of ECMAScript Modules (ESM). Mark describes how TypeScript, being a types-only overlay, adds an additional layer of complexity when dealing with module formats and interoperability. He explains that TypeScript brings its own configuration options, such as module resolution, which can lead to mismatches between the runtime code and type definitions. Further challenges arise from the need to rewrite import statements for JavaScript files, as TypeScript does not modify source code. Mark also highlights the necessity to publish multiple copies of TypeScript types using different extensions to match the respective JS files. This summary provides an overview of the discussion on the impact of TypeScript on the ESM ecosystem.
Maintainer Challenges with React Server Components
The podcast episode touches upon the challenges faced by maintainers when working with React Server Components. Mark shares his experiences and interactions with the React community when trying to integrate Redux with server components. He highlights the lack of documentation and guideline availability, resulting in confusion among app developers. The conversation includes examples of issues faced by library maintainers due to the introduction of server components, and the discussions around resolving compatibility problems between React, Redux, and Apollo Client. The summary covers the challenges faced by maintainers in incorporating server components into existing libraries and emphasizes the need for better documentation and communication in the React ecosystem.
The challenges of publishing modern JavaScript dependencies
The podcast episode discusses the difficulties and challenges faced when publishing modern JavaScript dependencies. The speaker emphasizes that the current ecosystem is holding back the web because third-party JavaScript libraries are still using outdated coding practices from 2014. This leads to larger file sizes, increased complexity with transpilation, and slower loading times. The speaker shares their own experiences as a library maintainer and the struggles encountered while trying to adopt modern JavaScript standards, package exports, and ES module compatibility. The episode highlights the need for community-driven resources, standards, and tools to simplify the process of publishing and integrating modern JavaScript dependencies.
The impact and benefits of shipping modern JavaScript
The podcast episode explores the benefits and impact of shipping modern JavaScript on web development, user experience, and the environment. Shipping modern JavaScript allows for smaller file sizes and faster loading times, benefiting both users and developers. By avoiding transpilation, modern syntax such as optional chaining can be directly shipped, reducing the overhead of transpiled code. This leads to a more efficient and optimized web, minimizing resource consumption and internet waste. The speaker highlights the need for standards and tooling that make it easier for developers to ship modern JavaScript and improve the overall performance and sustainability of the web.
Mark Erikson (web dev professor/historian, OSS Maintainer & engineer at Replay) joins us to talk about the shift from CommonJS to ESM. We discuss the history of module patterns in JS and the grueling effort to push the world’s biggest developer ecosystem forward. Get ready to go to school kids, this one’s deep!
Changelog++ members get a bonus 5 minutes at the end of this episode and zero ads. Join today!
Sponsors:
Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com
Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs.
Typesense – Lightning fast, globally distributed Search-as-a-Service that runs in memory. You literally can’t get any faster!
