Introducción a la creación de aplicaciones web en Vue.js

En la actualidad, existen tantos marcos de trabajo en JavaScript que puede ser difícil hacer un seguimiento de todos ellos, y ciertamente es poco probable que alguien los domine en su totalidad. Lo que significa para la mayoría de nosotros es que tendremos que ser selectivos sobre qué marcos de desarrollo vamos a invertir tiempo en el aprendizaje.

En este artículo, echaremos un vistazo rápido a Vue.js, para que pueda decidir por sí mismo si es probable que se adapte al tipo de proyectos en los que tiende a trabajar, y si le parece adecuado.

¿Qué es Vue.js?

Aunque convencionalmente no está en mayúsculas, "Vue" es realmente un acrónimo de Visual Understanding Environment. Su objetivo principal es facilitar el desarrollo de aplicaciones web al reducir la complejidad del código. Tiene mucho en común con React.js, pero la versión actual de Vue se ejecuta más rápido que React, y parece ser más eficiente.

¿Vue es difícil de aprender?

Si ya eres un programador experimentado, no deberías tener muchas dificultades para comenzar con Vue, pero no sería correcto describirlo como un lenguaje para principiantes. Necesitas tener algo de experiencia con HTML, CSS y JavaScript para construir algo práctico con él.

La curva de aprendizaje con Vue es un poco menos pronunciada que con React, y es mucho menos pronunciada que con Angular. Entonces, lo que se puede afirmar con precisión es que Vue es relativamente fácil de aprender en comparación con otros marcos de desarrollo populares.

¿Cómo ayuda Vue a alcanzar los objetivos?

Varía un poco dependiendo de cuál sea su objetivo en realidad, pero en general, vincula bloques de código a divs de HTML. Esta metodología hace que sea más fácil introducir interactividad y contenido dinámico que con HTML, CSS y JavaScript normales.

Por otro lado, realmente no se puede hacer más en Vue que con las formas más convencionales. Usar Vue es simplemente una cuestión de facilitarle las cosas en la fase de desarrollo, pero no tiene mucho efecto en el resultado final, aparte del menor impacto en el rendimiento debido a la carga del código de marco.

Otra ventaja de Vue es que proporciona modularidad, lo que significa que puede reutilizar los componentes que desarrolla en varios proyectos.

¿Vue tiene algunos trucos geniales en la manga?

Ciertamente lo hace, y lo mejor de estos son los efectos de transición incorporados, que le permiten tomar control de lo que, de lo contrario, serían estructuras de CSS y JavaScript con un uso intensivo de código utilizando solo una o dos líneas de código. Esto le ahorra tiempo y esfuerzo al crear sus aplicaciones.

Otra característica útil es la representación nativa para tipos de dispositivos específicos, como Android e iOS, de modo que puede ajustar sus aplicaciones para los dispositivos en los que se ejecutan sin mucho trabajo adicional.

Comenzando

Como se dijo anteriormente, Vue es fácil de aprender, pero no es un lenguaje para principiantes. Todavía necesitas conocer tu camino dentro de un bloque de código.

El problema es que, como la mayoría de los marcos, la documentación es muy perezosa y está principalmente dedicada a convencerlo para que la use. En la documentación se le presta mucha menos atención para explicar cómo funciona todo o por qué hace las cosas de una manera determinada. Prácticamente todos los ejemplos de marcos oficiales que se hayan creado excluyen información vital que debe buscar durante horas para descubrir. Esa es una falla compartida por la documentación y los ejemplos de Vue también.

Para facilitar la comprensión de lo que realmente necesita hacer para volver a crear este proyecto, estos son los pasos necesarios:

1. Añadir un script de referencia vue.js

Para la optimización de la velocidad, es mejor incluir esto después de todo el contenido de su página, pero justo antes de la etiqueta de cuerpo de cierre en la fuente HTML. También puede tener otros recursos de página cargando en esta sección también, y el orden de prioridad de carga determina qué orden debe insertar cada recurso.

Aquí hay un ejemplo de incluir vue.js desde un CDN:

Y aquí hay un ejemplo de cómo incluir vue.js desde un directorio en su propio servidor:

Sin esta referencia a vue.js, nada relacionado con Vue puede suceder.

2. Agrega los componentes de Vue en tu cuerpo HTML

Eso es lo que está pasando con este código:

