Generación de código Blazor: una guía paso a paso

Última actualización 16 de noviembre de 2022

Blazor es la respuesta de Microsoft a su enorme comunidad de desarrolladores .NET para crear aplicaciones modernas de una sola página (SPA), al igual que las aplicaciones escritas en marcos como Angular y React. Antes de Blazor, Microsoft comercializaba el marco web más popular del mundo, ASP.NET Web Forms. Microsoft lo retiró hace mucho tiempo y las únicas opciones para los desarrolladores de .NET eran las aplicaciones Razor Pages y ASP.NET MVC. Si bien eran populares, en realidad nunca compitieron con lo que el "resto" de los desarrolladores web modernos utilizaban en marcos de aplicaciones de una sola página. Con Blazor, la comunidad Microsoft/.NET tenía un marco que les brindaba todo lo que necesitaban: acceso a .NET Framework, la capacidad de usar C# y, al mismo tiempo, eliminaba la necesidad de aprender JavaScript para escribir aplicaciones web modernas.

¿Por qué Blazor?

Blazor es un marco web gratuito de código abierto que permite a los desarrolladores crear interfaces de usuario web interactivas utilizando habilidades puras de C#, código HTML y sintaxis Razor en lugar de JavaScript. El interés en este marco aumentó significativamente cuando, en mayo de 2021, Microsoft lanzó Blazor 3.2 y Blazor WebAssembly, coincidiendo con el patrón SPA (aplicación de página única) para escribir aplicaciones que siguen plataformas como React y Angular. Con el código del cliente y del servidor escrito en C#, los usuarios podían compartir el código Blazor y las bibliotecas .NET con facilidad. Además, solo para mencionar, el código Blazor está optimizado para usar menos textos repetitivos y es muy fácil comenzar con él.

Nuestro blog presenta 3 artículos detallados que exploran las diferencias entre Blazor y Angular, Blazor y React, y Blazor Server vs Web Assembly. Si tiene curiosidad, puede consultarlos para obtener más información.

¿Qué es la generación de código Blazor?

La generación de código, y la generación de código Blazor en particular, es un proceso mediante el cual un compilador genera automáticamente el código de trabajo de una aplicación, reduciendo así el tiempo, los esfuerzos y los errores que resultan de la codificación manual. Estos compiladores toman el código fuente como entrada y lo convierten en código de máquina. Y en nuestro caso el generador de código es App Builder ™.

Nota: Puede aprender todo sobre nuestra herramienta de desarrollo de aplicaciones de código bajo WYSIWYG para Blazor (y Angular) en el tutorial y descripción general del producto App Builder a continuación.

¿Cómo generar código Blazor con App Builder?

Para aquellos que se encuentran con App Builder por primera vez, este es un completo creador de aplicaciones WYSIWYG de arrastrar y soltar que maneja todos los procesos, desde el diseño hasta la generación del código. Aquí hay algunos aspectos destacados clave sobre el producto:

• Un creador de aplicaciones visuales y una plataforma unificada para gerentes de productos, diseñadores, partes interesadas y desarrolladores.
• Herramienta de desarrollo de aplicaciones de bajo código basada en la nube que ayuda a las empresas a diseñar y crear aplicaciones comerciales completas un 80% más rápido.
• Produce código Blazor WASM y Blazor Server listo para producción, así como código Web Components y Angular. También tiene la capacidad de importar sus diseños desde Sketch y Figma Design Tools.
• Aplicación de escritorio App Builder para Windows, MacOS y Linux.
• Elimina silos y transferencias que ralentizan la creación de aplicaciones.
• Ahorra tiempo, esfuerzo y dinero, ya que no estás obligado a codificar manualmente todos los aspectos de la interfaz de usuario en Blazor.
• Garantiza una creación de prototipos, pruebas y vista previa en vivo más sencilla de la ejecución de aplicaciones Blazor, Angular y Web Components.
• Le permite incorporar elementos como servicios de terceros, fuentes de datos adicionales y seguridad y cumplimiento adicionales.
• Proporciona excelentes recursos de aprendizaje para ayudarlo a crear aplicaciones Blazor.

Con .NET 6, comenzamos oficialmente a admitir App Builder con Blazor como opción de generación de código. Esto significa que ahora puede crear cualquier interfaz de usuario Blazor con solo arrastrar y soltar y obtener todo el código Razor, C# y CSS listo para producción con un clic para los siguientes componentes compatibles:

• Cuadrícula y Cuadrícula de árbol con enlace de datos
• Insignia
• Icono
• Casilla de verificación, cambiar
• Avatar
• Grupo de entrada
• Contenedores: absoluto, fila, columna
• Hipervínculo, imagen, texto y título.
• Lista
• Botón, botón de enlace
• Tarjeta
• Barra de navegación
• Grupo Radiofónico

5 pasos para generar su código Blazor

