CSS Es Más Poderoso De Lo Que Piensas! Construyendo Búsqueda en React con CSS

Hola a todos. Mi nombre es Evatar Alush. Soy ingeniero de software en Meta. Soy el autor de varios paquetes de código abierto. Muy apasionado por el código abierto, el diseño de API y la construcción de herramientas para otros desarrolladores. Vivo en Tel Aviv con mi hermosa esposa. Y también soy el humilde servidor de esta poderosa criatura.

Hoy, voy a salir un poco de mi zona de confort porque aunque usualmente hablo sobre JavaScript, TypeScript, Node, construcción de paquetes, React, hoy voy a hablar sobre algo diferente. Voy a hablar sobre CSS. Y más específicamente sobre cómo resolví desafíos reales en React usando solo CSS.

Verás, uno de los principales paquetes que mantengo es EmojiPicker React, que es uno de los componentes de EmojiPicker más populares en React o en general, de hecho, con cientos de miles de descargas semanales. Y tiene la mayoría de las características que esperarías de un EmojiPicker estándar. Así que tiene todo el conjunto de emojis. Tiene diferentes tonos de piel que puedes elegir. Tiene diferentes estilos de emojis. Así que tienes Apple, Twitter, Google y Facebook. Y también tiene capacidad de búsqueda. Y escribiré algo y puedes ver bastante fácilmente que la búsqueda es bastante rápida. Aparece inmediatamente. Los resultados de búsqueda aparecen inmediatamente. Y, bueno, eso es lo que esperarías de un componente de búsqueda en un EmojiPicker.

Pero no siempre fue así. Verás, cuando creé el EmojiPicker allá por 2017, la capacidad de búsqueda era bastante lenta. Y el principal problema que siempre recibía en la página de GitHub del proyecto era, la búsqueda es lenta. No podemos usar la búsqueda. Toma hasta dos segundos buscar cualquier cosa. Y eso no es aceptable. Y logré solucionarlo, principalmente usando CSS. Y antes de mostrarte cómo lo hice, quiero mostrarte cómo se sentía antes de implementar la solución. Así que volveré al componente de demostración que creé.

Y este es el EmojiPicker sin esa corrección. Así que tal como era antes. Y escribiré algo y notarás un ligero retraso. Así que estoy escribiendo la letra K ahora. Y tomó, no sé, como medio segundo para volver a renderizar. Y, bueno, no está tan mal, dirías. Pero si sucede con cada pulsación de tecla, eso no es cómodo.

Y estoy usando en realidad un MacBook Pro de gama alta, pero ¿qué pasa con los usuarios reales en el mundo que no tienen máquinas de gama alta? Veamos cómo se siente para ellos. Así que vamos a la pestaña de Rendimiento en Chrome DevTools y tratemos de ralentizarlo, digamos a tiempo seis. Y veamos cómo se siente esto para los usuarios en el mundo. Así que te haré saber cuando realmente escriba algo para que puedas cronometrarlo tú mismo. Así que estoy escribiendo la letra K ahora. Y eso tomó casi, no sé, dos segundos para realmente ver algo actualizándose. Y obviamente, si escribo más caracteres, verás que se hace más corto y más corto porque tiene menos emojis de los que filtrar. Pero aún así, eso es inaceptable.

¿Y por qué es eso? Bueno, como puedes ver aquí, la búsqueda está aquí arriba en el encabezado. Está completamente distante del componente de la lista de emojis. Así que todo lo que queremos actualizar aquí tiene que pasar por algún estado global en el selector y luego volver a bajar a la lista de emojis antes de que pase algo. Y luego tiene que actualizar cada emoji que necesita ser eliminado o re-agregado. Así que eso es mucho trabajo para hacer en el DOM. Y ese es el trabajo más intensivo, en realidad. Así que tenemos actualización de estado global. Tenemos diferenciación de estado para cada uno de los componentes. Tenemos diferenciación de DOM para cada uno de los componentes. Y luego tenemos que realmente volver a renderizar todo. Y si te muestro lo que pasa es, bueno, cuando voy a la pestaña de componentes en React DevTools, puedo realmente resaltar los cambios de estado y las re-renderizaciones. Y verás aquí que volvemos a renderizar todo. Y, bueno, podrías decir que podría usar alguna virtualización o desplazamiento virtual. Pero, bueno, primero que nada, la lista de emojis no es uniforme. Así que tenemos los títulos que ocupan todo el ancho.

