jspm and systemjs: High friction package managment
We have a decent-sized Angular codebase here at Appuri that I want to replace with real module system that will allow for a gradual move away from Angular. A friend recently pointed me to jspm and systemjs. The goal and direction is sound - load any module format (AMD, CommonJS, Harmony/ES6) and be registry-agnostic (npm or GitHub is out of the box with registry plugins, namely for bower). Unlike bower, since the loader and the package manager work together, it maintains the mapping of modules that normally you do manually in the
paths sections of your RequireJS main. It also has a builder, so you can work in a mode that loads files individually, or bundle them up together for production, with source maps and minifcation. It also supports ES6 compiling to ES5 (or "transpiling" if you don't fully understand what compiling is), so it is very future-standards focused. It's a superset of what I want from RequireJS, so I was excited and dove in.
Three days in, I'm ready to throw in the towel as I can't get SystemJS builder to work. There are bigger issues too.
Bower should be a first class registry
So jspm is registry agnostic, and it's registry providers built in are npm and GitHub. Why a GitHub provder instead of bower? It's so similar to bower, yet lacking too. They are both git based (well except these muts be in GitHub, damn your priviate or alternate git repo). It also ignores dependencies in the bower.json - which basically defeats the purpose of the package manager as you are now left to dealing with the dependecies yourself, manually editing your
config.js- the thing that it's supposed to manage for you.
I started out simply using
jspm install angular. Worked fine. Then trying to install angular plugins, they weren't in the registry. so I did them mangually via
jspm install github:somedude/angular-plugin. However they would often just have a bower.json, so the dependency on angular wasn't declared. It was worse as I did
angular-chart, which depends on
c3, which then depends on
Ugh. So I install jspm-bower-endpoint and run
jspm install bower:angular-chart. cool.... wait, it depends on
bower:angular, but I already have
github:angularinstalled from the jspm registry... Ugh.
jspm uninstallALL the jspm packages and just use the bower registry, otherwise unless the jspm registry is 100% complete, you'll just have a mess to manually maintain. The same is true if you mixed and matched
bower, unless the dependencies didn't cross. BTW, you still need to have a
jspmdown anyways.... so you have 2 package maangers. Actually, 2 package managers and a package manager registry wrapper.
Automatic module detection really does not work
Angular's module system fails at tracking dependencies properly
Angular, being a framework with a lot of solutions to a problem, forces users to use modules - a very good thing. However, rather than letting users choose their module and package system (RequireJS or Browserify or Webpack for loaders and AMD vs CommonJS vs Harmony for module formats), it brings in it's own module format, without a loader.
Defining a module looks like this
var module = angular.module('fruit-stand', ['raspberries', 'strawberries', 'apples']) // define what the module is or has by calling methods on it