Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (13)
Similar a Creación de aplicaciones híbridas multiplataforma con .NET MAUI y Blazor
Similar a Creación de aplicaciones híbridas multiplataforma con .NET MAUI y Blazor (20)
Más de Luis775803
Más de Luis775803 (20)
Último
Último (20)
Creación de aplicaciones híbridas multiplataforma con .NET MAUI y Blazor
- 2. Luis Beltrán • Microsoft MVP (AI, Developer Technologies, Azure) • Investigador en Tomás Bata University in Zlín • Docente en Tecnológico Nacional de México en Celaya @darkicebeam luis@luisbeltran.mx luisbeltran.mx
- 7. Blazor
- 8. Blazor • Un framework web de .NET que se ejecuta en el navegador • Usa C#/Razor para crear • Se ejecuta en un runtime de .NET implementado en WebAssembly • Browser + Razor = Blazor
- 9. 1. Los archivos de código de C# y Razor se compilan en ensamblados .NET
- 10. 2. Los ensamblados y el runtime de .NET se descargan en el explorador
- 11. 3. Blazor utiliza JavaScript para arrancar el runtime de .NET (Mono) cargando las referencias de ensamblado necesarias
- 12. 3. Blazor utiliza JavaScript para arrancar el runtime de .NET (Mono) cargando las referencias de ensamblado necesarias
- 13. 4. Blazor permite la manipulación DOM/llamadas a la API del navegador desde el runtime de .NET a través de la interoperabilidad de JavaScript C# Render Tree Blazor JavaScript Change DOM DOM Event Trigger C# UI Differences Blazor JavaScript Change DOM DOM Process Event
- 14. Blazor Hybrid
- 16. Aplicaciones híbridas con .NET y Blazor
- 18. Requisitos • Visual Studio 2022 Preview con el workload de .NET MAUI instalado • Microsoft Edge WebView2 para ejecutar una app nativa en Windows. No se necesita si se usan los emuladores de Visual Studio. • Habilitar aceleración de hardware (si se usa emulador de Android)
- 20. Estructura de la solución
- 21. MainPage.xaml
- 22. MauiProgram.cs
- 27. Beneficios • Con Blazor, podemos usar .NET y C# para crear tanto la interfaz de usuario web front-end como la lógica back-end • Podemos usar el mismo conjunto de habilidades de C# tanto para la UI como para la lógica de back-end, lo que acelerará el desarrollo y reducirá el costo. • Podemos desarrollar aplicaciones multiplataforma nativas con .NET MAUI para Windows, Android, iOS, macOS, Web. • Código compartido y diseño de interfaz de usuario coherente. • Podemos utilizar un solo proyecto que será fácil de mantener y trabajar • Podemos usar todas las bibliotecas .NET y características de C# • Tecnología moderna y fuerte apoyo de la comunidad
- 28. Soporte • .NET MAUI • iOS 10 o superior • Android 5 (API 21) o superior • macOS 10.15 o superior (Mac Catalyst) • Windows 10 version 1809 o superior (Windows 11 inclusive) • .NET MAUI Blazor Apps • iOS 14 o superior • Android 7 (API 24) o superior • macOS 11 o superior (Mac Catalyst)
- 29. Q & A
Notas del editor
- .NET Multi-platform App UI (.NET MAUI) Interfaz de usuario para aplicación multiplataforma en .NET es un framework multiplataforma para crear aplicaciones móviles y de escritorio nativas con C# y XAML. integrados en .NET a partir de .NET 6 y posteriores. Utilizando .NET MAUI, puede desarrollar aplicaciones que se pueden ejecutar en Android, iOS, macOS y Windows desde una única base de código compartida.
- Todo comienza con el código de tu aplicación. Aquí es donde quieres pasar todo tu tiempo para que sea productivo. Esta es tu lógica de negocios. Para desarrollar se hace uso de un par de capas. La primera capa de la tecnología .NET MAUI. la segunda son los SDK de la plataforma nativa. Esto es lo que Google, Apple y Microsoft envían en sus plataformas para que tu puedas trabajar. Entonces, ¿cómo pasamos del código de nuestra aplicación a esas plataformas y ejecutamos en los dispositivos? Primero, necesitamos algo que pueda ejecutar código .NET, el Runtime de .NET. Para iOS, Mac OS y Android esto todavía usa Mono y usa CoreCLR en Windows A continuación, necesitamos una API .NET común contra la que podamos escribir nuestro código. Y esa es la Biblioteca de clases base o BCL. Lo nuevo en .NET 6 es que todos los runtimes de la aplicación tales como Mono y CoreCLR usan el mismo BCL que acabo de mencionar. Para usar .NET contra SDK de plataforma nativa, necesitamos una representación .NET de los SDKs. Hacemos esto vinculando una API .NET y una implementación a la API nativa. Cuando llama a un método nativo desde C#, es igual que si lo hubieras hecho desde Objective-C, Swift, Java, Kotlin, C++ u otro. La capa final es .NET MAUI. .NET MAUI proporciona una rica biblioteca de controles, diseños y servicios que funcionan en todas las plataformas admitidas, por lo que debe solo dominar una API para obtener todas las aplicaciones nativas con .NET MAUI.
- Toda esa complejidad se entrega en un solo framework que te da acceso a todo esto. Así que si aprendes a trabajar con .NET MAUI, puede concentrarse en lo único que es lo más importante: su código de aplicación.
- .NET MAUI es una tecnología open-source y la evolución de Xamarin.Forms, con escenarios extendidos de móvil a escritorio, con controles de interfaz de usuario reconstruidos desde cero para el rendimiento y extensibilidad. Si ya has usado Xamarin. Forms para crear interfaces de usuario multiplataforma, notará muchos similitudes con .NET MAUI.
- Blazor es una característica de ASP.NET que permite crear interfaces de usuario web interactivas con C# en lugar de JavaScript. Las aplicaciones blazor se componen de componentes de interfaz de usuario web reutilizables implementados con C#, HTML y CSS. Tanto el código cliente como el servidor están escritos en C#, lo que le permite compartir código y bibliotecas. Blazor utiliza estándares web abiertos sin plug-ins ni transpilación de código. La transpilación es el proceso de convertir código escrito en un lenguaje de programación a otro. La transpilación a JavaScript es un enfoque común para permitir que los lenguajes se ejecuten en el navegador, pero a menudo proporciona una funcionalidad limitada. Blazor funciona en todos los navegadores web modernos, incluidos los navegadores móviles. Las aplicaciones blazor pueden usar bibliotecas .NET existentes, gracias a .NET Standard .NET Standard permite usar el mismo código y bibliotecas en el servidor, en el explorador o en cualquier lugar donde se escriba código .NET. Why? Full Stack development using C# and .NET .NET advantages: High Performance Scalability Maintainability Cross Platform Visual Studio
- Si eres un desarrollador web, tal vez no te entusiasme aprender un nuevo lenguaje de marcado solo para desarrollar una aplicación móvil. Afortunadamente, Blazor Hybrid es una forma de escribir aplicaciones móviles usando la misma sintaxis que los otros proyectos de Blazor.
- Blazor Hybrid permite crear aplicaciones cliente nativas con los componentes de interfaz de usuario web de Blazor existentes. Comparte los mismos componentes de Blazor en dispositivos móviles, de escritorio y web al tiempo que aprovechas el acceso completo a las capacidades nativas del cliente. Usa Blazor Hybrid para crear aplicaciones multiplataforma con .NET MAUI o para modernizar las aplicaciones existentes de WPF y Windows Forms.
- En una aplicación Blazor Hybrid, los componentes de Razor se ejecutan de forma nativa en el dispositivo. Los componentes se representan en un control Web View incrustado a través de un canal de interoperabilidad local. Los componentes no se ejecutan en el explorador y WebAssembly no está involucrado. Los componentes de Razor cargan y ejecutan código rápidamente, y los componentes tienen acceso completo a las capacidades nativas del dispositivo a través de la plataforma .NET.
- La compatibilidad con Blazor Hybrid está integrada en.NET MAUI. .NET MAUI Blazor permite que tanto la interfaz nativa y web puedan pueden coexistir en la misma app y en una sola vista. .NET MAUI incluye el control BlazorWebView que permite representar componentes de Razor en una vista Web incrustada. Al usar .NET MAUI y Blazor juntos, puede reutilizar un conjunto de componentes de interfaz de usuario web en dispositivos móviles, de escritorio y web.
- WebView2 El control WebView2 de Microsoft Edge permite tecnologías web (HTML, CSS y JavaScript) integradas en aplicaciones nativas. El control WebView2 usa Microsoft Edge (Chromium) como motor de renderizado para mostrar el contenido web en aplicaciones nativas. Con WebView2, el código web se puede incrustar en diferentes partes de la aplicación nativa o se puede usar una única instancia de WebView para empaquetar la totalidad de la aplicación.
- /Pages Páginas o características basadas en componentes de Razor que se representarán dentro de un componente WebView. /Platforms Archivos específicos de la plataforma, incluidos recursos, configuraciones, lógica empresarial nativa o componentes de interfaz de usuario nativos. /Resources Recursos globales de aplicaciones y archivos estáticos. /Shared Componentes comunes de Razor y componentes de diseño utilizados en Blazor WebViews. /wwwroot Recursos web utilizados en Blazor Webviews. Ej: CSS, fuentes e imágenes. _imports.razor Sentencias Global Using para componentes de razor y páginas .App.xaml(.cs) La vista de aplicación de nivel raíz .Main.razor La vista y el enrutador Blazor a nivel de raíz .MainPage.xaml La vista predeterminada representada por la raíz (App.xaml) .Startup.cs Punto de entrada, arranque y configuración de la aplicación
- BlazorWebView utiliza un parámetro HostPage para identificar la página HTML, que arrancará la aplicación Blazor. En index.html, encontrará el documento raíz que aloja la aplicación Blazor dentro de la vista. A diferencia de Blazor WebAssembly, este archivo html inicializa Blazor usando blazor.webview.js en lugar de blazor.webassembly.js. Blazor no está usando WebAssembly, sino el runtime de .NET de la aplicación host.
- La página Counter es un componente simple decorado con la directiva page. Este componente muestra la composición básica de un componente de Razor (también conocido como Blazor), incluido el enrutamiento, el enlace de datos y el enlace/control de eventos. El componente de contador utiliza un botón HTML básico para incrementar un campo de contador que se muestra dentro de una etiqueta de párrafo. Las actualizaciones del DOM de BlazorWebView son manejadas por el marco de Blazor a través del enlace de datos.