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 tonode_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 thatpul
installed for you. - Use rollup to bundle your application
- Write your application in a modular way, using ES6
- For CSS
- Write your CSS as you wish
- use
@import
to import the dependencies thatpul
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 addpul rebuild
to your NPM scripts and NPM will automatically runpul
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: