Record & Tuple: Estructuras de Datos Inmutables en JS

Y únete a nosotros en el Jam de React. Aquí hay algunas de las cosas que descubrirás. Gracias. Entonces, comencemos.

Así que gracias por venir. Soy Robin. Hoy, vamos a hablar sobre record y tuple, y esto es acerca de una nueva característica en JavaScript que te presentaremos en el próximo evento. Y vamos a ver cómo podemos mejorarla. Y esto es acerca de una nueva característica en JavaScript que esperamos que puedas usar, supongo, pronto. Y esperamos que vaya a redefinir la forma en que manejas los datos en JavaScript.

Entonces, de nuevo, soy Robin. Trabajo en Bloomberg. Hago infraestructura de JavaScript, y por lo tanto trabajo con miles de desarrolladores en mi empresa para mejorar su experiencia con JavaScript. También soy delegado de TC39 para Bloomberg. Eso significa que puedo participar en el proceso de estandarización del lenguaje JavaScript. Y también soy uno de los coautores y copatrocinadores de Record y Tuple. Eso es algo bueno porque hoy vamos a hablar de ellos.

Vale. ¿Qué vamos a cubrir hoy? Primero, no vamos a hablar sobre Record y Tuple, sino sobre los objetos y los tipos que conoces y amas en JavaScript hoy. Luego vamos a ver Record y Tuple. Y finalmente te voy a decir cuándo y si puedes usarlos. Vale.

Entonces, comencemos con los objetos. Ya los has usado y también vamos a hablar de otros tipos. Como cadenas, números. Cosas muy básicas pero, sin embargo, es importante tomarse un tiempo para mirarlas. También vamos a hablar de cómo se hacen referencia y cómo son mutables en algunos aspectos. Comencemos con los primitivos. Y en este caso tenemos cadenas. En la primera línea, creamos una cadena.

En la segunda línea, creamos una segunda cadena. ¿Creamos una nueva o es la misma cadena? Esa es la pregunta. Para JavaScript, cuando pones un valor primitivo en una variable y básicamente usas esa variable en otro lugar y la comparas, si el valor dentro coincide exactamente con los mismos caracteres, en el caso de una cadena, te dirá que es el mismo valor.

Lo mismo ocurre con los números. Para los objetos, en la primera línea aquí, estoy creando un objeto. En la segunda línea, estoy creando un segundo objeto. Si tienen el mismo contenido interno es irrelevante aquí. En cada línea, creo una nueva referencia a un nuevo objeto y esencialmente vamos a apuntar a otro lugar en la memoria. Así que tenemos dos referencias a dos lugares diferentes. Para JavaScript, esas no son la misma cosa, son completamente desiguales y no van a coincidir.

Así que no sé si has intentado cambiar un carácter en una cadena. Pero si intentas hacerlo, al menos en modo estricto, esto no va a funcionar. Vas a tener una excepción y no vas a poder mutar los internos de la cadena. Pero estoy bastante seguro de que ya has hecho eso con objetos y has cambiado los internos de un objeto simplemente estableciendo algo en una clave específica. Así que aquí simplemente estoy cambiando la clave del nombre y todo va bien. Pero algunos de ustedes podrían saber que pueden congelar objetos. Eso los hace básicamente inmutables. Entonces, ¿por qué necesitaríamos record intubal? Llegaremos a eso más tarde. Pero sí, puedo congelar mi objeto y ahora puedo cambiar las claves. Así que eso es todo. Hecho. Misión cumplida. Excepto que no es recursivo. Así que si quiero mutar realmente el array dentro de ese objeto, puedo. De hecho, eso es algo bueno aquí porque quería agregar a mi colega Ashley al grupo de campeones porque ha estado participando mucho en hacer que record intubal sea increíble.

Vale. Así que antes de seguir adelante, algunos de ustedes podrían saber que mutar cosas a veces es un camino sin retorno. Y así, si sabes que esto es un problema, esta próxima parte va a ser, sí, obvio. Pero aún así es un ejemplo interesante aquí que quiero mostrarte. Así que aquí, digamos que obtengo esta función initConnections de una biblioteca.

