pul

A light weight Package manager for the portable front end dependencies

• 1. Introduction
• 2. Rationale
• 2.1 The probelm
• 2.1 The Solution
• 3. Getting started
• 4. Suggested Workflow
• 5. Comparing with NPM
• 6. Credits

Introduction

pul is (yet another) package manager for the front end development. But, it's different from NPM or Bower.

pul doesn't have any registry of it's own, it doesn't need to have one, and it doesn't ask you for extra package.json files/fields.

pul uses known, trusted and popular CDNs to get the package. When it doesn't find the package in those CDNs it uses a server that installs (then compile, transpile, minify ... etc) the package to get portable files ready to be used in the browser.

Rationale

Problem

As a Node developer, I can not imagine myself being productive in any project without NPM. It's very well suited for JavaScript in the back-end (node).

As for the front end, there are rather successful attempts to make use of NPM for the front end development. However, I don't see this as the best approach.

Why I think NPM is not suitable for the front end

• If I had to import jQuery in my project, then I have to install 1.18 MB of data, while the standalone jQuery library is just 216 KB (85 when minified).
• Some JavaScript libraries are not even in NPM, but can be found in GitHub, cloudFlare CDN, jsDeliver CDN.
• In my opinion, it's just an abuse of NPM when you install and require a CSS dependency into a javaScript file.
• What about projects that have both JavaScript and CSS dist files (like bootstrap). You'll have the bootstrap.min.js in your javaScript, then what? refer to node_modules/bootstrap/dist/css/bootstrap.min.css for the CSS? That doesn't strike me as a good approach at all!
• If you used NPM as a package manager, and you wanted to add a dependency that does not reside in the NPM registry (one you found on GitHub for example) there's no way for you to add this dependency as a plain URL to package.json.
• Build times are increased by folds if you import from node_modules, while most of the times, there's a ready standalone file for your front end in the same node_modules/ directory. Why can't you just import this file? why bother with all these other source files?
• The author knows how to build their package. when you import from node_modules, the package you get may need to be transpiled from ES6, it may need to be compiled from TypeScript, coffescript ... etc. In short, the author should be the only one responsible for building the package. They should provide a standalone/portable file.
• Though it's uncommon, but some projects are limited by the server, and module bundling (or even installing) can not be carried out efficiently. For example, a $5 server on DigitalOcean may go out of memory when trying to install Babel, it's presets, and 40 other modules, the build times may fail or at least may be ridiculously slow (I've been there myself).
• Other issues that are addressed in this blog post.

Solution

How about a package manager that fetches your dependencies from content delivery networks, those that already have a huge library of portable packages that are just begging you to include them in the browser.

Question: What happens if pul didn't find the dependency in any CDN? Answer: It will fallback to NPM, using a remote server (not your machine) to install (then bundle, transpile, compile or whatever, using browserify) to get a portable, minified and ready to be used single file.

Getting Started

Install using NPM (the irony)

npm install -g pul

When you're at your project's directory:

Add a Dependency:

$ pul add

Remove a Dependency:

$ pul remove

(Re)Download added dependencies:

$ pul rebuild

That's it.. You'll be prompted for picking the exact package, the version, the file and the target directory.

Suggested Workflow

• Install your external dependencies using pul.
• For Javascript
  • Write your application in a modular way, using ES6 import to import your application files and to import the dependencies that pul installed for you.
  • Use rollup to bundle your application
• For CSS
  • Write your CSS as you wish
  • use @importto import the dependencies that pul installed for you.

Comparing with NPM

• NPM can be used for both of your back-end and front-end, thus a single $ npm install will install them both for you. However you can add pul rebuild to your NPM scripts and NPM will automatically run pul thus adding your front-end dependencies.
• Pul doesn't need a module bundler (nor any of it's plugins), it will provide you with files that are ready to be used in the browser.
• Currently there's no $ pul update (like npm) but it will be added very soon.
• Pul is way faster in installation, isn't as resource hungry as NPM, and it will make your build times also faster.
• Pul is light weight (18 KB).
• Pul have three commands only (add, remove, rebuild).
• Pul may introduce redundancy, since multiple packages may rely on the same dependency, yet each package will get it's own version of that dependency.

TODO

• Updating: $ pul update
• Specifying file and version $ pul add <file>@<name>@<version> <directory>
• Exact name (no search) $ pul add exactly <name>
• Short hands $ pul -a <name> <dir>

Credits

Pul uses the following CDNs and services to get it's packages:

• CloudFlare
• jsDeliver
• wzrd.in