Aprende Vue desaprendiendo jQuery #desafíoVue

Aquí arranca el #desafíoVue.

Importante:

Este desafío lo tienes disponible en formato vídeo en el curso Aprende Vue JS desaprendiendo jQuery.

¿Por qué Vue? ¿Por qué desaprender jQuery? ¶

Vue es un gran framework de JavaScript, fácilmente adaptable a tu forma de trabajar. Entonces, ¿por qué seguimos usando jQuery si Vue puede facilitarnos la vida?

Lo primero dejemos claro que jQuery es una librería estupenda. Es la más descargada y utilizada de todo el espectro de JavaScript, hay decenas de miles de preguntas relacionadas con ella y prácticamente cualquier cosa que quieras hacer podrás encontrarla en la red, en varios sabores, formas y colores.

Además jQuery ha sido la librería de confianza de grandes frameworks como Drupal y WordPress, lo que hizo que su popularidad escalara aún más.

El problema es que el tiempo pasa y aparecieron en escena los frameworks reactivos para frontend que facilitaban un desarrollo más compacto, una forma donde el desarrollador puede controlar todo el proceso.

Y es que, al final, con jQuery modificamos el comportamiento del DOM, de nuestro HTML, como si fuera un “parche”. Con React, Angular y Vue interactuamos con el DOM de forma reactiva, integrando los cambios de estado en el propio desarrollo.

Lo veremos con detalle a lo largo del desafío, te aconsejo mientras que escuches este episodio del podcast:

¿Qué queremos conseguir en el desafío? ¶

Este desafío tiene truco :)

Por una parte queremos ver cómo ejecutar tareas que ya estamos acostumbrados a realizar con jQuery utilizando Vue. Hemos aprovechado las preguntas de StackOverflow para buscar las más populares y serán nuestros primeros hitos de desarrollo.

La segunda parte si será el proyecto entregable sobre el que vamos a trabajar: una calculadora para generar un presupuesto. Las calculadoras son uno de los proyectos más repetidos de aprendizaje y, creo, de los que más veces se repiten a lo largo de una carrera profesional. Eso si, no hay dos iguales :)

Esto nos deja la funcionalidad principalmente en el frontend, sin tener que incluir la variable del backend y la persistencia. Así simplificamos la tarea.

Hitos del desafío ¶

• Hito 0. Definir el proyecto.
• Hito 1. Prácticas: Mostrar y esconder una capa.
• Hito 2. Prácticas: Cambiar estados en base a una selección del formulario.
• Hito 3. Prácticas: Validación de campos.
• Hito 4. Calculadora: primeros cálculos.
• Hito 5. Calculadora: cálculos avanzados.
• Hito 6. Desplegar en la nube.
• Hito premium. Enviar resultados por correo electrónico.

¿Cuándo habremos completado el hito 1 del desafío? ¶

Simplemente tener una página web funcionando en local o en un repositorio online (Codepen, JSFiddle) que, ante un clic en un botón, esconda una capa. Primero lo resolvemos con jQuery y luego con Vue para ver las diferencias.

Es tan sencillo que casi cuesta definirlo, pero ya tendremos la primera piedra colocada. Y, sobre todo, nos quitaremos el miedo ante una nueva tecnología.

Recursos para lograrlo ¶

• Página oficial de VueJS
• Guía en español
• Ejemplo en jQuery
• Ejemplo en Vue
• Showing Hiding Elements

¡Hasta el próximo hito!