Cómo me gusta escribir JavaScript

Hola, mi nombre es Caleb Porzio. Creé un framework de JavaScript llamado Alpine JS. Y cuando comencé con AlpineJS, no era para nada un desarrollador experto en JavaScript, pero han pasado algunos años. He reescrito la base de código varias veces, y ahora tengo un montón de opiniones que creo que me ayudan a crear bases de código más mantenibles en las que realmente quiero trabajar.

Así que hoy vamos a crear esta pequeña versión improvisada de AlpineJS, y básicamente vamos a hacer un desastre haciéndolo, luego lo revisaremos y lo refactorizaremos usando algunas de las técnicas que he usado dentro de Alpine. Así que hagámoslo.

Aquí hay un botón en una página con una etiqueta de script sin nada en ella. Este va a ser nuestro pequeño playground. Y el framework que vamos a escribir es, no sé si has visto Alpine, pero con Alpine, puedes agregar cosas como oyentes de clic directamente a los botones agregando atributos directamente en el HTML, como exon click. Bueno, en lugar de eso, vamos a hacer flame click, y luego podemos escribir cualquier JavaScript aquí. Así que escribamos algo como so hot.

Bien. Y ahora si cargamos esto en el navegador, no va a pasar nada. Tenemos este botón con click alert. So hot, lo hacemos clic y no pasa nada porque no hemos escrito ningún JavaScript para ello. Así que hagámoslo. Entonces, lo primero que haría es crear un pequeño Dom Walker, un pequeño script que recorrerá cada elemento en la página y nos dará la oportunidad de buscar cosas como flame click y realmente inicializarlas. Así que escribamos un Dom Walker. Y con la magia de los snippets, no tienes que sentarte aquí y verme escribir un pequeño Tom Walker. Así que aquí está el script del Walker. Y este es el punto donde tenemos esta pequeña variable llamada L. Que cada iteración en este bucle while solo va a recorrer el siguiente nodo. Así que simplemente hagamos un console log de L y actualicemos la página para asegurarnos de que funciona. Si miramos la consola, aquí está. Tenemos botón, click me. Ahora tenemos tres botones en la página. Actualicemos, hagamos esos tres. Y va a, va a recorrer esos tres. Si tuviéramos un botón anidado dentro de un div, también recorrería ese div. Y luego el botón dentro de él. Bien, genial. Así que tenemos nuestro pequeño Dom Walker. Ahora en esta parte, podemos hacer cosas con cada elemento. Y en nuestro caso, queremos verificar la existencia de estos atributos de flame click diremos si L punto tiene atributo flame, click, entonces dejemos expresión igual a L punto obtener atributo flame click. Así que esto va a obtener el contenido de ese atributo. Bien.

Y esta expresión, vamos a registrar esta expresión, para que podamos ver que funcionó. Aquí tenemos alert so hot. Y ahora si queremos evaluar esto, hay esta pequeña función sucia. No se supone que debas usarla, pero la estamos usando para esta charla llamada donde realmente evaluará una cadena como código JavaScript.

Así que si actualizamos, evalúa alert, so hot, pero no queremos eso. Queremos realmente escuchar un evento de clic y luego evaluarlo. Así que hagámoslo. L dot add event listener click. Y ahora podemos poner una pequeña función aquí. Hagámoslo. Bien, actualiza. Y ahora no va a alertar hasta que haga clic, genial. Eso funcionó, ahora casi hemos terminado.

Solo vamos a agregar una pieza más de complejidad del mundo real a este lío. Y eso va a ser un mutation observer. Así que en JavaScript en tu navegador, hay una API llamada mutation observer que puedes usar para observar mutaciones en el HTML. Así que en Alpine, puedes cambiar o eliminar estos atributos sin recargar la página y Alpine detectará esos cambios. Si eliminaste un click listener en Alpine, realmente eliminará el click listener del botón donde acabo de eliminar el click listener en DevTools y ahora lo hago clic y realmente no lo eliminó. Así que escribamos un poco de código de mutation observer que nos permita enganchar realmente la eliminación de ese atributo. Así que hagámoslo. Bien. Así que de nuevo, no voy a hacer que me veas escribir todo, pero creamos un mutation observer y especificamos algunas cosas como un filtro de atributos y que solo estamos observando atributos, mutaciones, y luego solo alertaré eliminado justo desde aquí, solo para mostrarte que, está bien, hacemos clic, eso funciona. Y ahora si voy y realmente elimino este atributo, nos hemos enganchado en ese punto en el tiempo, y realmente podemos ejecutar código cuando el atributo ha sido eliminado. Entonces, ¿qué queremos hacer cuando el atributo ha sido eliminado? Bueno, queremos eliminar el event listener que acabamos de agregar arriba. Así que hagámoslo. Eliminaré event listener. Y cuando estás eliminando event listeners, obtienes el elemento, especificas el nombre del evento, y luego necesitas una referencia a la función manejadora real que fue el event listener en primer lugar. Así que necesitamos subir esto. Digamos que let handler equals eval expression. Bien, ahora tenemos add event listener.

