Hispanopedia Wiki
Articulo de referencia

Blazer

Blazor es un framework web gratuito y de código abierto que permite a los desarrolladores crear interfaces de usuario web (UI) basadas en componentes, utilizando C# y HTML . [ 1...

Hispanopedia WikiContenido en espanolLectura gratuita

Blazor es un framework web gratuito y de código abierto que permite a los desarrolladores crear interfaces de usuario web (UI) basadas en componentes, utilizando C# y HTML . [ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ] Está siendo desarrollado por Microsoft , como parte del framework de aplicaciones web ASP.NET Core .

Blazor se puede utilizar para desarrollar aplicaciones de una sola página , móviles o renderizadas en el servidor utilizando tecnologías .NET.

Historia

En 2017, en NDC Oslo, Steve Sanderson, ingeniero de software de Microsoft, presentó [ 6 ] un marco de trabajo experimental para aplicaciones web del lado del cliente para .NET que denominó "Blazor". La demostración incluyó una aplicación interactiva que se ejecutaba en el navegador mediante WebAssembly y una experiencia de desarrollo básica en Visual Studio. Sanderson demostró cómo crear componentes interactivos utilizando C# y la sintaxis Razor . Posteriormente, la aplicación se compiló en ensamblados .NET que se ejecutaban en un entorno de ejecución .NET ligero de código abierto de terceros, llamado DotNetAnywhere, que había sido compilado a WebAssembly.

El nombre "Blazor", como explica Steve Sanderson, es una combinación de las palabras "browser" (navegador) y "razor" (navaja) (debido a la sintaxis Razor que se utiliza).

Blazor fue admitido como un proyecto oficial de código abierto por Microsoft, y en 2018, como parte de .NET Core 3.0, se lanzó Blazor Server al público. [ 7 ] Permitió aplicaciones web interactivas controladas por el servidor que actualizan el navegador del cliente a través de WebSockets . Poco después, se lanzó Blazor WebAssembly. A diferencia del prototipo, utilizó el entorno de ejecución Mono .NET en WebAssembly. Este es el mismo entorno de ejecución que se utiliza para desarrollar aplicaciones móviles con .NET MAUI (anteriormente Xamarin ).

El código fuente de Blazor se encontraba inicialmente en su propio repositorio en GitHub, hasta que se integró en el monorepo de ASP.NET Core . Desde entonces, el desarrollo se ha llevado a cabo desde allí.

Con el lanzamiento de .NET 5, Blazor dejó de funcionar en Internet Explorer y en la versión anterior de Microsoft Edge . [ 8 ]

En 2023, con .NET 8, Blazor en el servidor experimentó algunos cambios fundamentales [ 9 ] para habilitar páginas renderizadas en el servidor (SSR) que no son fundamentalmente interactivas, lo que permitió que Blazor se utilizara como alternativa a MVC Razor Pages . Con este cambio, los desarrolladores pueden optar por que un componente (o página) sea interactivo y que se ejecute en el servidor o en el navegador mediante WebAssembly. Estos se denominan "modos de renderizado" interactivos.

Componentes

Los componentes se denominan formalmente componentes Razor .

Un componente Razor se compone principalmente de HTML mezclado con la sintaxis de plantillas Razor, lo que permite el uso en línea de C# para influir en la representación gráfica.

El modelo de componentes de Blazor garantiza que el marcado renderizado se actualice cuando cambia el estado del componente, normalmente en respuesta a una acción del usuario.

Si bien tanto el código HTML como el código C# pueden ubicarse en el mismo .razorarchivo, también es posible tener un archivo de código subyacente independiente con una clase parcial.

Los componentes se compilan en clases .NET. El marcado HTML y Razor de un componente se traduce en código que construye un árbol de renderizado que luego controla el renderizado propiamente dicho.

Ejemplo

El siguiente ejemplo muestra cómo implementar un contador simple que se puede incrementar haciendo clic en un botón:

< h1 > Contador </ h1 ><p> Recuento : @count </p>​​< button @ onclick = " Increment " > Incrementar </button> @código { privado entero contador = 0; privado void Incremento() { recuento++; } }

Modelos de alojamiento

Las aplicaciones Blazor se pueden alojar de varias maneras. Estos son los modelos de alojamiento disponibles a partir de .NET 8.

Aplicación web Blazor (Servidor)

Una aplicación Blazor alojada en un servidor, como parte de una aplicación ASP.NET Core.

Renderizado estático del lado del servidor (SSR)

Por defecto, el servidor renderiza los componentes como HTML estático, sin interactividad. La interactividad se puede habilitar para cada componente configurando un modo de renderizado.

Esto es equivalente a cómo se renderizan las vistas MVC y las páginas Razor.

Modos de renderizado

Fuente: [ 10 ]

En .NET 8, Blazor introdujo el concepto de modos de renderizado, que configuran si los componentes de Razor son interactivos y qué factores determinan esa interactividad.

El modo de renderizado se hereda dentro de la jerarquía de componentes, desde su componente padre de nivel superior que tiene un modo de renderizado predefinido. Este modo no puede ser anulado por los componentes hijos, a menos que su modo de renderizado sea el predeterminado "Servidor estático".

  • Servidor estático : El componente se renderiza de forma estática en el servidor sin interactividad. Esta es la opción predeterminada.
  • Servidor interactivo : el componente se ejecuta en el servidor en modo interactivo. La interactividad está controlada por el servidor y los cambios se envían al cliente a través de WebSocket , utilizando SignalR .
  • WebAssembly interactivo : el componente se ejecuta en modo interactivo en el navegador mediante WebAssembly.
  • Interactive Auto : Inicialmente, el componente se cargará en el modo de renderizado Interactive Server mientras se descarga el paquete Blazor. En visitas posteriores, se utilizará Interactive WebAssembly en el cliente.