Realmente no confío en ello. Pero necesito usarlo. Así que no confío en que no cambie mi argumento de configuración que le estoy pasando. Y no sé si te ha pasado a ti, pero a mí me ha pasado al menos una vez, o dos veces, o tres veces, muchas veces, en realidad. Aquí, no quiero que se cambie la configuración. Porque voy a usarla en otros lugares de mi aplicación, ¿verdad? Pero initConnections bien podría cambiarla. Así que lo que voy a hacer es congelarlo, luego lo voy a pasar a initConnections, y luego todavía no estoy seguro de que mi clave database no vaya a ser cambiada. Así que aquí hay una idea. Podría hacer un JSON stringify, y luego un JSON parse, y luego obtengo una copia, y todo está bien, ¿verdad? Va a ser bastante lento hacer esto, y si voy a empezar a hacer esto en un camino caliente, va a ser una idea bastante mala para mi performance. Y si fueras a hacer esto, por favor usa Structure Clone en su lugar. Está disponible en la mayoría de los entornos host, así que tu navegador web, Deno, tiene Structure Clone, por favor usa Structure Clone en lugar de Stringify Parse.

Volvamos a las referencias. Teníamos un problema de inmutabilidad, pero quiero hablar de las referencias por un momento. A veces pueden ser problemáticas. Aquí hay un ejemplo, acompáñame, muchas líneas, pero la primera línea crea un barco con un nombre realmente bonito. La segunda línea crea coordenadas para ese barco de nombre realmente bonito, y luego voy a rastrear todos los barcos en el mar usando el mapa del barco. Es un mapa ES disponible desde ES 6 y puedo usar mi coordenada para mapear al barco. ¿Correcto? Simple. Y si quiero buscar el barco, solo doy la coordenada al mapa y voy a obtener el barco. Excepto que esto es lo que voy a hacer a continuación. Voy a copiar mis coordenadas por alguna razón, no me preguntes por qué. Pero si intento usar mis coordenadas copiadas para buscar el barco, no voy a obtener mi barco porque obtengo otra referencia que es la referencia a las coordenadas copiadas. Y... ¿cómo podemos solucionar eso? Vamos a convertirlo en una cadena de texto. Es fácil. Obtengo la cadena, es un valor, va a coincidir en mi mapa. Increíble. Pero! Esto es un terreno resbaladizo. Si fuera a crear mis coordenadas de la otra manera y no insertando las claves en el orden correcto, obtendría esto, una cadena no equivalente. Así que este es un enfoque frágil, realmente no queremos estar haciendo esto. Y además de esto, no puedes poner ciclos de objetos allí, porque JSON string, si yo no lo quisiera, y tampoco puedes poner objetos y valores allí.

Entonces, hagamos un rápido repaso antes de ver una posible solución a esto. Los primitivos, son realmente geniales. Las variables contienen valores, no referencias, por lo que puedes compararlos fácilmente, y no puedes mutarlos. En cuanto a los objetos, se mantienen por referencia, lo cual es bueno, es muy importante en el lenguaje que se comporten de esta manera. Pero en nuestro caso específico, no ha sido, digamos, lo mejor, ¿verdad? Y puedes congelarlos, pero no es súper completo.

¿Y si tuviéramos una forma de unir algunos valores y aún tratarlos como un primitivo tipo? Y por eso convenientemente les presento record y tuple. Sí. Aquí está tu primer record. Se parece mucho a un objeto, pero como puedes ver, hay este pequeño símbolo de hash delante de él que lo convierte en un record. Y no voy a estropearlo para ti, pero esto es un tuple. Lo mismo. Tienes este pequeño símbolo de hash que lo convierte de un array a un tuple. Así que solo una diferencia de carácter va a hacer un cambio bastante grande. Obviamente, puedes combinarlos, poner records dentro de tuples, tuples dentro de records. Son inmutables. Por defecto, los creas, pones este carácter hash, no necesitas congelarlo. Simplemente no es modificable después de haber sido creado. Eso es todo. Y eso también se adentra profundamente en la estructura. Así que no hay problema con congelar recursivamente. No tenemos que pensar en esto. Y creo que, más allá de la inmutabilidad, la semántica de igualdad de estas cosas es genial. Porque, en lugar de comparar referencias aquí, si tengo dos tuples que tienen la misma secuencia de valores en ellos, serán iguales. Si tengo dos records que tienen el mismo par de claves y valores, también van a ser iguales. Y vamos a usar eso. Y eso es porque son primitivos. Así que si hago un type of de ellos, realmente obtendré su propio type of. No van a devolver objeto. Van a devolver record y tuple.

Bueno, entonces resolvamos nuestros problemas anteriores que teníamos con los objetos, ¿verdad? Sobre la congelación.

Bueno, ya no necesitamos, oh, lo siento. Ya no necesitamos congelar más, porque es completamente inmutable. Las conexiones infinitas intentan cambiar mi configuración. Simplemente va a fallar. Así que problema resuelto, supongo.

Cuando se trata del segundo problema, bueno, hablamos de igualdad con triple igual. Pero map también seguirá el mismo tipo de igualdad. Eso significa que si mis coordenadas de un objeto se convierten en un registro, ahora es básicamente de referencias a las coordenadas, va a comparar los valores internos de las coordenadas. Así que si creo una copia de exactamente las mismas coordenadas, ya que los valores dentro del registro de coordenadas van a ser los mismos, todavía vamos a poder buscar nuestro botín.

Finalmente. ¿Qué pasa con los ciclos de objetos y los objetos y valores no serializables? Hablé de eso antes. Bueno, no podrás hacerlos con estructuras de registro y tupla. Vamos a llegar a eso un poco más tarde. ¿Y qué pasa con la fragilidad del orden de las claves con el stringify que te mostré antes? Si inserto mis claves en un orden diferente, ¿cambiaría algo? Con los registros, no. Porque los registros no memorizan el orden de inserción, simplemente devuelven las claves lexicográficamente en el orden que están ordenadas lexicográficamente. Así que si tomo las dos coordenadas, si inserto mis claves de una manera diferente, no importa, siguen siendo los mismos valores dentro, sigue siendo la misma igualdad.

Aunque no hay almuerzo gratis aquí. No puedes hacer algunas cosas con los registros y las tuplas, y por buenas razones, y vamos a pasar por ellas. En primer lugar, no puedes poner un objeto allí. Si miras en esta diapositiva, olvidé poner un hash delante de mi objeto db aquí. Es un objeto ahora, no es un registro, y los registros no les gusta tener objetos en ellos. Desafortunadamente, eso también vale para las funciones porque las funciones resultan ser objetos. Todavía hay una forma de solucionar ese problema, y no voy a hablar de ello porque es una solución que podrás utilizar, pero solo me quedan nueve minutos, así que necesito speed up.

Bueno, ahora vamos a hablar de cómo puedes derivar cambios. Obviamente no puedes cambiar cosas en su lugar, no puedes empujar valores en su lugar a una tupla. ¿Cómo haces esto? Bueno, con los arrays, puedes concatenar cosas usando el spread. Puedes hacer eso con las tuplas también, y de hecho, puedes hacer eso con los registros también. Así que si solo quiero cambiar un valor en mi propuesta y crear el futuro, voy a actualizarlo propagando la propuesta y cambiando la clave de la etapa aquí. Aún no estamos allí, pero pronto. Bueno, más allá de eso, hay algunos métodos realmente útiles en el prototipo de array, ¿verdad? Por ejemplo, reverse.

Desafortunadamente, no puede existir en la tupla porque reverse cambia los arrays en su lugar. Estamos introduciendo toReversed. toReversed no va a cambiar la tupla en su lugar, simplemente te va a devolver una nueva tupla que está efectivamente invertida. Tenemos toReversed que está haciendo lo que hace reverse. También tenemos toSorted que está haciendo lo que hace sort pero no en su lugar. También tenemos with. With es equivalente a hacer una asignación de índice excepto que no lo hace en su lugar. Y finalmente, tenemos toSplice que hace lo que sea que haga splice, como, no me preguntes, y devuelve una nueva tupla.

