Llevando Vue.js al Backend

Y tengo un podcast. Se llama Decoding the Code y siempre puedes encontrarme en Twitter. Soy bastante activo allí. Así que si tienes alguna pregunta surgida de esta charla, solo contáctame y te seguiré respondiendo, por supuesto.

Entonces sí, Vue.js en el backend. Puedes pensar, ¿estás loco? ¿Por qué harías eso? Así que una advertencia rápida. Esta charla no trata sobre una forma muy productiva de construir un backend de Vue.js. Se trata más de provocar el pensamiento sobre algunas cosas que podríamos usar Vue.js en el backend, y esto es Vue.Reactivity. Y se me ocurrió la idea de esta charla a principios de este año, e incluso tuiteé al respecto. Le escribí a Evan Yew. Hola Evan, ¿ves algún problema en usar el motor de Vue 3 Reactivity en un backend de Node.js? Y me alegró que respondiera, así que escribió, simplemente ten en cuenta lo que quieres hacer Reactivo. La API se establece en Reactividad Profunda porque tiene más sentido en el entorno del navegador, pero en Node.js, querrías evitar la proxy profunda de los elementos internos de Node. Asegúrate de usar ref superficial y Reactividad superficial. Así que básicamente tenemos el visto bueno de Evan Yu para hacer esto y recibí otra respuesta de Alexander Lichta. Él me señaló que Oscar Spence había dado una charla al respecto en Vue.conf.us. Escribió esta charla totalmente genial de Oscar Spence sobre Vue 3 Reactivity en el contexto del backend, que era exactamente lo que yo quería hacer. Así que parte de este código que voy a escribir hoy está inspirado en el código de Oscar Spence, un poco diferente, pero la idea se basa un poco en su charla. Así que gracias Oscar por el trabajo inicial que hiciste para esto.

De acuerdo, queremos usar Vue 3 Reactivity en el backend. Antes de llegar a eso, primero debemos saber qué es realmente la reactividad. La reactividad es cuando cambias algo y lo actualizas donde sea necesario. Para hacer eso, necesitamos escuchar los cambios y notificar cuando ocurre un cambio. Podemos hacer algo que se llama un efecto, un efecto secundario, algo que debería suceder cuando algo cambia. Por ejemplo, el valor del número cambia de 3 a 5. Entonces, el control deslizante debe estar en otra posición, por ejemplo.

De acuerdo, esto es el patrón observador. En Vue 3 Reactivity, en Vue 2 usamos Object.defineProperty y en Vue 3 sobrescribimos los getters y setters de las propiedades del objeto aprovechando la magia de los proxies ES6. Vamos a profundizar un poco en eso.

Entonces, ¿qué es un proxy? Si creas un proxy a partir de un objeto, por defecto se comporta de la misma manera que el objeto. Por ejemplo, si escribo un valor en esto, lo escribe en el objeto, en el objetivo, y también cuando leo de esto, devuelve el valor del objetivo. Se comporta exactamente como pensamos que debería funcionar, lo cual es genial. Pero los proxies tienen un superpoder, y este superpoder es que podemos interceptar estos dos hooks. Por supuesto, puedes interceptar más hooks, pero estos son los dos que son interesantes para este caso de uso. Puedes escribir el código que quieras para reemplazar los métodos setter y getter. En la demostración veremos qué hacemos con esto. Vamos a comenzar esta fiesta o mejor dicho, vamos a comenzar esta demostración en vivo.

Primero, comencemos obteniendo una pequeña idea de los Proxies de ESX y luego vamos a hacer una pequeña demostración en vivo donde veremos cómo implementar algo de Vue.js en el backend. Veamos.

De acuerdo, comencemos con los proxies. Para mostrarte cómo funciona, simplemente crearé un objeto primero. Esto se llama persona y esta persona tiene un nombre Mark y tiene una edad de 34. Perfecto. Y creamos nuestro proxy de la siguiente manera. Un nuevo proxy a partir de persona y espera un segundo argumento que se llama controlador y vamos a ver cómo funciona en un momento.

