Blazor vs Vue
Una comparativa entre el framework más flexible y el más prometedor del 2020

En el anterior post os hemos hablado sobre Blazor; 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 Vue y que es Blazor.

Blazor

blazor logo

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

vue logo

Vue es una tecnología lanzada en el 2014 para 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.

Blazor vs Vue

Ya os hemos hablado sobre Blazor y sobre Vue, en este post nos queremos centrar en la experiencia de creación de un proyecto en estas 2 tecnologías para que podáis ver que tan cómoda es una u otra.

Creando una App en Vue

Hay dos formas de crear una aplicación en Vue:

  • Crear un HTML y en la cabecera acgregar el Script de Vue:

    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • La otra es que sea Vue con la herramienta "Vue Cli" el que cree la estructura de nuestro proyecto, esta 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:

    npm install -g @vue/cli

    Luego de tenerlo instalado, con estos 3 comandos siguiente ya estaremos listos para empezar con nuestro proyecto:

    vue create hello-jumotech
    cd hello-jumotech
    npm run serve

Vue además de la configuración inicial que acabamos de ver, nos permite poder habilitar opciones como testings unitarios, TypeScript, etc.

Creando una app con Blazor

Para la creación de un nuevo proyecto:

  • Hacer uso del IDE de Microsoft, Visual Studio, y crearla visualmente.

  • Usar el terminal con estas tres líneas de comando:

    dotnet new blazorjumo
    cd blazorjumo dotnet run

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.

Programando en Vue

Vamos a crear una aplicación sencilla, que nos permita ver como se programa en Vue:

<div id="app">
    <label>What's your name?
        <input v-model="name" placeholder="Your name..."/>
    </label>
    <span>Hello {{ name }}</span>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: ''
        }
    })
</script>

El programa funciona de la siguiente manera: al escribir un texto en el campo Input, lo podremos ver en el Span juntamente con la palabra "Hello". Para hacerlo solo hemos tenido que vincular un campo con otro mediante v-model "{{ }}".

programa de ejemplo de Vue

Ahora para poder mostrar las posibilidades de su estructura progresiva vamos a encapsular lo que acabamos  de construir para poder utilizarlo como un componente más de nuestro proyecto.

Para ello convertiremos lo que hemos creado en un componente y este componente tendrá 2 partes fundamentales (aunque puede tener más):

  • Data

    • Es el lugar donde pondremos todas las variables y constantes de datos que queremos que puedan ser modificados fuera de nuestro componente.

  • Template

    • Es la estructura, la interfaz de nuestro componente y donde se situará todas las variables Data que hayamos creado.

Vue.component('greeting', {
    data: function () {
        return {
            name: ''
        }
    },
    template: `
        <div>
            <label>What's your name?
                <input v-model="name" placeholder="Your name..."/>
            </label>
            <span>Hello {{ name }}</span>
        </div>
    `
}

Ahora que ya tenemos creado el componente y vemos que en el inicio, le hemos llamado "greeting":

''Vue.component('greeting', {''

Podremos llamarla con ese nombre desde otro componente Vue:

<div id="app">
    <greeting/>
</div>

Con este ejemplo hemos visto lo fácil que nos resulta crear una aplicación en Vue, debido a:

  • Aunque tiene una estructura nueva de desarrollo, es intuitiva y se construye con componentes familiares: HTML, Javascript, CSS.

  • Tenemos muchas opciones a la hora de crear un proyecto en Vue, lo que lo hace versátil a la hora de crear un proyecto nuevo.

  • Se ejecuta como Javascript en el ordenador.

  • Permite crear componentes que podemos usar sin limitaciones en cualquier parte de nuestro proyecto y permite poder tener una estructura muy limpia que nos reduce horas de:

    • Desarrollo.

    • Mantenimiento.

    • Actualizaciones.

    • Mejoras.

Programando en Blazor

Al igual que Vue, Blazor te anima a que dividas tu proyecto en componentes más pequeños; pero a diferencia de Vue, estos componentes usan Razor y C#.

<label>What's your name?</label>
<input type="text" @bind-value="Name" @bind-value:event="oninput" placeholder="Bob"/>
<span>Hello @Name</span>

@code {
    public string Name { get; set; }
}

Con este código tenemos exactamente la misma función que con Vue, solo que en este caso con Blazor vincula una variable cuando se le declara, como acabamos de hacer en la sección "@code {...".
Además hemos agregado el evento "oninput" que permite que se muestre el texto al momento de empezar a escribir.

Como usamos Visual Studio, él se encarga de instanciar por nosotros el componente, por tanto solo nos queda llamarlo para poder usarlo donde gustemos:

<h1>
    A brief introduction to Blazor...
</h1>

<Greeting />

programa de ejemplo de Blazor

En resumen, Blazor tiene como ventajas:

  • Crear e instancia componentes de manera sencilla.

  • Está escrito en C#, un lenguaje muy conocido usado en el sector IT.

  • Hay menos lineas de código para el desarrollo.

Conclusión


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.

Seguiremos haciendo comparativas sobre la forma de programar de estas bestias para atajaros en esta difícil tarea de escoger que tecnología os conviene más.

Blazor vs Vue
JUMO Technologies S.L., Juan Manuel Ojeda Garcia
27 agosto, 2020
Share this post
Archivar
Identificarse to leave a comment
Blazor el open source de Microsoft
descubre como Blazor puede beneficiar tu proyecto web