¿Qué es la generación de código Blazor? ¿Cómo puedes aprovecharlo con un clic usando App Builder de código bajo? Encuentre las respuestas en esta guía paso a paso.
Zdravko Kolev
8min de lectura
Ú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.
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.
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.
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:
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:
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:
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.
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.
La última versión de App Builder trajo mejoras interesantes, siendo la más esperada React Code Generation. Y esta guía paso a paso le mostrará cómo generar código React listo para producción con unos pocos clics.
Este artículo explora tres aplicaciones de muestra Blazor completamente funcionales que le ayudarán a empezar con facilidad. Agregue algunas personalizaciones y se convertirán en suyas.
Lea esta guía paso a paso para aprender cómo generar código listo para producción en Angular con un solo clic y con poco código.
