switch from react-bootstrap to antd.

[williamstein]

@johnjeng claims this is hard... and gave up for now. But we have to do this.

[williamstein]

Oops wrong commit message.

[williamstein]

We did a bunch of testing and:

1. The number of changes from react-bootstrap-0.x to react-bootstrap-1.x is utterly daunting. The API has massively changed. It's totally overwhelming. I feel like just reading through the changes is more content than I've ever read total about bootstrap... and then some.
2. Unfortunately, there is no sane way to run react-bootstrap-0.x (=bootstrap 3) in the same project as react-bootstrap-1.x (=bootstrap 4). Thus iteratively upgrading is impossible. It's all or nothing. And as mentioned in 1, doing "all" is hard.
3. Surprisingly, what is possible is going sideways. We can switch to another UI framework iteratively!? Somehow the very design of upgrading from react-bootstrap-0.x to react-bootstrap-1.x makes it so that for big projects it's actually easier to just quit using react-bootstrap entirely and switch to a completely different ui library. Isn't that stupid?
4. @johnjeng and I spent much of the day testing options, and we like antd the best for a bunch of reasons: a very rich collection of components, a clean easy-to-use and well documented API, it works very well with react (unlike a bunch of other primarily css frameworks where using them with react results in weird friction), and the code of antd is easy to read partly because it is actually written in typescript. Antd is certainly not perfect, and there are some genuine concerns about keyboard support and accessibility. (Material-ui was second place.) Also, with antd, one has to take great care not to import all of antd. One false import and you nearly double the size of cocalc minified bundle!

So the current plan to resolve this issue is:

• create a new module called ui, e.g., smc-webapp/ui/index.ts (and other files as we need them)
• iteratively rewrite all code in cocalc that uses react-bootstrap (and more -- our alerts, mentions, datepickers etc) to import components from ui instead. Inside this ui module, we'll be very careful to get stuff out of antd properly so as to avoid any big imports (or we'll get tree shaking to work, or the webpack plugin). Also, by having all components go through our ui module, we can uniformly replace any component by a wrapper version of it if need be (e.g., if antd makes an api change, we can revert it easily, rather than rewriting all our code).
• delete react-bootstrap from cocalc, and say goodbye to bootstrap forever. Nice knowing you.... except, subtle issue: people may have jupyter notebooks, markdown, etc., where they just assume bootstrap css is available. Hmm....

[williamstein]

OK, we have officially decided to switch from bootstrap to antd, "ASAP".

[haraldschilly]

Well, this ticket has some historic and general information, but I'm closing it. We use the antd-bootstrap file to help with compatibility and everything else is still ongoing, but the direction is clear.

[williamstein]

I'm re-opening this, since we are FAR from switching from react-bootstrap to antd, and this ticket is where it's useful to post updates with progress. E.g., right now there are 139 distinct places where we import react-bootstrap in our codebase:

~/cocalc/src/packages/frontend$ git grep react-bootstrap|wc -l
139

We need to rewrite all of those to use antd (or something else), then remove react-bootstrap, then deal with the surprising fallout (e.g., due to subtle dependence on their CSS style and also on normal bootstrap, which is probably used by Sage worksheets and jupyter classic mode), and then we can finally close this issue.