Nos encontramos con listas no completas. Es una cuadrícula muy compleja. Y además, esto podría requerir una biblioteca de terceros. Y, bueno, no quiero usar una biblioteca de terceros. No quiero obligarte a instalar ninguna biblioteca de terceros solo porque instalaste mi paquete. Así que decidí no hacer eso y en su lugar resolverlo de una manera diferente.

Y la forma en que lo encontré, bueno, intenté mirar el DOM del emoji picker y ver qué tenía allí. Y lo primero que noté es que, bueno, hace un tiempo añadí una etiqueta de área para cada uno de los emojis. Y una etiqueta de área es una propiedad HTML que añadimos alguna descripción para el elemento que estamos mirando para que las personas con discapacidad visual, usuarios de nuestro sitio web o personas que usan un lector de pantalla, puedan saber realmente qué hay allí. Así que para cada uno de los emojis, usamos el nombre completo del emoji o el término de búsqueda del emoji como la etiqueta de área. Así que ya tenemos alguna información relacionada con la búsqueda en el DOM. Y pensé, bueno, tal vez pueda hacer uso de eso de alguna manera. Así que eso me llevó a investigar. Y ahora vamos al código e intentemos implementarlo desde cero.

Ahora tenemos el componente como estaba antes. Así que tenemos el componente de entrada dentro del... El elemento de entrada dentro del componente de búsqueda y usa un useFilterHook global. Y este useFilterHook actualiza un estado global y luego cuando cambiamos aquí, y luego se vuelve a renderizar en un lugar diferente. Así que eliminemos todo eso porque realmente no queremos usarlo más. Intentemos hacer algo diferente. Y bueno, la primera ley de React, en realidad tienes que tener estado para volver a renderizar. Así que añadamos un estado local solo para este componente. Así que hagamos esto const value setValue y establezcámoslo con una cadena vacía. Genial. Ahora, oh, importemos un nuevo estado. Genial.

Bien. Así que si intento hacer algo aquí ahora, verás que no estamos viendo ninguna respuesta a eso. Entonces, ¿por qué no podemos hacer con esta información? Bueno, creemos un nuevo componente justo al lado de este. Y llamémoslo CSS search dot TSX. E importemos. Siempre React desde React. Genial. Ahora hagamos export default function CSS search. Y tomemos value y value va a ser una cadena. Value es una cadena.

Genial. Ahora, si value está vacío. Oh. Devolvamos null. Y de lo contrario, también devolvamos null porque no sé qué hacer con él todavía. Así que usemos CSS search solo para ver que está ahí. Así que CSS search. Y pasémosle el value. Genial. Así que no hay errores. Pero de nuevo, no pasa nada. Realmente no estamos renderizando nada nuevo. Pero lo genial aparece ahora. Así que vuelvo a CSS search. Y lo que quiero hacer es añadir un nuevo elemento de estilo. Y todos te dirán que no hagas esto y probablemente no deberías. Pero funciona, supongo. Así que, ¿por qué no? Y lo que hace la etiqueta de estilo es aplicar algo de CSS en el DOM como una cadena. Y de nuevo, la gente te advertirá sobre eso. Pero en este caso, funciona bastante bien.

Así que hagamos esto. Y lo que quiero hacer, antes que nada, es tomar la lista de emojis y decir que, bueno, simplemente eliminar todo. Eliminar todos los emojis en caso de que tengamos algunos resultados de búsqueda. Así que primero que nada, tenemos la lista de emojis. Entonces, ¿cómo se llama el elemento de la lista de emojis? EPR emoji list. Tomemos ese. Oh. Oh, tiene que ser una cadena. Correcto. Así de simple. Y luego digamos que button EPR emoji. Ese es el elemento para cada uno de los emojis. Y hagamos display none. Entonces, lo que está pasando aquí es que si tenemos un valor, si no tenemos un valor, no estamos haciendo nada. Pero si tenemos un valor, simplemente estamos eliminando todos los emojis. Y bueno, escribamos algo. Oh, no tenemos ningún emoji. Eso es la mitad del trabajo. Ahora tenemos que hacer que los otros que necesitan aparecer, aparezcan. Así que hagamos esto. Primero que nada, intentemos encontrar todos los emojis que realmente tienen el valor correcto en ellos. Así que lo que queremos hacer es nuevamente ir a este y luego buscar todos los emojis que tienen la etiqueta de área con nuestro valor. Así que hagamos algo como esto. Podemos tener un selector de propiedad para la etiqueta de área. Y luego la parte genial es que podemos hacer una coincidencia parcial. Así que puede estar al principio, al final o en el medio. Y lo que queremos hacer aquí es cuando sea igual a nuestro valor. Y esta es la parte genial. Si es igual a nuestro valor, hagamos display flex. Ahora todos los emojis, si no cometo ningún error allí, todos los emojis que tienen nuestro valor en algún lugar de su etiqueta de área.

