Extensión de Blazor para Visual Studio que ahorra tiempo

Descripción rápida: Cómo facilitar el desarrollo de Blazor

Tim comienza explicando el objetivo: ayudar a los desarrolladores que utilizan Blazor en Visual Studio a agilizar su flujo de trabajo. Dice que esta extensión aborda pequeñas molestias como la gestión de archivos de Blazor, espacios de nombres y separación de código oculto, tareas que pueden volverse repetitivas cuando se trabaja con varios componentes de Blazor o páginas de Blazor.

Esta extensión de Visual Studio no es sólo por comodidad; se trata de aumentar el rendimiento de la renderización, simplificar la interactividad de la interfaz de usuario y acelerar el ciclo de desarrollo de .NET, especialmente para las aplicaciones web de Blazor.

Instalación de la extensión por Jimmy Engström

Tim presenta una extensión de Visual Studio llamada BLM, creada por Jimmy Engström. Puedes encontrarla a través de Extensiones > Administrar extensiones en Visual Studio buscando "Extensión BLM" Una vez instalada, Visual Studio debe reiniciarse.

Tim señala que la extensión incluye una documentación excelente, extraída directamente de su archivo README de GitHub. Esto significa que incluso los nuevos desarrolladores pueden entender cómo utilizarla sin necesidad de salir del IDE.

Cómo crear un proyecto Blazor

Tras la instalación, tendrá que crear un nuevo proyecto Blazor o abrir uno ya existente. Tim carga un proyecto de muestra llamado "SuggestionApp", un proyecto de servidor Blazor que utiliza .NET Core. Este es un gran ejemplo porque muestra una mezcla de sintaxis Razor y lógica de código oculto en componentes.

Trabajando con Razor Files y Code-Behind

Tim abre un archivo Profile.razor y explica que contiene tanto marcas Razor como lógica C#. Si desea separar la lógica en un archivo de código oculto, la extensión lo hace tan sencillo como hacer clic con el botón derecho del ratón en > Crear código oculto. Esto genera un archivo .razor.cs vinculado al componente .razor.

Aunque el ejemplo ya contiene algo de código, Tim lo elimina para simular que empieza de cero y crea un nuevo componente llamado Test.razor.

Escribir y enlazar componentes Razor

En Test.razor, Tim define una simple variable de cadena:

string test = "hello world";

string test = "hello world";

A continuación, utiliza la expresión @test en el marcado Razor para renderizarlo en el navegador. Tras compilar el proyecto, el componente es totalmente funcional. Este ejemplo muestra el comportamiento predeterminado de la representación de contenido dinámico en componentes de Blazor utilizando el tiempo de ejecución .NET y ensamblados compilados.

Función Extract to Code-Behind de Visual Studio

Tim muestra una función nativa de Visual Studio: la extracción de lógica Razor en línea en un archivo code-behind mediante Quick Actions > Refactor > Extract to Code Behind. Esto separa la capa lógica de la interfaz de usuario, una buena práctica para el mantenimiento y las pruebas.

La extensión añade la funcionalidad inversa

Aquí es donde la extensión muestra su verdadero valor. Aunque Visual Studio permite mover código a un archivo .razor.cs, no permite moverlo de vuelta. Con la extensión, Tim hace clic con el botón derecho en el archivo .razor.cs y elige "Move Code Behind to Razor" Al instante, la lógica de C# se traslada de nuevo al archivo Razor.

Aunque esta función está marcada como beta, Tim la encuentra estable y útil para cuando los desarrolladores quieren simplificar archivos o depurar lógica en línea.

Creación de archivos CSS y JS aislados

Tim muestra otro método para ahorrar tiempo: clic con el botón derecho del ratón > Crear CSS aislado. Esto crea un archivo llamado Test.razor.css, un patrón que Blazor utiliza para el estilo de componentes específicos. Tim explica que, sin la extensión, habría que crear manualmente el archivo mediante Añadir > Nuevo elemento y asegurarse de que la nomenclatura coincide.

La misma función existe para el aislamiento de JavaScript, que permite adjuntar fácilmente comportamientos a componentes individuales, una parte importante del desarrollo web a la hora de crear componentes interactivos y seguros.

Encuentra el uso de componentes en toda la aplicación

En otra función útil, Tim hace clic con el botón derecho en el componente NotAuthorized y selecciona "Find Component Usages" Esto muestra rápidamente todos los archivos en los que se hace referencia a ese componente. Es increíblemente útil para la refactorización, especialmente en grandes proyectos .NET en los que los componentes se reutilizan en páginas y diseños.