Y ahora podemos eliminar ese event listener cuando el atributo ha sido eliminado. Muy bien. Click so hot. Ahora, si entramos aquí y eliminamos este atributo, hacemos clic, y ahora no podemos ver eso, esa alerta porque el event listener ha sido eliminado.

Así que esto es genial. Esto es todo lo que necesitamos para hacer nuestro pequeño MVP, un pequeño framework de JavaScript. Lo llamaremos hot JS. Y sí, así que esto es un lío. Este es todo el código que escribirías si solo estuvieras haciendo el trabajo. Así que el resto de esta charla va a ser nosotros refactorizando este código de vuelta a algo que sea más sensato y más mantenible. Porque ahora mismo, si quisiéramos agregar más directivas, como flame, click, seríamos como flame text o algo así. Tendríamos que duplicar todo. Y ahí, ya sabes, simplemente sería un completo desastre desagradable.

Así que comencemos a refactorizar y hablemos de mis valores como programador. Estas son muchas de mis opiniones. Esto es como la guía de estilo de Caleb Horzio para escribir JavaScript, muchas de mis opiniones y cómo abordo la refactorización. Así que lo primero que suelo hacer cuando voy a refactorizar una base de código es comenzar desde el principio. Porque muchas veces es intimidante. Como, ¿por dónde empiezas? Todo es un lío. Y generalmente es como, simplemente camino a través del código hasta que encuentro la primera cosa imperfecta o la primera cosa que no me encanta y luego comienzo allí. Así que si hacemos eso, bueno, no es difícil. Como de inmediato, estoy como, está bien, hay mucho tipo de ruido visual sobre como el recorrido del árbol Dom. Que no es necesario para entender todo. Como que podemos fácilmente extraer eso. Y tampoco me encanta que haya, uh, esta variable actual aquí arriba y luego este elemento temporal, y luego hay más código de tree Walker aquí abajo. Así que hay una extracción obvia aquí que quiero hacer, y diseñemos pensando de manera deseada. Esa es una pequeña cita de Adam Wathen, donde cuando vas a refactorizar, básicamente escribes el código que quieres que exista y luego lo haces realidad. Así que escribamos el código que queremos que exista. Sería genial simplemente decir walk pasa en un elemento, como document up body, la etiqueta body de esta página, y luego un callback donde obtenemos el elemento actual mientras hacemos ese recorrido del Dom. Y esto es todo lo que necesitamos para leer el código.

Como si estuviéramos escribiendo este código para consumo, esto es todo lo que necesitamos. Todo esto son detalles de implementación.

Bien. Así que tengo un archivo utils.js donde vamos a almacenar todas estas funciones. Vamos a crear una función. Vamos a llamarla, walk, y aceptamos el elemento raíz y luego el Walker real, que simplemente llamaremos callback. Y luego podemos extraer todo este código aquí. La mitad superior aquí, ejecuta ese callback, que va a ser todo este código que pasaremos. Así que vamos a sacar esto aquí mismo. Bien. Y luego este trozo inferior, lo sacaremos aquí. Bien. Así que de nuevo, esta es una extracción bastante básica donde simplemente extraes el código que rodea algo en una función y aceptas un callback para el interior de lo que ese código estaba envolviendo. Así que tenemos walk L y todo lo demás debería funcionar bastante bien. Uh, este es el único bit que necesitamos cambiar aquí. Y también necesitaremos importar esto en nuestro archivo aquí. Y ejecutemos esto y asegurémonos de que funcionó. No funcionó. No se pueden leer las propiedades de undefined has attribute. Porque no estamos pasando el elemento en el callback aquí. Decir que ambos archivos se actualizan. Y ahí vamos. Todo funciona genial. Muy bien. Comencemos desde arriba de nuevo hasta que encontremos algo que no sea perfecto. Esto es perfecto. Esto es perfecto. Bien. Aquí hay una gran declaración if, if L dot has attribute.