Podría estar de nuevo al principio, al final o en el medio. Se mostrarán como flex. Así que empecemos a escribir. K, I, N, G. Ahora estamos viendo algunos resultados y solo los emojis que realmente tienen esto. Así que tenemos guiñando, y tenemos caminando, y en bicicleta. Y tenemos bebiendo, y cocinando, y chocando copas. Tenemos todos los emojis que realmente tienen este término. Así que esto es bastante genial.

Y esto fue con dos líneas de CSS. Y veamos el rendimiento aquí antes de continuar con el resto. Así que intentemos. Bueno, esto es instantáneo. Y tratemos de ver con la limitación del rendimiento. Y de nuevo, bastante instantáneo. Así que ya me gusta. Pero mejoremos eso.

Así que veamos qué más podemos hacer. Así que además de eso, bueno, viste aquí que también tenemos estas categorías vacías. Ahora, en la versión basada en estado, bueno, podríamos filtrar todas las categorías que estaban vacías porque ya lo sabíamos. Pero en CSS, bueno, eliminamos todo. Pero la categoría no tiene el título en sí. No tiene el nombre del emoji. Por eso no está desapareciendo. Entonces, ¿qué hacemos aquí? Bueno, esto es bastante genial porque en CSS recientemente, y por recientemente, me refiero a hace dos años, creo, añadieron el atributo has, o el has al selector, perdón, que nos permite seleccionar basándonos en los hijos de un selector dado. Y esto nos permite realmente verificar si nuestro título o si nuestro grupo de emojis tiene los emojis que estamos buscando o no. Y si no existen allí, simplemente haremos que se eliminen a sí mismos. Así que hagamos esto. Así que quitemos esta lista de emojis y hagamos EPR emoji category.

Y luego decimos not. Not es el pseudo-selector que niega todo lo que viene dentro de él. {{^}}Y luego decimos has. Así que donde no tiene nuestra etiqueta de área o el elemento específico con la etiqueta de área. Y ahora lo que vamos a hacer es nuevamente display none.

Ahora, si empiezo a buscar aquí, veamos qué pasa. Espera. Estamos viendo que no tenemos categorías vacías. Y eso es nuevamente solo agregando esta pequeña parte. Ahora, te dirán, y esto probablemente sea cierto, que la combinación de not y has no es muy eficiente. Pero nuevamente, no se puede comparar con lo que había en la versión solo de JavaScript. Así que me parece un compromiso bastante razonable.

Ahora, tampoco tenemos una buena búsqueda sin el conteo de resultados de búsqueda. Entonces, ¿qué podemos hacer aquí? Bueno, CSS no puede contar, ¿verdad? ¿Puede? Bueno, veamos. Así que lo que podemos hacer aquí es algo bastante genial. Y este es uno de los trucos más antiguos y geniales de CSS que tenemos y no muchos lo usan. Por cierto, por una buena razón. Pero solo por el gusto de hacerlo, hagámoslo. Se llama un contador. Y podemos hacer counter reset. Y decir que lo llamaremos emojis y lo pondremos en cero. Y luego para cada uno de los elementos que estamos mostrando, podemos realmente incrementar el contador en uno. Así que hagamos counter increment en uno. Y lo siguiente que queremos hacer es realmente mostrarlo. Así que hagamos before. Así que hagamos EPR emoji list. Y lo que queremos hacer es antes, queremos mostrar en el contenido de ese elemento el contador real. Así que contenido, contenido, counter, emojis. Y lo que queremos hacer aquí es decir emojis encontrados. Y esto mostrará el conteo de emojis.

Pero si empiezo a escribir, veamos, veremos cero emojis encontrados. Espera, pero te prometí un contador aquí. Bueno, aparentemente la forma en que funciona el contador es que va elemento por elemento por elemento, incremento por incremento por incremento, y luego suma todo. Pero en nuestro elemento before, bueno, mucho antes de que se encontraran los elementos, así que no tenemos coincidencias. Entonces, ¿qué podríamos hacer?

