Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace the React front-end with Razor pages #678

Merged
merged 17 commits into from
Sep 18, 2021
Merged

Replace the React front-end with Razor pages #678

merged 17 commits into from
Sep 18, 2021

Conversation

loic-sharma
Copy link
Owner

@loic-sharma loic-sharma commented Aug 29, 2021

This replaces BaGet's React front-end with Razor Pages to reduce complexity and improve developer productivity.

Addresses #344 and fixes UI issues in #276.

Why?

React and other Single Page Application (SPA) frameworks are great if you need a rich client experience. Unfortunately, these frameworks do have significant costs to developer productivity and maintainability. For mid-sized applications like BaGet, these costs outweigh the benefits of using a SPA framework.

Developer productivity

BaGet's old frontend used technologies like React, TypeScript, webpack, NPM, Jest, etc... A .NET developer needs to learn and install all of these to contribute. Let's be honest, it's overwhelming.

ASP.NET Core provides tooling to bridge .NET and the SPA framework, which makes it easy for .NET developers to build and run the app. However, this tooling is sluggish in the following scenarios:

  • Clean builds - Installing NPM dependencies is slow due to how deep dependency graphs are in the JavaScript ecosystem. This accounts for ~50% of the CI build duration.
  • App startup - During development, ASP.NET Core needs to start the backend, the frontend development server, and a proxy to link the two together. This takes several seconds.

The separation between the frontend and backend also adds complexity as all data displayed in the frontend must be fetched from a backend API. BaGet needed some clever tricks so that the API that powered the React frontend also implemented the NuGet protocol.

Finally, the frontend/backend separation also makes authentication significantly more complex, which is unfortunate since private feeds is one of BaGet's most requested features.

Maintainability

The JavaScript ecosystem moves fast and keeping up is really, really hard. It is not uncommon for a vulnerability to be reported in a dependency that has been abandoned, forcing you to migrate to a new dependency. Rewrites are unavoidable in JavaScript.

The new stack

This pull request moves to a boring but pragmatic stack:

  • LibMan - The frontend "package manager" to replace NPM and Webpack. It copies NPM package assets to the git repository (which is why this pull request has so many line additions!)
  • Alpine - Minimal frontend library for when your app needs interactivity. Think of it like modernized knockout.js with Vue syntax.
  • Razor Pages - Used to generate HTML

I call this the LARP stack 😎

loic-sharma added a commit that referenced this pull request Sep 6, 2021
Improves the mirroring implementation:

1. Push all mirroring logic into the `MirrorService`. This will make it easier to reuse mirroring logic in the upcoming Razor Pages rewrite: #678
2. Add unit and integration tests on the mirroring functionality
3. Fixed bugs caught by tests
@yekanchi
Copy link

this is great news. it will allow .net developers to contribute to UI as well.

@loic-sharma loic-sharma marked this pull request as ready for review September 13, 2021 04:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants