Desarrollo

Primeros pasos con Vue JS

Por: Mario Negrete

Desde hace ya tiempo, en el mercado de desarrollo de software para la creación de sitios web, el uso de HTML, CSS y Javascript ha sido parte práctica y necesaria. Sin embargo, actualmente el cambio constante por parte de los clientes además de la necesidad de un producto desarrollado rápido con ciertos atributos de calidad ha inclinado a los equipos al uso de Frameworks. Los cuales facilitan mucho el desarrollo ya que ofrecen muchas cosas ya listas, en las que no necesitamos "reinventar la rueda". Estos, ya cuentan con módulos, herramientas y componentes para cumplir con las exigencias del mercado actual con relativamente poco esfuerzo.

Vue JS

Vue JS (pronunciado como View en inglés) es un framework progresivo esto se refiere a que si tu cuentas con una aplicación existente del lado del servidor, tu puedes implementar que dentro de las partes de tu aplicación se añada adicionalmente no siendo un "todo o nada". Vue JS ayuda a la construcción de interfaces de usuario. A diferencia de otros frameworks, Vue fue diseñado para ir desde cero hasta increméntale adaptable.

Beneficios

  • Utiliza un DOM (puede entenderse como la interfaz, que cambia cada vez que se actualiza) virtual garantizando un rendimiento más rápido y sin errores
  • Es un framework de los más pequeños en comparación a otros, adecuado para aplicaciones ligeras, en comparativa con Angular el cual es usado para aplicaciones pesadas.
  • Está diseñado bajo el patrón MVVM. Donde un modelo se renderiza en pantalla donde se indica cuando se tiene que mostrar cada parte del mismo.
  • Cuenta con un sistema de componentes que reacciona bien al cambio por medio una comunicación de eventos asíncronos.
  • Es más fácil para aquellos usuarios que están mudando del uso de JQuery
  • Todo el código de un componente se encuentra en un único archivo sin estar revueltos.

Comparativa con otros Frameworks

Mucho se habla de la comparativa con Angular y React. ¿Cuál sería el mejor para un proyecto de desarrollo de aplicación web? Tux, the Linux mascot

De acuerdo a los resultados de "Developer Survey 2019" de Stack Overflow. En una encuesta de 90,000 desarrolladores alrededor del mundo, en los frameworks web la primera posición la tiene con 48.7% JQuery, en el caso de React, Angular y Vue los resultados son los siguientes 31.3% para React, 30.7% para Angular y 15.2% Vue. Sin embargo, de acuerdo a los más "amados y requeridos" lo encabezan React seguido por Vue. Siendo Vue un framework lanzado en 2014, ha ganado bastante popularidad Para cualquier usuario nuevo en el desarrollo, lo recomendado es iniciar con los conocimientos básicos de HTML, CSS y Javascript antes de optar por cualquier framework. Para el desarrollo del proyecto depende de los atributos de calidad que requieran dicho proyecto considerando todos los posibles "tradeoffs". Vue ofrece un buen rendimiento y flexibilidad, adecuado para aplicaciones livianas, el cual tiene bastante respaldo por comunidad, documentación y cursos.

Empezando con Vue JS

Instalación

Se puede optar por dos métodos para su uso. Puede ser por script donde Vue será registrado como una variable global. Se cuenta con dos versiones desarrollo y producción (sin advertencias y debug). Para propósitos de este primer acercamiento se usará el de desarrollo.

<a href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js</a>

La segunda opción es con el uso de NPM, el cual es recomendado como método de instalación cuando se construye grandes aplicaciones.

latest stable
npm install vue

Hola Mundo

Es muy sencillo la primera aplicación con Vue JS. Creando un archivo html con el siguiente código obtendremos el resultado.




Ejemplo Vue JS


<a href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js</a>

    <div id="app">
        {{ message }}
    </div>
    
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
            })
    


Pareciera muy similar a renderizar una cadena de texto, pero se ha realizado un trabajo interno. Los datos y el DOM ahora están relacionados y todo ahora es reactivo. ¿Cómo sé que está funcionando? Vue JS Hola Mundo

  • Como se optó por la descarga de Vue JS se puede observar que se ha descargado adecuadamente por medio de Network de la herramienta de desarrollador del navegador.
  • Si en la consola se escribe app.message traerá el dato que hemos mostrado, también podremos actualizarlo Vue JS Hola Mundo

Ahora ya no tenemos que interactuar directamente con el HTML. Vue se une a un elemento del DOM #app para controlarlo completamente. Un segundo ejemplo de cómo interactuó sería con el atributo v-bind conocido como directiva. Todas las directivas cuentan con el prefijo v- para indicar un comportamiento especial.



Ejemplo Vue JS


<a href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js</a>

    <div id="app">
        {{ message }}
    </div>
    <div id="app-2">
        <span>
          Deja tu puntero sobre este texto unos segundos para ver dinámicamente un título
        </span>
      </div>
    
        var app = new Vue({
            el: '#app',
            data: {
                message: '¡Hola Mundo con Vue JS!'
            }
            })
        var app2 = new Vue({
            el: '#app-2',
            data: {
                message: 'Cargaste esta página el ' + new Date().toLocaleString()
            }
            })
    


Aquí, básicamente es otra variable app con su identificador y mensaje. En el HTML se ve el atributo title de este elemento con el atributo de message. Este se mantiene actualizado con la propiedad de la instancia de Vue. Si se pasa el mouse y se deja sobre el texto unos cuantos segundos aparecerá un título dinámicamente. Ejemplo 2 De igual manera el HTML queda enlazado con el atributo title el cual puede ser actualizado como ejemplo desde consola. Ejemplo 2 cambio

Esta primera entrada permite saber cómo está evaluado el framework por la comunidad, su aceptación, beneficios, comparación y un hola mundo. La siguiente entrada será un ejemplo de aplicación web usando condicionales, ciclos, entradas entre otros.

@MarioRguezz

Av. Cerro Gordo del Campestre 201
Int. 303
Col. Las Quintas
León, Gto.
C.P. 37125

ROCKTECH R+D © 2020