Y cuando me encuentro con algo que no funciona, voy a Si L dot has attribute. {{^}}Y cuando me encuentro con una declaración if como esta, hay algunas cosas que pasan por mi cabeza. En general, los condicionales, añaden a la complejidad que necesitas almacenar en tu cabeza cuando estás leyendo tus propios programas, porque es como todo este código solo funciona cuando hay. Un atributo en el elemento llamado flame click. Así que necesito mantener ese conocimiento en mi cabeza de que todo este código, necesitamos estar dentro de ese condicional, um, lo cual, ya sabes, mientras lees, es como que añade a esa carga. Así que una pequeña cosa que me gusta, que me gusta una pequeña técnica que me gusta, um, cuando tengo un, ya sabes, un condicional grande es invertir el condicional y retornar temprano. Así que en este caso, podemos decir si no L tiene atributo, entonces retorna. Y ahora básicamente podemos ejecutar el resto del código sabiendo que tenemos ese atributo, pero sin ese nivel extra de indentación. Y en este escenario, no es la mejor refactorización, pero solo quiero señalar que uso estos, se llaman cláusulas de guarda. Los uso todo el tiempo. Es como, saca los casos excepcionales al principio para que puedas escribir el código en el camino feliz. Y si tienes como cuatro niveles de anidamiento y los conviertes en cuatro cláusulas de guarda, eso es mucho más legible que varios, ya sabes, niveles de anidamiento a lo largo de la función. Muy bien. Así que esa es una pequeña técnica.

Otra cosa que me gusta es en lugar de usar una declaración if, usar un callback para recibir un valor. Así que vamos a extraer esto, este L dot get attribute en una pequeña función llamada get attribute. Donde pasamos el elemento. Y el nombre del atributo que queremos obtener, que es flame click. Bien. Y vamos a escribir esa función y luego hablaremos mientras avanzamos. Get attribute element and name. Bien. Y algo como esto, lo llevaremos aquí y lo llamaremos name. Y ahora lo primero que podrías pensar en hacer es simplemente devolver esta expresión. Y entonces tienes algo como let expression equals una especie de cosa, pero entonces estás de vuelta a donde empezaste. Tienes que decir, si no hay expresión, y eso es un valor nulo, eso es un valor potencialmente nulo. Y cuando trabajas con código, como sabes, los valores que pueden ser potencialmente nulos son la muerte para tus programas porque es muy difícil averiguar los pocos casos o muchos casos donde son nulos y luego obtienes todos esos errores, como intentar, ya sabes, tratar null como una función o llamar a una propiedad en null o lo que sea. Así que lo que preferiría hacer en este escenario es crear un callback receptor. Así que en lugar de establecer una variable llamada expression, ¿qué tal si creamos este pequeño callback receptor donde obtenemos expression como el primer parámetro? Ahora, todo dentro de aquí tiene acceso a expression, pero siempre estamos garantizados de que expression existe. Si no es así, este callback simplemente no se ejecutará. Así que vamos a convertir esa función en una función receptora. Así que si no tiene el nombre que estamos buscando, retorna temprano, de lo contrario, vamos a añadir este pequeño parámetro aquí, este receive, de lo contrario, en lugar de devolverlo, vamos a recibir ese valor. Bien. Asegúrate de que esto funcione. No va a funcionar porque no importamos esto. Ahora actualiza y todo funciona. Genial. Bien. Sigamos adelante.

Así que tenemos nuestra función walk. Tenemos nuestro receptor get attribute. Eso está bastante bien. Tenemos este add event listener, y vamos a extraer esto en un minuto. Pero lo siguiente realmente imperfecto que veo es solo que hay una fácil abstracción aquí. Este mutation observer, hay código arriba y hay código abajo. Así que hace que sea una abstracción de función realmente rápida. Así que hagámoslo. Vamos a crear una función llamada when attribute is removed. Y luego pasaremos el elemento, el nombre del atributo, y luego un callback para ejecutar cuando ese atributo sea removido. Así que básicamente podemos tomar el código así, ejecutar el callback y luego el resto del código debajo de él, podemos ponerlo debajo de eso.

Bien, perfecto. Así que ahora tenemos when attribute is removed y podemos añadir eso a la página aquí. When attribute is removed L y luego este flame click. Bien. Y luego nuestro callback aquí. Bien. Así que eso se ve bastante bien. Asegurémonos de que funcione. Bien. Eso funciona. Y ahora si removemos este atributo, el click ha sido removido. Muy bien. Así que esto es mucho más legible ya. Si solo estamos como incluso solo entrecerrando los ojos, haciendo la prueba del entrecerrar, puedes ver que todo está mucho más ordenado. Tenemos muchas de estas funciones básicas extraídas, la última, la última cosa imperfecta mientras estamos caminando hacia abajo es que tenemos que establecer esta variable handler para que podamos tanto añadirla como un event listener y luego remover como un event listener más tarde. Y esto no es tan malo, pero imagina que hay como cien líneas de código entre aquí y aquí. Y eso simplemente no se siente bien tener esta variable temporal siendo referenciada en partes tan diferentes de la base de código y extraerla. Como, como si fuéramos a hacer una pequeña función, así que hagámoslo.

Entonces digamos on L click y luego handler, sabes, está bien. Bien. Pero este remove event listener, ¿cómo podemos hacer que esta parte sea parte de esta abstracción, este on event listener y técnica que me gusta usar cuando estás tratando de extraer algo de dos capas diferentes de anidamiento. Así que hasta ahora, solo hemos extraído cosas en un solo nivel de condicionales o funciones o lo que sea. Solo un solo nivel de sangría. Esto es algo que queremos extraer tanto aquí como aquí. Así que se pone un poco complicado o no podemos simplemente copiar y pegar cosas aquí. Así que una técnica que me gusta usar para funciones que hacen algo como esto on, en realidad añade un event listener. A menudo hay como un desmontaje o algún tipo de procedimiento de limpieza para ese procedimiento. Como cada acción tiene una reacción opuesta. Como esta acción, este add event listener. También está la eliminación de ese event listener que está relacionada con añadirlo. Y para mantener eso en esta función, podemos devolverlo como una función. Así que mira esto. Si tomamos esto, eliminaré el event listener y vamos a duplicar esto y decir, remove event listener así, ahora podemos devolverlo desde este on handler, y luego no necesitamos tener este handler como una variable temporal separada podemos ver let off on L click de L expression, y luego aquí abajo podemos simplemente ejecutar off. Así que esto es algo que me encanta, y hay tantas veces donde esto es útil, um, a menudo, sabes, cuando estás registrando event listeners o empujando a algún tipo de pila, podrías querer devolver algún método o función para eliminar de esa pila o bus a cache o es como un patrón realmente útil que realmente me gusta devolver un procedimiento de limpieza desde una función que tiene un procedimiento de limpieza. Así que, bien, genial. Así que estoy realmente contento con esto. Importemos on y asegurémonos de que todo funcione. Bien. Así que esto es como el paso uno en la refactorización. Creo que hemos llegado a un punto donde esto se ve bastante bien, pero es realmente solo una versión más legible de lo que comenzamos, es la misma estructura. Estamos recorriendo el Dom. Estamos obteniendo un atributo. Estamos escuchando un click. Y luego cuando el atributo es removido, estamos quitando ese click. Hay tantos cambios estructurales que aún podemos hacer. Así que sigamos recorriendo esos.

Okay. Así que lo primero que vamos a hacer, tenemos get attribute y when attribute is removed, básicamente tienen los mismos parámetros que les envías. Y en este nivel de código, como esta parte muy externa, donde solo estamos recorriendo el Dom obteniendo attribute. Siento que no necesitamos tener todo este conocimiento. Siento que no necesitamos tener, usar, get attribute. Y cuando attribute is removed, se siente como mucha duplicación. ¿Qué tal si en su lugar este get attribute nos devuelve una función llamada on remove pasada en el parámetro de nuestra pequeña función receptora aquí que podríamos usar en su lugar. Y no tendríamos que pasar todos estos parámetros, creo que limpiaría mucho esto.

Así que hagamos eso dentro de get attribute, en lugar de solo recibir la expresión, recibamos una función llamada on remove y simplemente aceptaremos un callback así. Y luego aquí dentro, podemos realmente llamar a esto cuando attribute is removed justo así. Así que aceptará un callback. Y simplemente lo pasaremos a when attribute is removed y ya tenemos element y ya tenemos name. ¿Tiene sentido? Como ya tenemos este contexto de esta llamada a get attribute. Así que podemos simplemente crear una pequeña función que solo necesite el callback y llame a la función when attributes removed. Así que ahora que tenemos on remove, podemos simplemente hacer esto. On remove. Y eso es mucho mejor. Y podemos limpiarlo aún más y simplemente devolver esa función así. Así que creo que eso es mucho más limpio. Um, esta es una técnica que uso mucho donde es como, si tienes contexto, úsalo, así que en este caso tenemos el contexto, podemos usarlo y lo que realmente estamos haciendo aquí, esto se llama, uh, parameter currying o lo que sea. No sé. No sé como los términos técnicos, pero básicamente cuando tomas una función y pre rellenas algunos parámetros y luego pasas esa nueva función que solo necesita un solo parámetro o, ya sabes, lo que sea, no necesita todos los parámetros. Se llama currying. Y hay algunas formas diferentes de hacerlo en JavaScript. Esta es la más literal, pero podríamos haber hecho algo como esto. Let on remove equals when attribute is removed dot bind. Así que puedes usar esta función de JavaScript llamada bind donde pasas a este contexto, y luego pre rellenas los parámetros. Así que en nuestro caso, L y name, y luego te devolverá una función que ya tiene estos parámetros rellenados. Y luego podrías simplemente hacer algo como on remove. Okay.

Así que creo que eso es una mejora y podríamos llegar tan lejos como, ya sabes, pegar esto directamente en línea, porque va a devolver su función off. Pero siento que eso es un poco demasiado. Siento que eso es solo un paso más allá de lo que necesitamos hacer. Muy bien. Y para nuestro gran movimiento final de refactorización, de nuevo, esto es solo una forma más agradable de escribir lo que habíamos escrito antes, cambiémoslo estructuralmente ahora mismo, este código es muy imperativo. Um, lo que significa que es solo paso a paso, es como recorrer el árbol DOM para cada iteración, verificar un atributo, obtener ese atributo, registrar un oyente. Sabes, en términos de mantenibilidad, eso no siempre es lo más mantenible. Así que si piensas en cuál es el código que quiero mantener, si este es mi pequeño framework, cuál es el código que si necesitara agregar un nuevo atributo, como flame text, tendría que copiar todo esto, tal vez esto se haría enorme. Y todo está dentro de este walker. Es como, ¿y si solo fuera a la tierra de la fantasía y escribiera lo que quiero? Bueno, en lugar de llamarlo attributes, llamémoslo directive. Así que, ¿y si dijera directive? Y luego podría simplemente decir algo como flame click, y luego simplemente tomar este callback completo aquí mismo. Bien. Y, y estos incluso, como estos son todos parámetros individuales que se están pasando. Preferiría convertir esto en un objeto de cosas que se están pasando para que pudiera simplemente elegir y seleccionar qué cosas quiero, como, oh, solo quiero el elemento. O solo quiero el on remove, o solo quiero la expresión. Así que sí, esto está diseñado por pensamiento deseoso. Para mí, esto es como. Una forma mucho mejor de hacerlo. Así que registra la directiva, como declara las directivas. Este es un enfoque más declarativo para declarar las directivas al frente, y ahora dentro de este walker tener algún método como boot o algo así como boot element. Y luego esta función directive registra una directiva en un montón de directivas, y luego boot recorre todas esas directivas y realmente las inicia. Así que escribamos eso, vamos a salir de nuestros utils ahora mismo. Y vamos a crear un nuevo archivo llamado directives dot JS. Esto es otra cosa que me gusta hacer. Se llama, lo llamo el principio de archivo único es cuando estás escribiendo funciones que pertenecen juntas, las pones en un solo archivo. Así que como cualquier cosa que tenga que ver con directivas va en un solo archivo. De esa manera siempre sabes dónde encontrarlo. Um, si estás acostumbrado a la programación orientada a objetos, como PHP o Python o Python o Java o algo así, estás acostumbrado a escribir clases como esta. Bueno, realmente no uso clases en JavaScript. Más bien uso estos módulos, estos archivos, donde en lugar de métodos, tengo funciones.

