@pika/web, part of the @pika toolchain, aims at improving web application developers’ experience by turning often-complex bundling processes into an opt-in feature. With @pika/web, developers can run modern npm packages directly in the browser. Bundlers, like Browserify, Webpack or import maps, may be used but are no longer required.
In the last several years, the array of techniques and technologies required for specifying, developing, testing and deploying web applications has grown considerably. npm outlines this in its recently published 2019 outlook:
“JavaScript in 2018 is somewhat notorious for requiring a lot of tooling to get going, which is quite a reversal from the situation in 2014… All of our survey respondents would like to see less tooling [and] less configuration required to get started.”_
JavaScript bundling indeed evolved from a production-only optimization into a required build step for most web applications. In order to use any of the existing bundlers, it is necessary to understand the mechanics of bundling, miscellaneous module formats and patterns, and a long scattered list of configuration options, and stay up-to-date with constantly released newer versions – challenging tasks even for senior developers.
In the JavaScript ecosystem there coexist packages following any of the following conventions: CommonJS (CJS), Asynchronous Module Definition (AMD), Universal Module Definition (UMD), and ES modules (ESM). @pika/web promises developers to obviate the complexity of module format inter-operability and application bundling by focusing exclusively on the recent ES modules.
Provided developers agree to only incorporate ES modules into their applications, @pika/web will automatically install and bundle all dependencies in an optimized way without any configuration. The release note explains:
@pika/web installs modern
npmdependencies in a way that lets them run natively in the browser, even if they have dependencies themselves. That’s it.
It’s not a build tool and it’s not a bundler (in the traditional sense, anyway). @pika/web is a dependency install-time tool that lets you dramatically reduce the need for other tooling and even skip Webpack or Parcel entirely.
@pika/web loads and installs natively in the browser npm packages as single .js files in a new web_modules/ directory. In order to use @pika/web, developers must install the package, and modify their imports to reflect the path of the installed packages:
# 1. Run @pika/web in your project:
$ npx @pika/web
# 2. Replace all NPM package imports in your web app with web-native URLs:
- import { createElement, Component } from "preact";
- import htm from "htm";
+ import { createElement, Component } from "/web_modules/preact.js";
+ import htm from "/web_modules/htm.js";
# 3. Run that file directly in the browser and see the magic!
✨ ~(‾▿‾~)(~‾▿‾)~ ✨
# (Optional) If you already use Babel to build your application, skip "Step 2" and let our plugin rewrite your imports automatically:
echo '{"plugins": [["@pika/web/assets/babel-plugin.js"]]}' > .babelrc
# (Optional) Add a package.json "prepare" script to run @pika/web on every npm install:
{"scripts": {"prepare": "pika-web"}}
Bundling packages on a per-module basis as @pika/web does have performance benefits. The built web application is more likely to run fast and cache well: updating one dependency won’t force a complete re-download of the application. Duplicated code across bundles, slow first page load due to unused/unrelated code, gotchas, and bugs across upgrades are common issues which may be avoided.
Some developers have noticed and expressed enthusiasm:
I’m really really impressed by @pikapkg! Using VueJS, VueRouter, etc (with .Vue file) without any bundler while keeping my current workflow is a god gift).
Amazing ! 2019 is an awesome year for the web. Make it simple, make it fast.
On the negative side, the large JavaScript files generated by bundlers like Webpack may compress better and be parsed faster than multiple small files. Additionally, as of February 28th, 2019, only 6% (50,000) of npm packages are based on ES modules. ESM is supported by all modern browsers, meaning that IE11 or UC Browser for Android are not. The Pika team gave its own cost/benefit evaluation in a twitter post:
At a certain size, you will probably want to optimize your site for production by bundling your application source. But what we found was that the caching wins + the reduced complexity wins more than made up for the lack of bundling on small to medium sized sites.
(…) In 2019, you should use a bundler because you want to, not because you need to.
@Pika/web remains a fairly new tool. It is in its early phase (v0.4), with its first major release unlikely to happen during 2019.
Other packages advocating a zero-configuration developer experience are the Parcel bundler and the Zero Server project. InfoQ recently reported on the latter.
@Pika/web is available under the MIT open-source license. Contributions are welcome via the GitHub project and should follow the contribution guidelines and code of conduct for the @pika packages.