Prerrenderizado

Los componentes interactivos se pre-renderizan en el servidor antes de materializarse en el cliente y activarse la interactividad. Este comportamiento está activado por defecto, pero se puede desactivar.

Navegación mejorada

Esta función hace que la navegación en un sitio estático sea mucho más fluida, de una manera que se asemeja a una aplicación de una sola página (SPA).

Al navegar de una página estática a otra, la aplicación intercepta la navegación, recuperando únicamente el contenido de la página de destino y aplicando solo los cambios al DOM . De esta forma, la página no parpadea como suele ocurrir al recargarse por completo al navegar a otra página.

WebAssembly (independiente)

Se trata de una aplicación WebAssembly interactiva e independiente que se ejecuta en el navegador del cliente.

Al acceder a la aplicación en un navegador, el paquete de la aplicación se descarga, se carga y se ejecuta dentro del entorno aislado del navegador.

Una aplicación WebAssembly también se puede convertir en una aplicación web progresiva (PWA).

Antes de .NET 8, existía una plantilla de proyecto en la que una aplicación Blazor WebAssembly se alojaba dentro de una aplicación ASP.NET Core que contenía API web. Esta plantilla se eliminó en favor de la plantilla de proyecto de aplicación web Blazor, aunque la funcionalidad se mantiene.

Híbrido

Permite que las aplicaciones Blazor se ejecuten dentro de una aplicación nativa usando un WebView. [ 11 ] La representación se realiza en el proceso de alojamiento, sin un servidor web.

Las aplicaciones híbridas pueden alojarse en una aplicación Windows Presentation Foundation o WinForms .

Este enfoque se utiliza para crear aplicaciones móviles nativas con Blazor, utilizando .NET MAUI .

Servidor (heredado)

El objetivo era habilitar componentes interactivos controlados por el servidor, enviando los cambios al cliente mediante WebSockets.

Se renderizó un componente dentro de una página MVC Razor.

También permitió el prerrenderizado de componentes WebAssembly.

Este modelo de alojamiento se conocía formalmente como "Blazor Server".

Se ha dejado de utilizar en favor de la aplicación web Blazor.

Véase también

Referencias

  1. ↑ Strahl, Rick (31 de julio de 2018). "Web Assembly y Blazor: Reensamblando la Web" . Blog de Rick Strahl . Publicado por el autor . Archivado del original el 22 de octubre de 2018.
  2. ↑ Tomassetti, Federico (4 de septiembre de 2018). "Blazor: .NET en el navegador" . tomassetti.me . Strumenta. Archivado del original el 22 de octubre de 2018.
  3. ↑ James, Mike (12 de febrero de 2018). "Blazor .NET en el navegador" . i-programmer.info . Publicado por el propio autor . Archivado del original el 18 de febrero de 2018.
  4. ↑ Miller, Jonathan (septiembre de 2018). "C# en el navegador con Blazor" . Revista MSDN . 33 (9). Archivado del original el 22 de octubre de 2018.
  5. ↑ Roth, Daniel (22 de marzo de 2018). "Comience a crear aplicaciones web .NET que se ejecuten en el navegador con Blazor" . Blog de ASP.NET . Microsoft . Archivado del original el 30 de abril de 2019.
  6. ↑ "Las aplicaciones web no pueden hacer *eso*, ¿verdad? - Steve Sanderson" . YouTube . 10 de julio de 2017. Consultado el 28 de febrero de 2024 .
  7. ↑ wadepickett. "Novedades de ASP.NET Core 3.0" . learn.microsoft.com . Consultado el 18 de septiembre de 2025 .
  8. ↑ Roth, Daniel (30 de septiembre de 2020). "Actualización del soporte de navegador Blazor para .NET 5" . Repositorio dotnet/aspnetcore . Microsoft – vía GitHub.com .
  9. ↑ "Fundamentos de ASP.NET Core Blazor" . 2 de diciembre de 2024. Consultado el 28 de febrero de 2024 .
  10. ↑ "Modos de renderizado de ASP.NET Core Blazor" . 9 de febrero de 2024. Consultado el 26 de marzo de 2024 .
  11. ↑ "ASP.NET Core Blazor Hybrid" . Consultado el 14 de noviembre de 2023 .

Lecturas adicionales

  • Engström, Jimmy (2021). Desarrollo web con Blazor: Una guía práctica para desarrolladores .NET para crear interfaces de usuario interactivas con C# . Packt Publishing. ISBN 978-1800208728.
  • Himschoot, Peter (2021). Microsoft Blazor: Creación de aplicaciones web en .NET 6 y versiones posteriores . Apress. ISBN 978-1484278444.
  • Wright, Toi (2021). Blazor WebAssembly by Example: A project-based guide to building web apps with .NET, Blazor WebAssembly, and C# . Packt Publishing. ISBN 978-1800567511.
  • Sainty, Chris (2022). Blazor en acción . Manning Publications. ISBN 978-1617298646.
  • Sitio web oficialEdita esto en Wikidata
  • ASP.NET Core en GitHub
  • Escuela Blazor - Documentación de la comunidad Blazor.
  • Universidad Blazor : documentación de Blazor procedente de una fuente secundaria e independiente.
Obtenido de " https://en.wikipedia.org/w/index.php?title=Blazor&oldid=1338160252 "