chiasm-project / chiasm

A browser based environment for interactive data visualizations.
MIT License
184 stars 27 forks source link

Adopt Rollup #54

Open curran opened 8 years ago

curran commented 8 years ago

The way that the new D3 modules are structured using Rollup and ES6 modules is brilliant. The code is clean, the toolchain is clean, and the UMD bundles are clean and small, with only the necessary code included. Rollup also seems to have a better shim situation than browserify-shim.

These Chiasm modules should follow a similar pattern of organization to D3 modules:

curran commented 8 years ago

Perhaps this should be rephrased as "adopt ES6 modules". Rollup is a great tool for building bundles. It would also be useful to load modules dynamically with a module loader library like ES6 Module Loader.

Hypercubed commented 8 years ago

Does this mean each module continues to generate its own bundle? The easiest thing would be to publish only ES6 modules and bundle only at the top level (chiasm) or at the user level. I think we are all finally getting comfortable consuming CJS npm packages in the browser.

curran commented 8 years ago

Right, that's a great idea.

I'm currently pursuing the Rollup adoption over at reactive-vis, which outputs a bundle that contains all dependencies (including reactive-model and the parts of D3 that are used).

Hypercubed commented 8 years ago

Do you see any benefit in converting chiasm modules now? Sounds like your focus is elsewhere, for me I'm just trying to get the footprint of Project-X down. As you can see here: http://hypercubed.github.io/Project-Chi/#/examples/treemap, lodash and jquery makeup ~8.5% of the code. I'm using neither of these directly.

Hypercubed commented 8 years ago

Ok, so I would like to help with this but still unsure about the direction. Following the d3 pattern for each module we need to:

1) Convert to ES6 modules. 2) remove browserify. 3) Add rollup and uglify to generate a build.

Not sure if we really need to do # 3 to each module.

Furthermore, from what I can tell d3 is still not using ES6 syntax just ES6 modules for rollup. If we add ES6 features (template strings, etc) do we also need to add a babel step for older browsers and < v4.0 node?

curran commented 8 years ago

That's an awesome treemap visualization!

I'd welcome the changes in the Chiasm modules. Your 3 steps sound good to me. It's true that D3 is using ES5 code, and only ES6 modules. This is why D3 can be bundled with Rollup without Babel. I suppose if we do want to start using ES6 language features, we'll need to add a Babel step to the Rollup build.

Hypercubed commented 8 years ago

Thanks.

I'd like to push a little on # 3. What's the purpose of including a bundle when we are no longer supporting bower? If we do keep a bundle may I suggest that we do it on npm publish and exclude from the repo. That is what we did for crossfilter/universe then point users to npmcdn.