Por ahora no tiene mucho sentido, pero la parte de Vue es el elemento “demo-grid” vacío, más la adición de una “directiva v” a la entrada de la consulta (en este caso es “v-model ", Que se utiliza para enlazar el código de Vue para formar entradas).

3. Si el proyecto requiere una plantilla de componente, agregue esto al cuerpo HTML

Esta sección de código es inusual porque se ve como HTML normal dentro de una etiqueta de secuencia de comandos, lo que confundirá la mayoría del software de edición de HTML (observe que los colores del indicador son incorrectos en algunos lugares).

4. Agrega la instancia de Vue

Esta debería ser una de las últimas cosas en aparecer en la página, ya que está realizando una tarea de representación dinámica. Esto proporciona algunos beneficios de optimización al agregarlo anteriormente en la página.

  • La línea 46 especifica que el navegador debe buscar un componente en la página llamada "demo-grid", y la línea 47 especifica que "# grid-template" debe usarse como la plantilla para el componente (este es el código de plantilla agregado en el paso 3 de la línea 9 a la línea 30).
  • Un bloque de la línea 48 a la línea 52 define las propiedades del componente.
  • Las líneas 53 a 62 definen una función para ordenar los datos en la tabla.
  • Las líneas 63 a 85 definen una función para filtrar datos (de los resultados en la consulta de búsqueda).
  • Las líneas 86 a 90 definen una función para poner en mayúsculas las palabras en un conjunto de datos.
  • Las líneas 91 a 97 definen el método para ordenar los datos.

5. Agregue el código de inicio antes de la etiqueta de script de cierre

Si completó los pasos 1 a 4 y abrió el archivo en el navegador, todo lo que verá es el cuadro de búsqueda y nada más. Esto se debe a que todo lo necesario para construir la tabla se ha definido pero no se ha creado. Entonces, en el paso 5, agregamos el código que realmente crea la tabla que se definió en todos los pasos anteriores.

  • La línea 100 crea un nuevo objeto Vue.
  • La línea 101 especifica a qué elemento vincular la acción.
  • Las líneas 102 a 111 proporcionan los datos del objeto que se vincularán al elemento.

Probando

Habiendo definido y creado el objeto requerido, ahora está listo para probar el resultado. Prepárese para ser insuficiente, porque esto es lo que debería ver en el navegador:

¿Que esta pasando? ¿Por qué es tan aburrido? Es porque no hay un estilo aplicado. Si usamos el estilo predeterminado del ejemplo de JSFiddle, la tabla se vería así:

Al escribir cualquier cosa en el cuadro de búsqueda (no se distingue entre mayúsculas y minúsculas) se filtrarán los resultados en consecuencia:

Al hacer clic en el encabezado de una columna, podrá cambiar el orden de visualización. Por ejemplo, al hacer clic en el encabezado de la columna "Energía" se cambiarán los resultados que se mostrarán en orden de nivel de energía.

Mejora y adaptación.

Otro problema con los ejemplos de marco es que generalmente no incluyen mucha información para ayudar a alguien que no esté familiarizado con el código base para averiguar cómo aplicar en el campo lo que ven en el ejemplo. Vue hace un trabajo magnífico en comparación con Bootstrap (que es notoriamente poco informativo), pero aún deja muchas preguntas sin responder.

Aquí hay algunos cambios que podríamos hacer en esta aplicación para cambiar su apariencia y su función:

  • Estilo de la mesa como una tabla de rayas Bootstrap
  • Cambiar el número de columnas.
  • Cambia los datos a algo completamente diferente.

1. Añadiendo Bootstrap

2. Envolviendo el elemento en una tabla Bootstrap

3. Ajustando el elemento raíz para usar el modelo de diseño Bootstrap

4. Restyling las flechas

5. Modificando los datos

6. Pruebas

  • Sin filtrar y sin clasificar

  • Clasificado por directiva (ascendente)

  • Ordenado por Usado para (ascendente)

  • Filtrado por “condicional”

  • Filtrado por "condicional" y ordenado por Directiva (ascendente)

Reflexiones finales

Con suerte, lo que se hizo evidente a partir de estos ejemplos fue que creamos dos aplicaciones con aspectos y contenidos muy diferentes a partir de una porción de código común. Con Vue es muy fácil reutilizar su código en múltiples proyectos y, potencialmente, disfrutar de un considerable ahorro de tiempo.

imagen del encabezado cortesía de Aleksandar Savic

Bogdan Rancea

Bogdan es miembro fundador de Inspired Mag, habiendo acumulado casi 6 años de experiencia durante este período. En su tiempo libre le gusta estudiar música clásica y explorar artes visuales. También está bastante obsesionado con los fixies. Ya es dueño de 5.