Y si exporto la función, es una función pública. Si no lo hago, es solo una función privada utilizada dentro del archivo. Y puedo agregar lo que es el equivalente a propiedades simplemente escribiendo variables en la parte superior. Y verás a qué me refiero. Así que vamos a exportar esta función call directive, donde pasamos el nombre de la directiva y luego un callback que maneja la inicialización. Podríamos llamar a esto tal vez initialize para que sea más legible o algo así.

Bien. Y ahora aquí no estamos, no tenemos los elementos actuales, así que tenemos que cambiar un poco la estructura. Necesitamos almacenar todas estas directivas para que podamos iniciarlas más tarde. Así que vamos a crear una pequeña propiedad llamada let directives equals. Y es solo un array. Y luego aquí diremos directives push, y vamos a agregar un pequeño objeto con el nombre y luego esta función initialize. Bien. Así que cuando el código se ejecute, cuando esta directiva se ejecute, básicamente va a mantener estos para nosotros en esta variable, esta propiedad llamada directives hasta que los usemos en boot. Así que vamos a crear esa función boot. De acuerdo. Y boot acepta un elemento.

Y ahora boot va a recorrer esas directivas. Así que directives.for each, y esto será una directiva, una individual. Y ahora esta directiva individual, podemos tomar este código que teníamos antes. Y ahora realmente lo ejecutaríamos como para esta directiva, obtendremos el atributo. Ya tenemos el elemento. Diremos directive, dot name. Y en este caso, podríamos simplemente pasar directive dot initialize, y tal vez haremos eso solo por ahora para asegurarnos de que todo funcione, pero en realidad no vamos a hacer eso. En lugar de pasar initialize, vamos a pasar nuestro propio callback aquí. Y luego llamaremos a esta función initialize. Y recuerda, initialize es lo que pasamos a la directiva e initialize espera este objeto de parámetros. Así que simplemente peguemos eso aquí. Bien. Así que tenemos elemento, necesitamos expresión.

Recuerda, get attribute returns, expression, and it returns on remove. Bien. Así que importemos esos de nuestro nuevo directives.js e importemos boot. Y ahora esto, necesitamos importar get attribute de utils. Y veamos si esto funciona. Initialize is not defined. Bien. Así que tenemos initialize, pero en realidad es una propiedad de nuestra directiva, esta directiva que pasamos. Así que directive dot initialize. Y ahí vamos. Todo sigue funcionando. Y para mí, hemos invertido un poco el flujo aquí. En lugar de recorrer directamente algo y hacer algo o hacer un puñado de cosas en cada bucle, hemos elevado esas cosas que estamos haciendo en declaraciones al principio. Y ahora, cuando hacemos el bucle real, es solo esta pequeña función boot que recorre esas cosas que declaramos. Así que espero que esto tenga sentido para ti. Sé que, ya sabes, tener que mirar esto, no pasa la prueba del entrecerrar los ojos muy fácilmente. Pero sé que mirar esto puede ser un poco abrumador. Pero creo que entiendes la idea. Pero creo que entiendes la idea. Así que hay muchas más optimizaciones que podríamos hacer en este método. Podríamos proporcionar directamente aquí y completar algo de este contexto, como hicimos antes con ese currying. Hay mucho más que podríamos hacer. Hay muchas más refactorizaciones que me gustaría hacer, pero vamos a mantenerlo en este nivel por ahora. Y espero que esto te haya dado un poco de perspectiva sobre cómo me gusta escribir las cosas y cómo me gusta estructurar el código y solo para que sepas, esto es muy parecido a cómo está realmente escrito Alpine. Hay un archivo en el núcleo de Alpine llamado directives que tiene una función llamada directive que almacena todos los manejadores en este objeto y luego puedes inicializarlos más tarde. Todo lo que te he mostrado es básicamente cómo está escrito el núcleo de Alpine en sí mismo que creo que lo hace mucho más legible y sí. Así que espero que hayas captado uno o dos consejos sobre refactorizar JavaScript en funciones con nombres agradables. Sí. Gracias.