Entonces, estos podrían ser muy útiles en los arrays estándar de bug down, ¿verdad? Esa es una buena pregunta. Los añadimos en otra propuesta, change array by copy. Es una propuesta genial. De nuevo, un enorme agradecimiento a mi colega Ashley por llevarla a la etapa tres. Pero eso significa que puedo escribir esta hermosa función sort by name. Esta función funcionará en arrays de registros, o arrays u objetos o tuplas de registros, y esto va a ordenar mis nombres de esa manera. Mis colegas Rick y Ashley fueron correctamente ordenados. Y entonces, Rick Astley, lamento mucho esto. Tienes suerte de que no pude conseguir la canción. Por razones de IP, no quieren que reproduzcas cosas. Pero estoy seguro de que ahora la tienes en tu cabeza y eso es suficiente para mí.

Vale. Resumamos ahora. La sintaxis, bastante fácil. Añades el hash. Es inmutable. Así que si quieres crear actualizaciones derivadas, necesitas hacerlo por copia a través de spread o los nuevos métodos que te mostré. Y también retroportamos los métodos a los arrays, lo que significa que puedes escribir funciones que funcionarán tanto para objetos normales, arrays normales, y registros y tuplas. También tenemos igualdad de valor en lugar de igualdad referencial y tenemos esto funcionando en todos los tipos de igualdad en el lenguaje, que es triple igual, así que igualdad estricta, map y set. Desafortunadamente, no pueden contener objetos o funciones, pero manténganse atentos aquí. Probablemente esto sea otra charla completamente diferente, pero es un agujero de conejo muy interesante. Así que, manténganse atentos.

Ahora, podrías estar preguntándote, ¿cuándo puedo usar eso? Entonces, record y tuple es una propuesta en la etapa 2 en TC39. ¿Qué es TC39? TC39 es el lugar de estandarización para el lenguaje JavaScript. En realidad, debería llamarlo lenguaje ECMAScript. JavaScript es una marca registrada de Oracle.

Luego viene la etapa 2. Hay 4 etapas en TC39. Entonces, la etapa 2 está un poco en el medio, pero esencialmente eso significa que el comité espera que una característica se incorpore al lenguaje. Entonces, incluso si podría, y probablemente cambiará lo que acabo de mostrarte hoy, finalmente terminará en el lenguaje.

Más información sobre todo este proceso con la charla de Himan, creo que es el lunes en las pistas en línea. Si puedes saber mucho más sobre cómo funciona TC39 allí, te recomendaría encarecidamente que sigas esta.

Bueno, ¿qué hemos hecho para avanzar a la siguiente etapa? La propuesta está siendo revisada por varias personas. Y así, personas en mi empresa, pero también fuera en otras empresas. Y mi clicker, sí. Y también tenemos una transformación de Babel y un polyfill para ello. También tenemos pruebas de especificaciones que se están escribiendo. Y también... Oh. Bueno, eso es... Spoilers. No... Vale. También tenemos una implementación de Firefox, pero está detrás de una bandera de compilación. No puedes usarlo todavía a menos que compiles Firefox tú mismo, lo cual deberías intentar. Es realmente divertido.

¿Y entonces cuándo puedes usar una característica? Para experimentar, puedes probarlo ahora. Ve a esta dirección. Toma fotos. Y puedes probar esto en tu navegador web justo allí. Y entonces... ¿Para tus propios proyectos? Esperemos un poco.

Todavía es una propuesta en etapa 2. No comencemos a elegirla en producción en ningún lugar. Realmente no es una buena idea. ¿Qué pasa con los nuevos métodos de array que acabo de mostrarte? Puedes usarlos prácticamente ahora. Porque tienes shims, tienes polyfills, y está en Safari Tech preview 146, lo que significa que la próxima versión importante de Safari que debería estar alrededor... Debería estar allí. Y también... No lo puse en la diapositiva, pero también hay una implementación de Firefox detrás de una bandera de compilación también. Y para los proyectos de producción existentes, solo espera un poco. Yo esperaría un amplio soporte de navegador para esas características.

Bien. Quería agradecer a mis colegas del grupo Drupal Champion antes de despedirme. Rick. Rick ha sido mi coautor principal desde el principio. Desde el primer día, de hecho. Y él hizo el Playground que podrás probar. Dan, que nos ha estado asesorando, por lo que ha estado revisando nuestras primeras cosas, ayudándonos con el proceso de TC39. Y luego Nicolo, mantenedor de Babel, ahora trabajando en Igalia. Ha estado revisando la especificación porque, obviamente, implementar la especificación en Babel, sabes cómo leer la especificación después. Y también hizo la primera implementación en Firefox y un trabajo realmente impresionante. Y luego Ashley se unió a nosotros, quiero decir, habría dicho recientemente, pero ha pasado un tiempo ahora, y ha estado haciendo mucho trabajo de especificación, arreglando muchas cosas, encontrando casos límite, así que un enorme agradecimiento a él. Y finalmente, quería agradecer a todos aquí en JS Nation, también en línea, y aquí en Ámsterdam. Soy Robin, trabajo en Bloomberg, puedes encontrarme en Twitter, puedes encontrarme en GitHub, y si quieres saber más sobre lo que estamos haciendo con JavaScript en Bloomberg, ven a hablar conmigo también. Y también puedes ir a ese sitio web. Y eso es todo por mi parte. Gracias, gracias, gracias Robin.

Y tenemos bastantes preguntas en Slido. Vale, vamos a repasarlas. Sí, las tenemos en la pantalla, y vamos a empezar por la primera.

¿Existe alguna forma de convertir objetos o arrays en registros y tuplas? Sí, puedes usar los constructores de registro y array para simplemente pasar objetos estándar y arrays estándar. Solo una nota aquí. Si, por ejemplo, estás pasando un array que contiene objetos, no va a convertir recursivamente tus objetos en registros, por lo que aún tendrías que hacerlo manualmente. Esperamos que las bibliotecas de usuario LAN aquí den un paso adelante y proporcionen soluciones. Pero dicho esto, sí, es posible que solo sea una transformación superficial.

Genial. Y una pregunta mía personalmente. ¿Cómo acuerdan en su equipo llamarlo tuplas o tuplas? ¿Inglés americano versus inglés británico? Yo digo tuplas, pero tuplas es absolutamente correcto. Ha habido una guerra, y simplemente elegimos estar en desacuerdo. Y eso es todo. Genial, genial. Así es como funciona el Open Source. Vamos a la siguiente. ¿La clave del registro... Oops. Oops. Por favor, podemos devolver las preguntas a nuestra pantalla. Querido equipo de AV. Sí. Oh, gracias.

¿Las claves de registro solo aceptan cadenas? ¿Acepta otros tipos inmutables, símbolos? No, no símbolos. Solo aceptamos cadenas. Hay razones para esto. Podemos hablar de ello aparte, pero esencialmente, queremos solo cadenas por ahora. Justo.

Y esta pregunta en realidad vino primero. ¿Qué otras bibliotecas de lenguaje han sido inspiraciones para los registros y las tuplas? Muchas de ellas. Tomamos un poco de todo. Solía deshacerme de los problemas en los scripts de Closure hace un tiempo. Obtuve algo de inspiration allí. También, ImmutableJS, obviamente. De hecho, hablamos con Lee, que creó ImmutableJS, y obtuvimos feedback sobre esta propuesta. Así que, quiero decir, no es exactamente lo mismo porque, por ejemplo, ImmutableJS, o incluso otro lenguaje de functional programming, te permitirá referenciar cosas no mutables dentro de la estructura de data inmutable. Elegimos no hacerlo porque tiene sentido desde la forma en que funciona el lenguaje JavaScript. Cada vez que creas una característica, hay, sí, un cierto grado de inspiration que vas a tomar de otra cosa. Pero en algún punto, también, y especialmente con un lenguaje muy antiguo como JavaScript que tiene mucho equipaje detrás, donde todavía necesitas mantener la compatibilidad para siempre para todo el code, porque no puedes romper la web, ¿verdad? Así que todavía necesitas tener en cuenta cómo funciona el lenguaje e integrarte bien. Como he estado mostrando, nuestro objetivo también no era crear una palabra completamente nueva con registro y tupla, que es completamente diferente de los objetos y los arrays y todas esas cosas, sino también crear esta capa de interoperabilidad, ¿verdad? Así que, esencialmente, estoy feliz de discutir esto también en los próximos.

Sí, sí, sí. Y vamos a tomar más preguntas en modo presencial. Encontrarás a Robin en un lugar especial donde puedes charlar con él. Y muchas gracias. Gran masterclass. Gracias. Gracias.