Paso 1: Inicie App Builder

Continuando, para generar su código Blazor con App Builder, primero debe iniciar nuestra plataforma iniciando sesión directamente en su perfil de App Builder. Si elige la segunda opción, será redirigido a la pantalla de inicio desde donde podrá acceder a cada uno de los tres productos principales: prototipos, pruebas de usabilidad y App Builder en la pestaña Aplicaciones.

Paso 2: Iniciar su aplicación Blazor: elija entre aplicaciones de muestra, diseños predeterminados o importar diseños 

Desde la pantalla de inicio App Builder, puede iniciar una nueva aplicación, obtener una vista previa o editar una existente. A través del menú contextual, también se puede cambiar el nombre, duplicar o archivar cada aplicación existente.

Hay cuatro formas de iniciar su nueva aplicación Blazor:

• Crear a partir de un diseño Sketch o Figma existente
• Utilice aplicaciones de muestra fáciles de modificar
• Inicie una nueva aplicación usando diseños básicos predeterminados
• Empezar desde cero usando la opción en blanco

Una vez en App Builder, puede cambiar fácilmente entre sus aplicaciones activas o volver a su espacio de trabajo desde el menú lateral de la aplicación en el momento del diseño sin salir de la plataforma.

Paso 3: seleccione Blazor WASM o Blazor Server 

Después de finalizar el diseño de su aplicación Blazor y antes de obtener una vista previa de su código, preste atención al menú desplegable del selector de plataforma, ubicado en la barra de navegación justo al lado de los botones de acción Publicar en GitHub y Vista previa. Elija la opción Blazor WASM o Servidor para generar código para Blazor. El selector recuerda su elección y la próxima vez que vaya a App Builder tendrá el marco deseado preseleccionado para usted.

Paso 4: Vista previa de su código Blazor 

¿Cómo obtener una vista previa del código de la aplicación Blazor que se generará? Simplemente active la vista de código y véala al lado del diseño. Está en modo de sólo lectura pero le ayudará a revisar la calidad del código producido. A continuación, haga clic en vista previa y verá la vista previa de su código, donde podrá ver que se trata de una página de Razor. Verá todas las definiciones de control, divs y más y, por supuesto, su etiqueta de código Blazor, CSS para el diseño de una página en particular que esté viendo.

Paso 5: publicar en GitHub o guardar como archivo zip 

Si vuelve a "editar", puede elegir publicarlo en GitHub o descargarlo como un archivo zip.

La vista de código le permite ver HTML, CSS y TS por separado. Y esto ahorra tiempo al ahorrarle el esfuerzo de escribir marcado y CSS para crear algo con píxeles perfectos. Puede consultar nuestra documentación completa para desarrolladores y consultar el soporte App Builder para Blazor para obtener más detalles.

App Builder muestra una aplicación web en ejecución en la superficie de diseño y en la ventana de vista previa. Esto significa que el código Blazor subyacente y el modelo de aplicación se actualizarán en tiempo real a medida que aplique cambios a la aplicación en la superficie de diseño. Puede ver el código de la aplicación Blazor generado cuando lo desee en la ventana de vista previa. Además, puede descargar la aplicación generada en cualquier momento como un repositorio de código de aplicación completo, que luego puede abrir en un editor de código de su elección. Luego, puede crear y ejecutar la aplicación que ha diseñado utilizando App Builder localmente en su máquina y puede realizar modificaciones adicionales al código generado. Sin embargo, tenga en cuenta que una vez descargado el código de su aplicación Blazor, los cambios realizados localmente no se reflejarán en su espacio de usuario App Builder.

Sin embargo, sabemos que a muchos de vosotros os gusta Angular. Y si este es su marco, también puede usar nuestro App Builder para generar código listo para producción en Angular.

¿Cómo utilizar las aplicaciones Blazor de App Builder en Visual Studio?

Una vez que descargue la aplicación, continúe y abra el archivo .csproj. Una de las primeras cosas que notará es que estamos generando aplicaciones Blazor WebAssembly/Server. Las aplicaciones WASM se ejecutarán directamente en el navegador en un tiempo de ejecución .NET basado en WebAssembly. Las aplicaciones Blazor WebAssembly funcionan de manera similar a los marcos de JavaScript front-end como Angular o React.

Nota: El tiempo de ejecución de .NET se descarga con la aplicación junto con el ensamblado de la aplicación y las dependencias necesarias. No se requieren complementos ni extensiones del navegador.

Ahora puedes presionar F5 y listo. Está ejecutando su aplicación localmente. Continúe y agregue lo que ha diseñado con App Builder.

Si desea mantenerse al día con las últimas versiones y actualizaciones de nuestro App Builder WYSIWYG y Ignite UI for Blazor u otros marcos importantes, esté atento a las publicaciones de nuestro blog y filtre los artículos por etiquetas.