Generar pruebas BUnit a partir de componentes

Las pruebas son una parte vital de cualquier aplicación web. Tim muestra cómo autogenerar pruebas BUnit, un marco de pruebas para Blazor. Al hacer clic con el botón derecho en un componente y seleccionar "Generar prueba BUnit", se puede elegir entre la sintaxis Razor o C#.

La herramienta genera el andamiaje de pruebas necesario, lo que permite una configuración rápida de las pruebas de interfaz de usuario. Esto es perfecto para los desarrolladores que deseen implementar la seguridad, la validación de respuestas o el comportamiento de la interfaz de usuario a través de pruebas automatizadas.

Extraer la interfaz de usuario compartida en componentes reutilizables

A continuación, Tim muestra cómo se puede resaltar cualquier bloque de Razor UI y elegir "Extraer a componente" En su demostración, extrae un botón dentro de un contenedor en un nuevo componente llamado TestButton. Esto permite un código más limpio, una mejor reutilización y un diseño de interfaz de usuario modular, especialmente importante cuando se desarrollan aplicaciones móviles, aplicaciones híbridas de Blazor o aplicaciones web a gran escala.

Visualización de rutas en su aplicación Blazor

Otra función destacada es Mostrar rutas de Blazor, a la que se accede a través de Extensiones > BLM > Mostrar rutas de Blazor. Esta herramienta enumera todas las rutas definidas en su proyecto, aquellas definidas con la directiva @page en los archivos Razor.

Tim demuestra que la modificación de la directiva @page en Test.razor actualiza instantáneamente la lista de rutas. Puede hacer doble clic en cualquier ruta de la lista para abrir el componente correspondiente. Esto hace que la gestión de la navegación sea mucho más eficiente, especialmente en aplicaciones que utilizan navegación mejorada, múltiples modos de renderizado o componentes profundamente anidados.

Ejecutar el proyecto con .NET Watch

Tim comparte un importante consejo sobre rendimiento: utilizar .NET Watch a través de PowerShell en lugar de confiar en la recarga en caliente integrada de Visual Studio. Explica que la recarga tradicional es más lenta y menos coherente. Pero con la extensión, puedes hacer clic con el botón derecho en tu proyecto y seleccionar "Ejecutar .NET Watch"

Esto inicia una ventana de PowerShell y ejecuta la aplicación utilizando el siguiente comando:

dotnet watch

dotnet watch

Esto permite una recarga en vivo, un arranque más rápido y un desarrollo más ágil. Para los desarrolladores que despliegan en un servidor web o crean aplicaciones progresivas, este aumento de la velocidad puede mejorar significativamente la experiencia de desarrollo.

Pensamientos finales: Por qué deberías instalar esta extensión

En el minuto final, Tim resume la potencia de esta extensión de Visual Studio para el desarrollo de Blazor. Tanto si está construyendo una aplicación Blazor WebAssembly, un proyecto del lado del servidor, o cualquier cosa intermedia, esta herramienta proporciona:

• Creación más rápida de archivos y componentes

• Separación más limpia del código Razor y C#

• Pruebas y descubrimiento de rutas más sencillos

• Mejor comprensión del árbol de renderizado

• Mejor gestión de la sintaxis y el marcado compilados

Tim recomienda encarecidamente que cualquiera que trabaje con aplicaciones .NET, C# o Blazor instale esta extensión y considere integrarla en su cadena de herramientas predeterminada.

Conclusión: Blazor + Visual Studio = Aún mejor con esta extensión

Si está desarrollando aplicaciones web modernas con Blazor en Visual Studio, el tutorial de Tim Corey muestra lo potente que puede llegar a ser esta pequeña extensión. Con funciones que mejoran la gestión de archivos, las pruebas, el enrutamiento y la eficacia de la compilación, proporciona grandes beneficios con una configuración mínima.

Gracias al trabajo de Jimmy Engström, los desarrolladores tienen ahora acceso a una herramienta que se ajusta perfectamente al ecosistema de Blazor y .NET Core, reduciendo el trabajo manual, permitiendo un mejor diseño de los componentes y mejorando la interactividad y la capacidad de mantenimiento de los proyectos en general.

Tanto si trabaja en aplicaciones móviles, de escritorio o web, esta extensión le ayudará a liberar todo el potencial de Blazor, Visual Studio y el tiempo de ejecución .NET. Para obtener más información, vea el vídeo de Tim y suscríbase a su Channel para ver más vídeos interesantes sobre C# y el desarrollo.