Por ahora, puedo jugar con esto en este lado de la pantalla. Veamos primero qué hay ahí. Así que esto es el proxy y lo que pasamos aquí. Hasta ahora, nada espectacular. Pero cuando vamos allí ahora y decimos que proxy.edad es 35. Lo establece en 35. Cuando lo leemos de nuevo, en realidad se actualizó. Así es como esperamos que funcione. Y así es como se envía el proxy de forma predeterminada. Pero podemos modificar el proxy sobrescribiendo algunas trampas o funciones en este controlador. Por ejemplo, la función getter. Toma dos argumentos, objetivo y clave. Veamos qué es. Console.log objetivo y clave. Bien. Y veamos. Esto está invocando el método get. Aquí podemos ver que registra lo que queremos registrar. El objetivo. Ahora podemos ver cuál es el objetivo. El objetivo no es nada más que el objeto original, y el proxy es como el frente de eso. Esto es lo que está detrás del proxy, por así decirlo.

Y la edad es la clave que queremos obtener. Así que en este caso, la edad. Y cuando decimos el nombre, bueno, dice nombre, perfecto. Simplemente llamémoslo 'get' para ver con qué estamos trabajando.

Y quizás hayas notado que siempre devuelve 'undefined', ¿por qué es eso? Bueno, porque no estamos devolviendo nada. Te dije que podemos sobrescribir completamente esta función, pero ahora la rompimos. Tenemos que volver a codificar la funcionalidad. Entonces lo que vamos a hacer es simplemente devolver el objetivo con el valor de la clave. Bien, veamos si eso funcionó. Como un encanto. Perfecto.

Ahora sobrescribamos el 'setter'. El 'setter' toma un argumento adicional, el valor. Permíteme ser un poco perezoso y copiar esto. Establecer la clave en el valor. ¿Qué sucede cuando establecemos el nombre en Jimmy, por ejemplo? Sí, establecemos y luego el nombre. ¿A qué valor queremos establecer el nombre? Jimmy. Entonces, ahora cuando vamos a, cuando mostramos el nombre, no cambió, ¿por qué? Porque nuevamente no lo establecimos. Simplemente sobrescribimos nuestra función original y la rompimos. De acuerdo, arreglemos eso. Establezcamos la clave en el objetivo con el nuevo valor y probemos de nuevo. El nombre es Jimmy. Y luego, cuando intentamos leer el nombre, ¡hey, se actualizó, perfecto!

Entonces ahora hemos interceptado estas funciones, pero ¿qué debemos hacer con ellas? En la reactividad de Vue, hacemos algo así, aquí en el 'get', hacemos un seguimiento, hacemos algo que se llama seguimiento, y aquí en el 'setter', algo que se llama activación. Bueno, en realidad, pasamos el objetivo y la clave aquí. Entonces, lo que hace esto es que el seguimiento es, nos damos cuenta de que hay algo que, en efecto, algo que quiere ser observado, así que lo tomamos y lo escribimos como una dependencia, y luego cuando algo cambia, cuando establecemos un nuevo valor, lo activamos. Así que le decimos al sistema, ¡hey, algo cambió aquí! Pero eso se vuelve demasiado profundo, y tengo otra charla en una conferencia o varias charlas en conferencias sobre este tema donde profundizo un poco más en la reactividad de Vue 3, pero por ahora, esto es suficiente. Además, en la versión real de la reactividad de Vue 3, no usamos esto, usamos algo llamado 'reflect' para resolver algunas advertencias, pero no voy a entrar en eso demasiado, porque ahora estamos viendo algo diferente. Entonces, Vue 3 tiene una función llamada 'reactivity', y es más o menos algo como esto.