Podríamos hacerlo después, ¿verdad? Pero si lo hago con el after, bueno, está aquí abajo. Esto no es bueno porque no queremos desplazarnos hasta el final solo para mostrar eso. Entonces, ¿qué podemos hacer? Bueno, este es otro truco genial. Lo que queremos hacer aquí es decir que la lista de emojis debe mostrarse como flex. Y, bueno, lo siguiente que queremos hacer es poner order menos uno para el after. Y esto llevará el elemento after hasta el principio de la lista de emojis.

Así que lo que pasa ahora es que escribo, y, bueno, verás que porque lo convertimos en flex, entonces obviamente todo está desordenado. Así que también hagamos flex direction column, y actualicemos. Bien, ahora estamos viendo que tenemos 353 emojis encontrados. Tenemos toda la lista ordenada correctamente. Y, bueno, veamos qué está pasando. Sí, tenemos un conteo funcionando. Agreguemos algo de espacio aquí. Genial.

Ahora, otra cosa genial que podemos hacer solo con CSS, bueno, o otra mejora genial sobre CSS que agregaron recientemente es la anidación de CSS. Así que esto es bastante complicado, diría yo, y esto es bastante complejo. Pero, ¿y si pudiéramos simplemente anidar todo bajo la lista de emojis? Así que voy a arreglarlo rápidamente y mover todo para que esté bajo la lista de emojis. Eso es bastante genial. E incluso el elemento after, o el pseudo elemento after, debería funcionar también, así como está. Y ahora si actualizo y empiezo a escribir, veremos que todo funciona como funcionaba antes. Así que creo que esto es bastante genial. Y nuevamente, intentemos compararlo con lo que era antes en términos de rendimiento. Vamos a ralentizarlo, y tratemos de ver cuánto tiempo toma. Oh Dios mío, lo actualicé mientras estaba ralentizando. Bien, intentemos de nuevo. E incluso mientras se ralentiza, esto es bastante instantáneo.

Y veamos de nuevo la pestaña de componentes y veamos las actualizaciones de estado, y veamos qué está pasando aquí. Y mientras escribo, vemos que solo se actualiza la barra de búsqueda. Ahora veamos nuestro DOM de resultado. Así que tenemos este estilo aquí, oh, no ese estilo, veamos aquí. Sí, tenemos ese elemento de estilo con todos nuestros cambios aquí. Así que esto es bastante genial. Por cierto, la anidación de CSS aún no es compatible con todos los navegadores, creo, o al menos no con navegadores heredados, así que verifica tu compatibilidad también.

Y esto es bastante, bastante impresionante, creo. Y bueno, esto funcionó bastante bien. Y me llevó a intentar pensar si esto funciona bastante bien, para qué más podría usarse. Y luego creé otro paquete, se llama flareup, que es una biblioteca de CSS en JS que lleva este concepto al siguiente nivel. Está basada en la sintaxis de stylex, la biblioteca de CSS en JS de Facebook meta, pero esta está hecha específicamente para paquetes NPM.

Lo que noté es que al construir un paquete NPM como emoji-picker-react, siempre hay un problema. No funciona en SSR para algunos de los usuarios, no funciona con este empaquetador o aquel empaquetador, o necesitan importar de manera diferente, o tengo que asumir que usan algún preprocesador de CSS. Y pensé, bueno, quiero que esto simplemente funcione para todos. Así que creé flareup, que es una biblioteca de CSS en JS destinada solo para paquetes NPM y solo para bibliotecas de código abierto que no están basadas en aplicaciones y no son aplicaciones. Y bueno, hace prácticamente lo mismo. Toma el CSS, lo coloca en un DOM, y simplemente funciona. Funciona en SSR, funciona en CSR. De hecho, puedo mostrarte que emoji-picker-react usa solo esto, solo flareup. Y si intento renderizar el emoji-picker sin ningún JavaScript, aún vendrá del servidor sin ningún problema. Obviamente, no pasará nada aquí porque es estático sin ningún JavaScript y sin React. Pero de nuevo, flareup hace el resto. Y la forma en que funciona, de nuevo, es colocando este, diría, masivo, pero aún así elemento de estilo justo en el DOM del selector. Así que esto es bastante genial también.

Muchas gracias. Fue un placer. Y disfruta el resto de la conferencia. Gracias.