Material utilizado en el evento CloudFirst Campus Oct 2020
Blazor es un framework que ejecuta código C# en el ordenador. ¿Pero qué tan viable es esta tecnología en comparación a otras opciones más estables?
Pequeña comparación de VUE y Blazor.
4. Vicente G. Guzmán Lucio
Project Leader
@LucioMSP
Blazor es una plataforma de trabajo (framework) para la creación de interfaces de
usuario web interactivas del lado cliente con .NET
7. Vicente G. Guzmán Lucio
Project Leader
@LucioMSP
Creando una App en Vue
vue create hello-vguzman
cd hello-vguzman
npm run serve
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
npm install -g @vue/cli
13. Reducir la dificultad inicial con la que se encuentran los profesionales .NET a la hora de empezar a construir aplicaciones SPA.
Seguir utilizando el fantástico tooling existente en el ecosistema .NET.
Aprovechar y reutilizar código existente también en las capas de presentación.
Compartir directamente código entre cliente y servidor.
Y por supuesto, las derivadas al utilizar un lenguaje de primer nivel como C#.
¿En qué se diferencia Blazor de Vue?
14. Pero si uso C# para programar mi SPA,
¿ya no puedo usar bibliotecas o código JS existente?
Desde código Blazor (C#) podemos invocar funciones JS.
Desde código JS podemos invocar métodos Blazor (C#)
18. Vicente G. Guzmán Lucio
Project Leader
@LucioMSP
¡GRACIAS!
Vicente G. Guzmán L.
Project Leader
@LucioMSP
Notas del editor
Muchos de nosotros ya conocemos o por lo menos hemos escuchado hablar sobre Blazor; el cual es un framework que ejecuta código C# en el ordenador. ¿Pero qué tan viable es esta tecnología en comparación a otras opciones más estables?
Antes de ir en materia, hagamos un pequeño resumen sobre que es Blazor y que es Vue.
Blazor es una tecnología hecha por Microsoft para la creación de aplicaciones webs usando C# en lugar de Javascript
Cuando iniciamos una app en Blazor, tendremos el mínimo de paquetes necesarios para poder empezar con una aplicación.
Vue fue desarrollado por Evan You, un ex empleado de Google, la cual lanzada en el 2014 y se cenra en la creación de aplicaciones webs usando Javascript .
Vue está diseñado desde el inicio para una programación progresiva, es decir, utiliza los mínimos recursos para la ejecución del proyecto y permite una integración limpia y modular de cualquier componente y funcionalidad que se requiera.
Al igual que Angular y React, Vue es un marco MVVM de código abierto para crear interfaces de usuario y SPA.
Vue impulsa sitios tan famosos como 9gag, Alibaba, Adobe y es el segundo framework más querido después de React.
Ya que hemos hablado sobre Blazor y sobre Vue, ahora es momento en que nos centremos en la experiencia de creación de un proyecto en estas 2 tecnologías para que podamos ver que tan cómoda es una u otra.
Hay dos formas de crear una aplicación en Vue:
Crear un HTML y en la cabecera agregar el Script de Vue:
La otra es con la herramienta "Vue CLI”, mediante esta forma se crea la estructura de nuestro proyecto, sincramente es la forma más aconsejable a la hora de desarrollar un proyecto profesional, porque nos permite separar del corazón de nuestra aplicación todas las demás funciones que queremos implementar. (Esto nos permite tener código ordenado y que sea fácil de entender, incluso para un equipo nuevo de trabajo.)Para instalarlo solo necesitamos tener npm instalado en nuestro sistema y colocar el siguiente comando:
Luego de tenerlo instalado, con estos 3 comandos siguientes, ya estaremos listos para empezar con nuestro proyecto:
Vue además de la configuración inicial que acabamos de ver, nos permite poder habilitar opciones como testings unitarios, TypeScript, etc.
Hay dos formas de crear una aplicación en Vue:
Crear un HTML y en la cabecera agregar el Script de Vue:
La otra es con la herramienta "Vue CLI”, mediante esta forma se crea la estructura de nuestro proyecto, sincramente es la forma más aconsejable a la hora de desarrollar un proyecto profesional, porque nos permite separar del corazón de nuestra aplicación todas las demás funciones que queremos implementar. (Esto nos permite tener código ordenado y que sea fácil de entender, incluso para un equipo nuevo de trabajo.)Para instalarlo solo necesitamos tener npm instalado en nuestro sistema y colocar el siguiente comando:
Luego de tenerlo instalado, con estos 3 comandos siguientes, ya estaremos listos para empezar con nuestro proyecto:
Vue además de la configuración inicial que acabamos de ver, nos permite poder habilitar opciones como testings unitarios, TypeScript, etc.
Para la creación de un nuevo Proyecto en Blazor, tambien temenos de dos sabores:
Hacer uso del IDE de Microsoft, Visual Studio, y crearla visualmente.
O utilizar la terminal con estas tres líneas de comando:
Al crear el proyecto en Blazor podemos integrar la estructura de un login con autentificación de usuarios, hospedar tu aplicación en un ASP.NET y algunas opciones más de configuración de proyecto.
Comparando Blazor vs Vue.
Al igual que el resto de los marcos de JS, tanto Vue como Blazor son marcos web. La principal diferencia es que Vue se basa en JavaScript, mientras que Blazor no. Además, Vue lleva mucho más tiempo en el mercado, mientras que Blazor es mucho más nuevo. Ambas son herramientas de código abierto y Vue gana en popularidad. En Github, Vue tiene alrededor de 148 mil estrellas de GitHub, mientras que Blazor tiene aproximadamente 8,19 mil estrellas de GitHub.
Visto el punto anterior, no parece que Blazor aporte mucho sobre los numerosos frameworks existentes que persiguen el mismo fin, la construcción de aplicaciones SPA y que, de hecho, se parecen bastante entre ellos.
Pero Blazor añade un objetivo, tan ambicioso como atractivo, que es lo que lo hace único…. Y es que nosotros como desarrolladores no tendremos que utilizar JavaScript, sino C#, lo cual aporta las siguientes ventajas interesantes:
No he dicho eso 😉 De hecho, sería una pena desaprovechar la gran cantidad de bibliotecas, componentes y código que la comunidad JavaScript ha estado aportando a la humanidad durante tantos años.
Aunque Blazor está diseñado para que todo lo implementemos con C#, existen "puentes" que permiten utilizar JavaScript en dos direcciones, de forma que podemos aprovechar lo mejor de ambos mundos:
Por ejemplo, si nos gusta Bootstrap, resulta sencillo crear componentes Blazor que encapsulen los componentes de este framework, tanto en lo relativo a presentación (marcado HTML) como el código de métodos y eventos JS que presentan ciertos elementos visuales, como los diálogos modales, pestañas, etc. De esta forma, los consumidores de estos componentes Blazor no tendrán que ver JS en absoluto, interactuarán con Bootstrap directamente desde C#, dando lugar a "componentes nativos Blazor".
Ninguna de las dos tecnologías son malas opciones y depende en la mayoría de casos de la complejidad del proyecto y de los conocimientos que tenga el equipo.
Creemos que para proyectos complejos o grandes, Vue es la mejor opción debido a los años que le preceden, su estabilidad y la comunidad que le respalda.
Pero si tienes un proyecto mediano-pequeño y tienes un equipo ya formado en .NET, no dudes ni un segundo y ve a por todas por Blazor, porque es una tecnología potente.