Función, no se llama reactivity, se llama reactivo, lo siento. Entonces pasamos aquí el objetivo, ¿y qué hacemos con él? Simplemente hacemos un proxy de él, así como esto. Y devolvemos el proxy, y aquí, no es la persona, es el objetivo que pasamos. Entonces ahora, si queremos hacer que un objeto sea reactivo, todo lo que tenemos que hacer es reactivar esto.

De acuerdo, vamos a probarlo. Muy bien, vamos a obtener el valor, por ejemplo, la edad. Así invoca nuestro gancho de obtención donde bloqueamos las cosas, y en la versión real de tu reactivity, hacemos un seguimiento. Entonces le decimos al sistema que queremos saber cuándo cambia la edad, y luego cuando cambia, lo activamos. Así que le decimos al sistema, hey, esto cambió, y luego haz tu cosa y ejecuta ese efecto secundario que debe hacerse.

De acuerdo, esto son proxies. Ahora vamos a pasar a una demostración donde voy a usar todo esto en el backend. De acuerdo, este es mi backend, no hay nada impresionante sucediendo aquí. Es solo mi servidor express, aburrido, y tres rutas con las que trabajo. Una es unirse, salir y mensaje. También se replican en mi cliente REST, llamado Insomnia. Iniciar sesión, solo pasa el nombre de usuario, mensaje, qué nombre de usuario y qué texto. Y luego salir, nuevamente el nombre de usuario. Entonces aquí no hay authentication, no hay interacción real con usuarios reales. Todo eso es algo que tenemos que imaginar que se agregará más adelante. Pero por el momento, centrémonos en la reactivity para este caso. De acuerdo, lo primero que tenemos que hacer, en realidad, es agregar VueJS en nuestro backend. ¿Cómo hacemos eso? Vamos a yarn add Vue.at.next, si haces Vue.at.next, es la versión 3, de acuerdo, está instalado. Ocultemos la barra lateral, perfecto. De acuerdo, primero importemos algunas cosas que necesitamos. RequireVue. ¿Y qué necesitamos? Necesitamos la función reactivo que vimos anteriormente, necesitamos efecto, vamos a llegar a eso más adelante, qué es exactamente eso, y podríamos usar una propiedad computada. De acuerdo, hasta ahora todo bien. Y creemos un arreglo reactivo llamado usuarios. isReactive y es un arreglo vacío para empezar. De acuerdo, hasta ahora todo bien, aún no ha sucedido nada porque aún no hemos escrito ningún código real, pero comencemos con unirse.

De acuerdo, unirse. Cuando ejecutamos esto, queremos agregar este usuario al arreglo. Así que esta es la parte más fácil. Simplemente hacemos usuarios.push, ¿y qué empujamos? El cuerpo de nuestra solicitud, que es exactamente esto, solo el nombre de usuario.

De acuerdo, cuando hacemos esto ahora, no sucede nada porque aún no estamos reaccionando a ello. Ese es nuestro primer efecto. Te dije que explicaría qué hace este efecto, pero para hacerlo, permíteme escribir el efecto primero y luego explicar esto. Aquí console.log usuariosCambiados y solo vamos a la longitud del arreglo. Cuando vamos allí ahora, decimos usuariosCambiados 1, 2, 3, 4, 5.

Este efecto, cómo funciona, es que pasas una función aquí que si algo dentro de esta función cambia, entonces ejecuta la función nuevamente. Puede parecer un poco complicado, pero esa es la forma más fácil de explicarlo. Si algo dentro de una función cambia, ejecútalo. En este caso, la longitud de usuariosCambiados, por lo que se ejecuta. Así que es solo una salida.

Pero no queremos acceder aquí solo a esto. Queremos hacer algo como esto. El usuario esto y esto se unió al chat. Y va a ser algo como usuario.nombreDeUsuario. Solo tenemos que obtener primero al usuario. Entonces el usuario va a ser el último en el arreglo, porque cuando agregas algo a un arreglo, está en la última posición. Esto es conveniente para nosotros, porque es algo fácil de hacer. Solo accedemos al índice de longitud menos uno. Y aquí nuevamente, porque aquí accedemos a la longitud del usuario, esto se ejecuta cuando cambia. Así que esperemos que esto funcione. No funcionó. ¿Por qué? Nombre de usuario de indefinido. Por supuesto, está indefinido al principio. Así que tenemos que hacer una pequeña verificación aquí. Si no hay usuario, simplemente regresamos y ignoramos el resto. De acuerdo, veamos.

