Aplicación Básica con JavaScript y Renderizado Declarativo

Clase 4 de 37 • Curso de Reactividad con Vue.js 3

Clase anteriorSiguiente clase

Resumen

¿Cómo construir una aplicación sencilla con JavaScript Vanilla?

Crear una aplicación con JavaScript Vanilla nos permite entender la base del desarrollo web sin depender de frameworks. Empezaremos utilizando Visual Studio Code con la extensión View HTML, desarrollada específicamente para trabajar con Vue.js. Esta extensión, junto con Bettur, nos ayudará significativamente en el desarrollo y visualización de nuestro código.

¿Qué se necesita para comenzar?

Para construir nuestra aplicación, primero debemos:

  • Instalar y configurar Visual Studio Code.
  • Agregar las extensiones View HTML y Bettur para mejorar la experiencia de codificación.
  • Crear un archivo index.html para alojar el código JavaScript y la estructura HTML básica.

¿Cómo estructurar la aplicación?

La estructura básica del HTML debe incluir:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Hola Mundo</title>
</head>
<body>
    <div id="app">
        <span id="message"></span>
        <input type="text" id="inputMessage">
    </div>
    <script src="app.js"></script>
</body>
</html>

Este código contiene un div donde presentaremos nuestra aplicación, un span para mostrar mensajes, y un input para recibir datos del usuario.

¿Cómo conectar los datos y la presentación?

Declaración de variables y conexión inicial

En JavaScript, primero debemos definir la estructura de los datos y cómo se conectan a la presentación:

// Datos de la aplicación
const data = { message: "Hola Mundo" };

// Obteniendo elementos HTML
const messageSpan = document.querySelector("#message");
const inputMessage = document.querySelector("#inputMessage");

// Estableciendo el contenido inicial
messageSpan.innerText = data.message;
inputMessage.value = data.message;

Aquí, identificamos los elementos HTML relevantes y vinculamos el mensaje inicial con los datos de la aplicación.

Implementación de reactividad

Para que la aplicación reaccione a los cambios en el input, debemos añadir un escuchador de eventos:

// Evento para actualizar datos
inputMessage.addEventListener("input", function() {
    data.message = inputMessage.value;
    messageSpan.innerText = data.message;
});

Este evento actualiza el contenido del span cada vez que el usuario escribe en el input.

¿Cómo ejecutar y ver nuestra aplicación?

Utilizar un servidor HTTP

Para ejecutar la aplicación, podemos utilizar el comando HTTP server a través de npx, lo cual nos genera un servidor local y nos permite ver nuestra aplicación en el navegador:

npx http-server

Este comando ejecutará un servidor y nos proporcionará una URL para abrir en el navegador, donde veremos el funcionamiento del "Hola Mundo" con interactividad básica.

¿Cómo mejora Vue.js la reactividad y el desarrollo?

A pesar de que este ejercicio con JavaScript Vanilla ilustra claramente los fundamentos del declarative rendering, pronto se puede volver complejo y tedioso al manejar aplicaciones más grandes. Aquí es donde frameworks como Vue.js se destacan, simplificando la bi-direccionalidad de datos y presentación, y gestionando eficientemente el estado y la reactividad.

Vue.js automatiza gran parte de las operaciones manuales, reduciendo las líneas de código, y permite centrar el esfuerzo en funcionalidad y estética. ¡Sigue aprendiendo y experimentando con Vue.js para potenciar aún más tus aplicaciones web!