React.js implementation (possible better front-end)

[cbigham01]

Improve the front-end usability and user interaction by implementing react.js into the website.

[robertutterback]

To generalize a little bit, I think we want some kind of framework that gives us "components". That is, we want to organize the front-end based on functionality, e.g., a single file that contains the HTML content, style, and Javascript behavior for a cluster visualizations.

Whether or not to use React is less clear. React is very popular now, and people seem to be describing other websites in terms of React's abstractions, so it has become somewhat of a lingua franca.

However, React seems very heavyweight to me. They use a whole "virtual DOM", which seems mostly unnecessary to me. Then again, I'm not a web developer. I think Svelte looks lightweight and still powerful.

There are lots of others, but most modern frameworks will require a big up-front investment in tool setup. They require a "compilation" stage where the components are compiled into Javascript and bundled together into one or a few files. We want to be sure we want this before diving it.

Alternating, we can use Web Components, a built-in feature of HTML5. It's maybe not a nice, but doesn't require any compilation stage. Maybe the way forward is to start doing something like that, and then if we later want to use a framework like Svelte, the switch will be easier because we'd just need to update our component syntax to Svelte (or React, Vue, etc.).

[robertutterback]

The more I learn about Svelte the more I like it.

Another thing to think about is how we create visualizations. Right now we create the visualizations server-side with matplotlib and plotly. This is fine, but ultimately limits us to what those libraries can give us, since ultimately they have to translate everything to HTML and javascript. Of course, they also make it very easy to do a lot of things.

But ultimately I think we want to completely separate these two sides of the project -- Python does the NLP processing, Javascript (and HTML) show that data. Ultimately everything has to end up being HTML+Javascript anyway, so this gives us maximum flexibility, although it is also the hardest.

The reason I'm noting this here is because of the relation to Svelte. We don't necessarily need a visualization framework that is made directly for Svelte, but we need something that at least doesn't make it really hard to use with Svelte. For example, Plotly Dash is a nice framework for creating dashboards (from Python, actually), but it uses React. I really don't want to bloat the project by including both Svelte and React. We could just use React, but React makes a lot of things a pain.

I wonder if we can find a good way to use Svelte with Vega-Lite.