Screen-Shot-2019-06-12-at-2.28.56-PM Pika Project Launches New JavaScript CDN to Serve Modern, ESM Packages design tips News|javascript|Pika

Fred Schott, a software developer and former Google employee on the Polymer team, has launched a new CDN for his Pika project. Schott’s mission with Pika is “to make modern JavaScript more accessible by making it easier to find, publish, install, and use modern packages on npm.” Pika provides a searchable catalog of “module” packages available on npm – packages that use the more compact ES module syntax (ESM), which result in smaller Javascript bundles.

npm currently lists 59,851 ES modules. This makes up approximately 7% of total packages on npm are exporting an ES module, but the number is steadily increasing:

Screen-Shot-2019-06-13-at-9.13.09-AM Pika Project Launches New JavaScript CDN to Serve Modern, ESM Packages design tips News|javascript|Pika

Pika makes it easy to search for these packages and the results will only include those that have a defined “module” entry point in their package.json manifest. Each listing consolidates the relevant information on one page, highlighting the important details.

Screen-Shot-2019-06-13-at-9.26.36-AM Pika Project Launches New JavaScript CDN to Serve Modern, ESM Packages design tips News|javascript|Pika

One of the chief advantages of using ES modules is that they run natively on the web, without the need for a bundler. In a post titled “A Future Without Webpack,” Schott contends that JavaScript developers are “so steeped in the world of bundlers” that they overlook the possibilities of using ESM dependencies that run directly on the web:

Over the last several years, JavaScript bundling has morphed from a production-only optimization into a required build step for most web applications. Whether you love this or hate it, it’s hard to deny that bundlers have added a ton of new complexity to web development – a field of development that has always taken pride in its view-source, easy-to-get-started ethos.

@pika/web is an attempt to free web development from the bundler requirement. In 2019, you should use a bundler because you want to, not because you need to.

Schott created @pika/web to make it easy for developers to use ES modules, even when they don’t have compatible dependencies. It provides an install-time tool that is not exactly a build tool or a bundler but works to output web-native npm dependencies into a single ESM .js file:

@pika/web checks your package.json manifest for any “dependencies” that export a valid ESM “module” entry point, and then installs them to a local web_modules/ directory. @pika/web works on any ESM package, even ones with ESM & Common.js internal dependencies.

Installed packages run in the browser because @pika/web bundles each package into a single, web-ready ESM .js file. For example: The entire “preact” package is installed to web_modules/preact.js. This takes care of anything bad that the package may be doing internally, while preserving the original package interface.

Here’s a demo of how that works:

https://platform.twitter.com/widgets.js

This week Schott announced the availability of a new Pika CDN for delivering modern ES module packages. It uses the pikapkg/web package builder to work with any ESM package and the CDN will automagically handle any non-ESM dependencies of that package. Pika CDN automatically detects the visitor’s browser and serves JS that is optimized to the environment, eliminating polyfills and transpiler bloat wherever possible.

Screen-Shot-2019-06-13-at-10.12.32-AM Pika Project Launches New JavaScript CDN to Serve Modern, ESM Packages design tips News|javascript|Pika

“Pika CDN leverages your browser’s natural caching abilities to give your pages faster dependency load times, especially on first visit,” Schott said. “0ms first-loads are even possible (for your dependencies at least) if all packages have been seen before.

“With our CDN, package authors can distribute more modern, unminified packages without worrying about how to serve them directly. Instead, our nifty package-builder automatically resolves each package — and any legacy sub-dependencies — into a single, minified, ready-to-import JavaScript file.”

Schott recently left his position at Ripple to work full-time on Pika, a project that he believes will move the JavaScript ecosystem forward.

“Leaving my team was one of the hardest decisions I’ve ever made, but I know that I’m needed here,” he said. “I’m so excited to be a part of the future of the web, whatever it ends up looking like.”

Pika is looking for corporate sponsors. For now, Schott is funding the server costs using Patreon.