Save 37% off PRO during our Black Friday Sale! »

Introducción a BLAZOR

Introducción a BLAZOR

Introducción a Blazor. Tecnologia .NET

Video en: https://www.youtube.com/watch?v=2ZAD9QWzFVs

5087adcbce3dd0ff6155daa8f0948a95?s=128

Jose María Flores Zazo

February 25, 2021
Tweet

Transcript

  1. None
  2. Introducción a BLAZOR

  3. Bienvenidos Acerca de… ¡Hola! Gracias por entrar en “Introducción a

    BLAZOR”. Espero poder aportarte los conocimientos mínimos y necesarios para que puedas ponerlo en práctica. Jose María Flores Zazo, autor
  4. Resumen

  5. Índice Resumen Sección 1 Introducción Sección 2 Desarrolla UIs de

    Cliente
  6. Índice Resumen del curso Sección 4 Demo: Hello World! Sección

    3 Hello World! Sección 5 Cliente VS Servidor
  7. Índice Resumen del curso Sección 6 Demo: Javascript Interops

  8. Requisitos previos y herramientas Resumen del curso 01 Conocimientos básicos

    sobre CODIFICACIÓN de aplicaciones en C# 02 Entorno de desarrollo Visual Studio .NET, Visual Studio Code o CLI
  9. ¡Comencemos!

  10. Sección 1 Introducción

  11. Introducción Sección 1 BLAZOR es un framework que se puede

    utilizar para generar aplicaciones tanto del lado del cliente como del servidor. Y tal y como he resaltado, este framework nos permitirá usar C# en vez de JAVASCRIPT. El objetivo principal del curso es que conozca la diferencia entre BLAZOR del lado servidor y del lado cliente con respecto a otras tecnologías de SPA, entender qué es BLAZOR y por qué debería usarlo. Para alcanzar ese objetivo, comenzaré primero hablando de qué es BLAZOR y cómo funciona. A continuación aprenderás por qué debe usar BLAZOR. Después prepararemos un entorno para crear tu primera aplicación BLAZOR. Y finalmente las diferencias entre el lado cliente y lado servidor mediante un ejemplo y algo de teoría. Usa C# en vez de JAVASCRIPT – FRAMEWORK
  12. Mínima historia Sección 1 Cuando comencemos a ver el funcionamiento

    de BLAZOR, entenderéis por qué no es el nuevo Silverlight o el nuevo Java Applet. Estas herramientas del pasado, eran propietarias y nacieron por un impulso de Microsoft o Java, en cambio esta vez BLAZOR se suma a un proyecto llamado WebAssembly. Según avancemos iremos viendo su funcionamiento. BLAZOR no es el nuevo SILVERLIGHT / JAVA APPLET – REMINISCENCIAS DEL PASADO
  13. Focalizando en BLAZOR Sección 1 Microsoft esta dedicando mucho esfuerzo

    y BLAZOR, tal y como se aprecia en que este año la .NET Conf exclusivamente está centrada en Blazor: Focus on Blazor. https://www.youtube.com/playlist?list=PLdo4fOcmZ0oWlP1Qpzg7Dwzxr298ewdUQ .NET Conf 2020 – FOCUS ON BLAZOR
  14. Predicción a futuro Sección 1 No tengo ninguna bola mágica,

    pero los movimientos de Microsoft son claros al respecto, unificar todos los entes para ser gobernados con .Net 5 y BLAZOR era una pieza que faltaba. .NET 5 – NOT MORE .NET FRAMEWORK OR CORE
  15. Sección 2 Desarrolla UIs de cliente

  16. Desarrolla UIs de cliente 1/3 Sección 2 Con BLAZOR podremos

    cerrar interfaces de cliente enriquecidas y atractivas mediante C#. Pero antes de sumergirnos en BLAZOR, vamos a ver como se desarrolla generalmente en Web. Habitualmente en web lo que se hace es interactuar con el Backend, desarrollado en JAVA, C#, … pero no en JAVASCRIPT, a través de la aplicación cliente . Hasta ahora se suelen usar unos framework/librerias como Angular, React.JS, Vue.JS, etc. que son magníficos y ejecutan JAVASCRIPT, pero están totalmente desconectados del lenguaje que se usa en el Backend. Usa BLAZOR para crear UI – C#
  17. Desarrolla UIs de cliente 2/3 Sección 2 Servidor Todos corren

    bajo JavaScript
  18. Desarrolla UIs de cliente 3/3 Sección 2 Alguno de los

    framework que se usan en Frontend, no tienen una curva de aprendizaje ni rápida ni sencilla. Esto nos impide reutilizar los conocimientos que puede disponer de los lenguajes que usamos en el Backend. BLAZOR, desde mi punto de vista, podrá separar la brecha ficticia entre desarrollador de Backend y Frontend, y por tanto los mal conocidos como Full Stack no vamos a tener que perder el tiempo aprendiendo diferentes framework, nos centraremos más en ganar más habilidad con un solo lenguaje. Solo con esto seguro que estás pensado que es una buena decisión aprender BLAZOR. Y quizá los más veteranos están pensado en los applet de JAVA o Silverlight, no os confundáis, no se trata de eso, ya lo verás más adelante.
  19. Ejecuta en el Navegador 1/2 Sección 2 Con BLAZOR y

    mediante el WebAssambly ya no vas a volver a ejecutar el sandbox de JAVASCRIPT en tu navegador, aunque más adelante veremos como pueden coexistir en una misma WebApp ambos. Ejecuta cualquier CODIGO en el NAVEGADOR – RAZOR
  20. Ejecuta en el Navegador 2/2 Sección 2 WebAssembly, abreviado wasm,

    es un formato de código binario portable (byecode), para la ejecución íntegra en navegador de scripts de lado del cliente. Se trata de un lenguaje de bajo nivel, diseñado inicialmente como formato destino en la compilación desde C y C++. Definición de la Wikipedia. Todo gracias a WebAssembly – W3C
  21. ¿Por qué usar BLAZOR? Sección 2 WebAssembly está soportado por

    la mayoría de navegadores modernos 01 WebAssembly Usa C# y las herramientas asociadas al ecosistema 02 C# Permite la reutilización de librerías 03 Reusable Logra un rendimiento cercano a un proceso nativo 04 Rendimiento
  22. BLAZOR APP ¿Qué es BLAZOR? 1/3 Sección 2 NavMenu.razor Counter.razor

  23. ¿Qué es BLAZOR? 2/3 Sección 2 BLAZOR APP .NET Estándar

    Libraries .NET Runtime (.wasm)
  24. ¿Qué es BLAZOR? 3/3 Sección 2 BLAZOR App DLLs .Net

    Runtime (mono.wasm) JavaScript Runtime Web Sockets, Web RTC, Canvas, WebGL, DOM, File Storage, Media, …
  25. Un dato interesante Sección 2

  26. Sección 3 Hello World!

  27. ¿Cómo desarrollar una aplicación? 1/2 Sección 3 https://blazor.net

  28. ¿Cómo desarrollar una aplicación? 2/2 Sección 3 1 Instalar .NET

    Core SDK (v3 o superior) A1 ASP.NET & Web Development A2 File > New Project B1 Añadir extensiones B2 dotnet new blazorwasm –o MyBlazorApp C1 dotnet new blazorwasm –o MyBlazorApp C2 cd MyBlazorApp dotnet run 2 Instalar herramienta Visual Studio VS Code .Net Core CLI
  29. Sección 4 Demo: Hello World!

  30. Demo Sección 4

  31. Sección 5 Cliente VS Servidor

  32. Cliente AKA WebAssembly 1/3 Sección 5 BLAZOR App • Se

    descarga todo en el navegador: HTML, CSS, JS, aplicación (.Net Standar DLLs) y .Net Runtimes. • Corre sobre el WebAssembly. • Para funcionar no necesita conexión contra el servidor. Pero puedes conectar tu App a un Backend. • Puedes crear una App Blazor con Azure Storage Static Website. • Puedes usar CDN. Resumen de Características
  33. Cliente AKA WebAssembly 2/3 Sección 5 BLAZOR App • Rendimiento

    casi-nativo. • Se puede usar de forma off-line. • No necesita un servidor (dispone de la tecnología para servir ficheros estáticos). • Puedes comunicarte con el servidor con la misma filosofía que realizabas en una aplicación JS. • Usa los recursos de la parte del cliente. • Corre en todos los navegadores modernos. Resumen de Ventajas
  34. Cliente AKA WebAssembly 2/3 Sección 5 BLAZOR App • Esta

    restringido por el marco en el que se ejecuta, es decir, el navegador. • El navegador realiza todo el trabajo. • Debe descargar más cosas, por tanto, tarda más en cargar. • Los secretos estarán en la parte del cliente, por tanto, la seguridad es ínfima. • Y obligatoriamente necesitas WebAssembly. Resumen de Desventajas
  35. Servidor AKA BLAZOR Server 1/3 Sección 5 Interfaz de Usuario

    • Usado para escenarios “thin client”, es decir, aplicaciones livianas con arquitectura cliente-servidor donde el procesado principal de tareas la realiza el servidor. • Conexión Real-Time WebSocket. • Dispones de acceso a todo el framework de ASP.NET: Entity Framework, API, ... Y la seguridad, tus secretos estarán en la parte Servidor. Resumen de Características SignalR
  36. Servidor AKA BLAZOR Server 2/3 Sección 5 Interfaz de Usuario

    • Poco que descargar, más rápido en cargar. • Acceso completo al framework de ASP.NET. • No es necesario WebAssembly. • Seguridad basada en el servidor. Resumen de Ventajas SignalR
  37. Servidor AKA BLAZOR Server 3/3 Sección 5 Interfaz de Usuario

    • No existe soporte Off-Line. • Necesitas un servidor ASP.NET Core. • Ante una alta latencia, una lenta respuesta de la aplicación. Resumen de Desventajas SignalR
  38. ¿Qué usar … Sección 5 BLAZOR WebAssembly BLAZOR Server Cuando

    necesitas un rendimiento casi nativo Cuando necesitas conectar con recursos del servidor Cuando no se puede confiar en WebAssembly Cuando necesitas trabajar off-line Cuando no puedes o no quieres correr un servidor ASP.NET Core Cuando quieres crear aplicaciones web con C# rápidas e interactivas
  39. Sección 6 Demo: Javascript Interop

  40. Demo Sección 6

  41. Vuestro turno Q&A Preguntas…

  42. ¡Gracias! Puedes encontrarme buscando por jmfloreszazo en