Utilizar Entity Framework con Blazor WebAssembly es un escenario muy poco común, pero WebAssembly trae todo un abanico de posibilidades para poder ejecutar nuestras herramientas favoritas de .NET en la Web.
En este artículo te voy a mostrar 3 maneras que ni te imaginabas que era posible realizar para poder utilizar Entity Framework Core del lado del NAVEGADOR 🤯.
¿Que es Blazor WebAssembly?
Para recordar un poco, Blazor WebAssembly (WASM) es una de las formas de crear sitios web con .NET. En este caso, Blazor Wasm tiene la particularidad de ejecutar código C# en el navegador sin necesitdad de usar un servidor. Literalmente, el sitio web descarga las DLL de .NET y las ejecuta en tu navegador.
Blazor Wasm y Entity Framework Core
Ya que Blazor Wasm utiliza las DLL de .NET en el navegador, tranquilamente también puede utilizar las de cualquier librería construida con .NET, como por ejemplo: AutoMapper, MediatR, FluentValidation y, por supuesto, Entity Framework Core.
Hasta ahora todo muy lindo y de color de rosa, pero tampoco podemos esperar que algo tan "milagroso" no tenga límites. 🙄
Blazor Wasm y SQLServer
Actualmente, desde una sesión del navegador no se puede abrir conexiones de red arbitrarias. Es la razón por la cual no nos podemos conectar directamente a la base de datos con Javascript. ❌
De igual forma, como Blazor WebAssembly se ejecuta en el navegador, también es imposible que desde un proyecto de Blazor Wasm nos conectemos a base de datos como SqlServer, MySql, Postgres, MongoDb, etc.
Podemos leer más sobre el asunto en el siguiente link 👉 https://github.com/dotnet/SqlClient/issues/599
Blazor Wasm y Entity Framework Core InMemory
Entity Framework Core InMemory es la forma más básica de usar nuestro ORM favorito, ya que consta de crear una "base de datos" en memoria, por lo tanto, no realiza ninguna conexión de red. 😴
Esta librería de EFCore es usada normalmente para los UnitTesting, pero también puede llegar a ser muy útil a la hora de desarrollar sitios web para el manejo de estado en arquitecturas frontend complejas como Flux.
Blazor Wasm y SQLite
Las aplicaciones Blazor WebAssembly, desde .NET 6, pueden usar dependencias nativas compiladas para ejecutarse en WebAssembly.
Las herramientas de compilación de WebAssembly de .NET se basan en Emscripten, una herramienta que permite compilar código a WebAssembly. 🔨
SQLite es una base de datos contenida en un archivo, a diferencia de los otros motores de bases de datos, que son software completos.
SQLite está desarrollado en C lo que significa que podemos importarlo como dependencia nativa y utilizar SQLite directamente en nuestra aplicación Blazor. Esto es posible, ya que al compilar, no solo nuestro código C# se va a compilar a WebAssembly, sino que gracias a la tool Emscripten, también se va a compilar SQLite a WebAssembly, permitiendo que lo podamos utilizar directamente en el navegador. 😲
De esta forma se puede usar una base de datos dentro de tu proyecto web y lo más importante, es que podés usar EFCore con SQLite en el navegador.🚀
Blazor Wasm y Remote.Linq
Remote.Linq es una librería que serializa y deserializa consultas de Linq a JSON. Esto permite que una app de .NET construya una consulta de Linq, la convierte a Json y se la envía a otra app de .NET para deserealizarla y ejecutarla, ya sea con una Lista o con EFCore mismo. ⭐
Con Blazor WebAssembly podemos hacer que nuestro sitio web construya las consultas de Linq pidiendo la información que el sitio web NECESITA y enviarle el Json de Linq a una WebApi para que resuelva la consulta y le devuelva la información solicitada al sitio web. (igualito a GraphQL pero 100% .NET con nuestro ORM favorito) 😉
.jpeg "Parte del JSON que es enviado a la WebApi como otra forma de usar Entity Framework con Blazor WebAssembly")
A continuación podemos ver el único Controller que tiene la WebApi
[ApiController]
[Route("api/[controller]")]
public class QueryController : ControllerBase
{
private readonly ApplicationDbContext _context;
public QueryController(ApplicationDbContext context)
{
_context = context;
}
[HttpPost]
public DynamicObject Query([FromBody] RemoteQuery query)
=> query.Expression.ExecuteWithEntityFrameworkCore(_context);
}.jpeg "El QueryController hace de intermediario para utilizar EntityFramework con Blazor WebAssembly")
A continuación les dejo una charla que di hace unos años para la comunidad NETBaires sobre Blazor WebAssembly y Remote.Linq
Conclusión
En este artículo aprendiste 3 maneras de usar Entity Framework Core con Blazor WebAssembly, pero el verdadero mensaje que quiero dejar con este artículo es que con WebAssembly tenemos la posibilidad de crear aplicaciones web superiores a cualquier sitio web tradicional. Y todo esto utilizando el lenguaje C#, el framework .NET y las librerías que ya conocemos
Si encuentras útil este trabajo y deseas mostrar tu apoyo, siempre puedes invitarme a un buen café ☕.
Les dejo un link de GitHub con una app que realiza las 3 maneras de utilizar Entity Framework con Blazor WebAssembly 👉 https://github.com/lauchacarro/BlazorWasmEFCore