Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upGitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
Proposal for simplifying build system #267
Comments
hamstu
assigned
anafilipadealmeida,
ssvmvss,
gmzjuliana,
federicoweber,
dace and
msanroman
|
hey @hamstu thanks for putting this together I wish I had some questions or things to add but this is all very complete |
|
Hi there @hamstu! First off, I love the way you laid out this proposal over here! I really like your proposal overall, +1 to all that @gmzjuliana said, I love the idea of using storybook, and as you mentioned in the video, the latest versions have lots of new and very useful features, we can potentially test more things as we build components by using the addons, like a11y, and coming from Publish where we use it, I can really see the value of adding it, especially if we are moving the documentation to Notion. And last but not least, testing I'd love to see this happening |
Overview
I propose we change the build system for
@bufferapp/uito use Rollup, remove the generated docs site, and switch to Storybook for component documentation.Rollup is popular module bundler most commonly used for packaging libraries. Right now in
@bufferapp/uiwe use Babel by itself to transpile the source code into CommonJS and then Publish on NPM. Rollup won't replace Babel, as it is a tool which, like webpack, uses Babel to transpile and then produce a bundled file.It's highly configurable, but also very simple, which allows for a lot of control for library authors. For example, it's trivial to produce two builds; your classic CommonJS version (
const foo = require('foo')) and an ES Modules version (import foo from 'foo'). The latter when processed by webpack makes it easier for our apps to do tree-shaking / dead code elimination; i.e., smaller bundles!Many well known 3rd party libraries are bundled with Rollup (Vue, Ember, Preact, D3, Three.js, Moment, and many more) and so I believe we'll also greatly benefit from the community knowledge and support here.
With BDS documentation being moved into Notion, we no longer need to build or maintain our own copy in this library. The code for this custom-built documentation system – while very powerful – is very complex in code and configuration. By removing it we can reduce cognitive load on engineers and focus more on building and packaging a best-in-class component library.
Once removed I propose we use Storybook. Storybook has matured a lot over the last few years and I think it will easily meet our needs for component building / testing, as well as developer-focused documentation. A script could likely be written to transform existing documentation files to the Storybook 'stories' format, making the migration easier.
Same as the current docs site, we could have the Storybook automatically deployed via Github Pages to the BDS site URL.
Improved Testing
This might be more of a nice-to-have, but I also love React Testing Library (props to @MayaUribe for introducing that in Publish). Some of our current tests are focused very much on testing implementation details and could be improved with a better approach.
[Spike] Proof of concept
I did a quick spike on bundling
@bufferapp/uiwith Rollup, which you can see here if you're interested: https://github.com/bufferapp/ui-proposal