[Global] Make Superset a Single Page App

[rusackas]

Motivation / Problem to Solve

Superset was created as a series of server-rendered (Python/Jinja) views, each enabled as a separate React application. Many of the core areas of superset (Dashboards, SQL Lab, Explore) and other small parts of Superset as well are still built this way. The ideal scenario for a simpler, more performant, more maintainable Superset frontend codebase would be to bring these apps together into a true single page app, built around a single server-generated page.

This work will greatly increase the perceived performance of Superset, reduce burden on servers, reduce the amount of payload being sent over the wire, simplify the fragmented developer experience, and mostly likely raise the bar for both architectural and UI/UX consistency.

Proposed Functionality

Accomplishing the task of making Superset into a true Single Page App (SPA) is no small feat. It will likely require several of the following to take place:

• Consolidation of React views into a single React app using React Router or similar
• Deprecation/removal of currently used FAB views
• Addition of new API endpoints to expose data to React that is currently exposed through server-generated views. It may also be possible to supply some of this data via bootstrap data within the single page view, but that can be a bit of an anti-pattern in many contexts.
• Refactoring of many views and components that use URL data or other means to exchange data rather than a shared piece of state
• Assessing/refactoring any state and state methods (actions/reducers, for example) that can now be shared between views/routes
• Auditing/refactoring unit/integration/E2E tests
• Refactoring each app's "global" styles to be either truly global, or migrated into the relevant component(s) using Emotion.

[ktmud]

I would LOVE to see we investigate the feasibility of building this on top of Next.js as well. It may make deployment slightly more complex but would force us to come up with a cleaner backend/frontend independent architecture and comes with many benefits such as SSR, fast refresh, and zero config compilation.

[rusackas]

Hmm... I'm intrigued by next.js, but hesitant to sign up for another bucket of refactor work. Would you and your team be interested in tackling some of this effort?

[ktmud]

I'd be interested in creating a POC once the code is cleaner for SPA.

[suddjian]

I'm definitely interested in moving towards a standalone frontend client app, but I'm not quite convinced that Next.js is the best choice for this. I'd love to see a POC, or a short writeup of what we can expect that project structure to look like.

Also, Tai and I have created a project in the superset repo for tracking this effort. @ktmud I'd love for you to add any additional tasks you're aware of to the list

[ktmud]

Next.js is THE next modern solution for frontend apps. I used it in some personal projects and absolutely loved it. The setup will be a little tricky within superset, because you need a separate node service to run it, but I'd expect it becomes a must as Superset becomes more and more powerful.

I'll create a POC.