Published on

Using LIT with ASP.NET Core MVC [Part 1]

Authors

Why?

In modern web development, building efficient, responsive, and maintainable user interfaces is crucial. As a .NET developer, we often prefer to do as much of the work as we can with the tech that we are most familiar with. This means that most of the UI is done in Razor views, which are rendered server-side.

The caveat of this approach is that we tend to end up in situations, where we do a less-than-ideal implementation of a full frontend framework for the individual pages needing a rich frontend experience. This often ends up in a big mess of Razor syntax mixed up with templating code and logic from the JavaScript framework in use. I mean, who hasn't had to fix a bug in a messy WebForms page, with a bit of Angular sprinkled on top?

By integrating Lit with ASP.NET Core, we can leverage the power of web components, providing reusable UI elements and keeping technologies separated.

What is Lit?

Lit is a small, efficient library for building web components. Web components are reusable, encapsulated HTML, CSS, and JavaScript elements that work natively in modern browsers.

With Lit, you can create these components with minimal boilerplate code. It’s particularly suited for scenarios where you want fine-grained control over UI elements without the overhead of large JavaScript frameworks. In scenarios where we require a rich frontend experience on only certain pages in ASP.NET Core, Lit fits in perfectly. We no longer need to reference a huge frontend framework on a single page just to utilize 5-10% of its functionality.

Key benefits of Lit include:

  • Performance: Lit optimizes updates to the DOM, ensuring fast rendering.
  • Reusability: Since Lit is built on web standards, components can be reused across different technologies.
  • Small size: The Lit library is lightweight, resulting in fast load times.

Vite

Vite is a modern front-end build tool that provides fast development and optimized builds, unlike traditional bundlers (e.g., Webpack).

Key features of Vite:

  • Optimized build: Vite uses Rollup under the hood for production builds, resulting in highly optimized outputs.
  • Framework-agnostic: Though Vite is often used with frameworks like Vue and React, it works with any front-end setup, including vanilla JavaScript or web component-based libraries like Lit.

We will be using Vite as a tool to bundle our web components for use in our ASP.NET Core views.

Next steps

In a future post, we will have a look into the practical implementation of utilizing Lit in ASP.NET Core.