Ahora funciona. Luego enviamos la solicitud y ¡BAM! Funcionó. Esto es perfecto. Así que el usuario mark se unió. Increíble.

Ahora para salir, eso es lo siguiente que vamos a codificar. ¿Cómo? Cuando el usuario se va. Y esto es un poco más complicado porque vamos a hacer algo un poco más inconvencional. Así que digamos que el nombre de usuario, tenemos algo como esto, ¿verdad? Lo que hacemos es establecer leave en true. Así que este usuario se está yendo. Y luego nuestro efecto va a capturar eso y luego establecerá left en true. Así que sabemos cuándo un usuario quiere irse. Y luego sabemos cuándo se completa la acción. Así que eso es lo que vamos a hacer.

Primero, necesitamos usar eso que se está yendo. Y luego lo vamos a hacer así. Donde está el usuario, encontramos. Encontramos un usuario donde el nombre de usuario es el mismo que pasamos aquí en el cuerpo de la solicitud. Así que un cuerpo de solicitud. Vamos. Cuerpo nombre de usuario. De acuerdo. Y también si aún no se han ido. Así que filtramos los que ya se han marcado como idos. De acuerdo. Y luego nuevamente, aquí podríamos encontrar algunos problemas si no hay un usuario. Así que si no hay un usuario, no hacemos nada. Y si lo hay, establecemos leave del usuario en true. De acuerdo. Entonces sí, esto va a encontrar al usuario con el nombre de usuario que es el mismo que pasamos aquí y que aún no se ha ido.

Simplemente, bueno, él quería irse pero la operación aún no se ha completado. Entonces, para hacer eso, permítanme crear un efecto. Y aquí, vamos a hacer lo siguiente. Filtramos los usuarios, para los usuarios que se están yendo. Dejar y, pero no los que aún no se han ido. Entonces, y no se han ido. Y para todos estos, hacemos lo siguiente. Bueno, vamos a la siguiente línea. Establecemos left en true y registramos al usuario que se ha ido. Y esto será user.username. Muy bien, vamos a probarlo. Bueno, primero unirse, mark join, perfecto. Salir, mark left, perfecto. Nuevamente, no funciona porque no hay ninguno en la lista. De acuerdo, perfecto.

Muy bien, la última parte es enviar mensajes. Para eso, necesitamos otra matriz, una matriz reactiva, messages. Y aquí necesitamos agregar el mensaje. Messages.push, cuerpo de la solicitud, genial. Y luego necesitamos un efecto similar a los que teníamos para los usuarios. Así que simplemente lo copiaré y reemplazaré user por message y vamos a registrar otro mensaje. Así que ponemos el usuario entre paréntesis y luego escribimos el mensaje. Entonces es message.username, genial. Y luego message.text, oops. Ok, vamos a probar eso. Vamos a iniciar sesión, funciona. Vamos a enviar un mensaje y eso también funciona, genial. Y vamos a salir, genial.

Muy bien, desafortunadamente hemos terminado. Me hubiera encantado mostrarte mucho más, por ejemplo, propiedades computadas, pero eso simplemente no está en el tiempo, pero así es como podríamos usar Vue.js en el backend. Por supuesto, esto no es exactamente cómo implementarías el chat, pero es solo para visualizar o mostrarte lo que es posible con Vue en el backend. Con eso, muchas gracias por su atención y, por supuesto, por no quedarse dormido. Y si tienes más preguntas sobre esto, asegúrate de enviarme un mensaje directo en Twitter, te responderé y sí, que tengas un excelente resto de la conferencia. ♪♪♪