Un Futuro con Menos JavaScript - Nuevas APIs de Navegador y su Impacto en el Futuro del Desarrollo de React

Hola, bienvenidos a un futuro con menos JavaScript. Nuevas APIs de navegador y su impacto en el futuro del desarrollo front-end. Mi nombre es Amir Sami. Soy ingeniero de software en S&C Electric Company. Para que no seamos extraños, les contaré un poco sobre mí. En mi tiempo libre, me gusta hornear deliciosos productos horneados, como este pastel. Me gusta programar. No es solo una profesión, también es un pasatiempo mío. Me gusta hacer senderismo y explorar la naturaleza, y me gusta levantar círculos pesados por alguna extraña razón. Sé que es una combinación extraña. Ahora, trabajo en S&C Electric Company, que es un proveedor global de equipos y servicios para sistemas de energía eléctrica.

Fuimos fundados en 1911 en Chicago, donde diseñamos y fabricamos productos de conmutación y protección. Hoy en día, nuestra diversa fuerza laboral global desarrolla soluciones innovadoras para una red eléctrica más inteligente y resistente. Basándonos en este legado de innovación tecnológica y servicio al cliente, S&C impulsa la transformación de la red para un futuro de energía eléctrica sostenible y sin interrupciones. Entonces, el título de la charla es un futuro con menos JavaScript, pero probablemente se pregunten, ¿qué diablos quiero decir con eso?

Me refiero a un futuro con menos JavaScript. Pero no es un futuro sin JavaScript, solo menos. Ahora, antes de hablar sobre el futuro, quiero dar un paso atrás en el tiempo y ver lo difícil que era ser un ingeniero de software para la web hace unos 14 años. Para algunos de los ingenieros de software más experimentados en la audiencia, estoy seguro de que probablemente han visto preguntas en Stack Overfill como esta, como ¿cómo puedo centrar horizontalmente un elemento? Esto se preguntó hace unos 17 años, y la primera respuesta aceptada para esto fue simplemente establecer un margen automático con 50%, lo cual sabemos ahora que hay muchas más cosas que podemos hacer para centrar un elemento. Otra pregunta era, ¿cómo puedo modificar la URL sin recargar la página? Y la respuesta a esto en el 09 era simplemente que no había forma de hacerlo. Ahora sabemos que hay formas de hacerlo, pero en ese entonces, esto no era algo que se pudiera hacer. Y por último, está la pregunta de cómo se puede cambiar el estilo de un marcador de posición con una entrada. La respuesta a esto en 2010 era que esto solo estaba disponible o era posible con navegadores que estaban habilitados con WebKit. Así que ahora hemos echado un vistazo a cómo era ser un ingeniero de software en el pasado sin algunas de las nuevas APIs de navegador que están disponibles para nosotros ahora. Y tenemos una mejor apreciación por las APIs de navegador y lo que nos permiten hacer. Así que ha habido muchas nuevas APIs de navegador que se han lanzado en los años más recientes, como el selector de sombrero en CSS, filtro de fondo, la función de atributo en CSS, scope, junto con muchas otras poderosas APIs de navegador. Pero para el propósito de la charla de hoy, solo me voy a centrar en estas ocho APIs de navegador y cómo creo que podemos usarlas para escribir menos JavaScript y proporcionar mejores experiencias a nuestros usuarios. Ahora les guiaré a través de eso mostrándoles dos demostraciones, un selector de fechas, específicamente un selector de rango de fechas y un formateador de texto. ¿Cómo se ve el selector de fechas? Bueno, este es el selector de fechas que creé. Puedes abrirlo y cerrarlo haciendo clic en el campo. El panel aparece debajo del campo.

Cuando seleccionas una fecha de inicio y pasas el ratón sobre cualquier otra fecha después de la fecha de inicio, podemos ver que el rango se resalta y puedes cerrar el panel haciendo clic en el campo o haciendo clic fuera del componente por completo.

Ahora echemos un vistazo a algo de código para ver cómo funciona esto antes de integrar con las nuevas APIs de navegador. Aquí tenemos el elemento button, que es representativo del campo que vimos. Y notarás que hay un controlador de clic aquí, que cuando el usuario hace clic en el botón, establecemos una variable de estado para alternar si el panel aparece o no.

Si echamos un vistazo al código del panel, notaremos que se renderiza condicionalmente. Y si miramos más dentro del panel, tenemos múltiples botones. Cada botón representa cada una de las fechas individuales dentro del rango o dentro del selector. Y tenemos un controlador de ratón, más bien un controlador de mouse over para cada uno de esos botones.

Y lo que hace este controlador de mouse over es que si lo miramos, notaremos que cada vez que el usuario pasa el ratón sobre una de esas fechas, obtenemos todos los hijos dentro del panel y los iteramos. Y si está dentro del rango de la fecha de inicio seleccionada y la fecha o el elemento sobre el que el usuario está pasando el ratón, establecemos un fondo de este color azul. Y si no lo está, entonces preestablecemos el valor a nada. Así que vuelve al estilo predeterminado.

Ahora tenemos que hacer esta última parte. De lo contrario, si no lo hiciéramos y el usuario continuara pasando el ratón sobre las fechas dentro del selector de fechas, no se restablecerían a su valor predeterminado y aparecerían todas en este tipo de color azul al pasar el ratón.

Ahora, para cerrar el panel, tenemos que añadir un event listener al documento, específicamente un event listener de mouse down. Y cada vez que un usuario hace clic en el documento mientras el componente ha sido montado, tenemos que verificar o interceptar todos esos clics. Y si el clic no está dentro del componente, entonces establecemos la variable de estado del panel a false.

Ahora, ese es el selector de rango de fechas que creé. Pero hay un comportamiento extraño donde si estás pasando el ratón entre las filas de la semana, el resaltado no desaparece inmediatamente. Hay mucha lógica compleja que mantener. Y hay potencial para múltiples event listeners en el documento si tienes múltiples instancias de este componente en la página. Y hay múltiples actualizaciones del DOM al pasar el ratón. Cada vez que un usuario pasa el ratón sobre una fecha, recorremos todos los elementos dentro del panel. Y establecemos el color de fondo a azul o a nada, lo cual puede ser costoso.

Así que echemos un vistazo a lo que podemos hacer con algunas de las nuevas APIs de navegador que están disponibles para nosotros ahora. Así que este es el elemento button, pero lo hemos refactorizado un poco. Hemos sacado el controlador de on click. Y en su lugar, lo hemos reemplazado con este popover target. Así que popover target es una nueva API de navegador que es parte del conjunto de APIs de popover. Y lo que estamos haciendo es decirle al navegador que cuando el usuario haga clic en este elemento para alternar este panel de selector de fecha y hora, un elemento con este ID de date time picker panel, que verás en un momento.

Y esto está disponible como base desde el año pasado, lo cual es fantástico. Así que ahora, si echamos un vistazo al panel de selector de fecha y hora, el panel que aparece debajo del campo, notaremos que ya no se renderiza condicionalmente. El ID aquí coincide con el valor del popover target para el botón que acabamos de ver. Hay este nuevo atributo popover, que tiene tres valores disponibles: auto, hint y manual. Lo que esto está haciendo es decirle al navegador que este es un elemento popover. Y uno de los tres valores aquí solo le está diciendo al navegador cómo debería operar. Y esto está disponible como base desde el año pasado también.

Y por último, tenemos este event listener de toggle aquí, donde cuando el usuario alterna el panel para abrirlo y cerrarlo con el campo, este event handler se inicia o invoca. Y podemos realizar alguna lógica como restablecer el mes del calendario al mes actual cuando el usuario lo cierra o lo abre. Y esto está disponible como base desde 2023, lo cual también es fantástico.

Ahora, el panel del selector de fecha y hora aparece, pero ¿cómo controlamos dónde aparece dentro del navegador? Podemos establecer una posición absoluta y hacer un top y un left de cualquier valor de píxel para posicionarlo. Pero eso no es óptimo si está siendo cortado por el viewport, y tenemos que implementar mucha lógica adicional para moverlo. Pero hay una nueva API de navegador que nos ayuda con eso.

Y es la anchor API. Así que si echamos un vistazo al CSS para el elemento field, podemos notar que estamos usando esta nueva anchor name API. Y le dice al navegador que este es un elemento que puede ser anclado. Tiene disponibilidad limitada, por lo que solo falta en Firefox, pero debería añadirse relativamente pronto. Así que crucemos los dedos.

Y le dice al navegador a qué elemento anclar este elemento. Así que en este caso, le estamos diciendo que se ancle a ese campo de rango de fechas que acabamos de configurar. Y esto solo tiene disponibilidad limitada. Así que solo falta en Firefox, pero crucemos los dedos nuevamente, se añadirá pronto a Firefox.

Y por último, para decirle al navegador cómo posicionar esto en relación con el anclado, tenemos esta anchor API, que es una nueva API, y le dice al navegador cómo anclar la posición del ancla. Así que aquí podemos ver que tenemos ancla abajo y ancla izquierda para posicionar el panel en la parte inferior del ancla a la izquierda del ancla. Y nuevamente, esto tiene disponibilidad limitada solo falta en Firefox.

Y por último, en términos de CSS, ¿cómo estilizamos el rango? Entonces, ¿cómo destacamos los rangos entre la fecha de inicio seleccionada y la fecha sobre la que el usuario está pasando el ratón? ya no tenemos que usar un controlador de eventos de mouse over. En su lugar, podemos hacer todo eso en CSS. Así que aquí está este gran fragmento de CSS. Y sé que es un poco difícil de interpretar. Así que vamos a profundizar en ello. Específicamente, quiero echar un vistazo a este not has. Así que aquí, si queremos interpretarlo, podemos leerlo como seleccionar elementos de fecha que no tienen un hermano de fecha de finalización seleccionada después, con énfasis en no tienen porque estamos usando este selector has dentro del not. Si miramos un poco más allá, hay otro has que dice, si lo interpretamos un poco más, dice que selecciona elementos de fecha que no tienen un hermano de fecha de finalización seleccionada después, pero sí tienen un hermano botón después que está siendo pasado el ratón. Énfasis en sí tienen porque estamos usando el selector has. Así que esto aplica estilos a cualquiera de los elementos entre la fecha de inicio seleccionada y la fecha sobre la que el usuario está pasando el ratón. Todo sin mouse over. Y luego el último aquí es otro not has, y si lo interpretamos, se lee como seleccionar elemento de fecha que no tiene un hermano de fecha de finalización seleccionada después, pero está siendo pasado el ratón. Así que todo eso para decir, estamos usando la nueva API has en CSS, y selecciona si el elemento padre tiene un selector proporcionado, puede actuar como un selector padre, lo cual es algo que no teníamos antes. Y está disponible como base desde finales de 2023.

Así que ese es el selector de rango de fechas que creé usando las nuevas APIs de navegador. Puedes seleccionar una fecha de inicio, seleccionar una fecha de fin, puedes pasar el ratón sobre las fechas, pasar el ratón, tenemos una mejor experiencia de usuario, es más estable, puedes abrir y cerrar el panel haciendo clic fuera del panel o en el campo. Pero el clave clave nueve entre ustedes podría haber notado que hay una animación ingeniosa y navegas entre los meses. Así que aquí puedes ver que animamos de una manera y de la otra. Eso es algo que no teníamos antes. Y es un pequeño extra. Entonces, ¿cómo hacemos eso? Estamos usando transiciones de vista. Así que te guiaré sobre cómo usar la API de transición.

Aquí, podemos ver que he añadido este atributo personalizado a este desarrollo dirección de animación. Y estamos configurando el valor a una variable estable que representa en qué dirección animar. Así que cuando el usuario hace clic en el botón de adelante o atrás, estamos configurando este valor a anterior o siguiente. Y verás por qué en solo un momento. Ahora, si profundizamos en el CSS para ese desarrollo, aquí podemos ver que tenemos este atributo de nombre de transición de vista en CSS, que tiene una nueva API de navegador, y configura el nombre de la animación para el elemento específicamente el nombre de la transición de vista. Pero tiene disponibilidad limitada, solo falta en Firefox, pero debería añadirse pronto.

Y luego tenemos esta función de atributo. Así que el atributo ha estado presente por algún tiempo ahora, pero el atributo para todas las propiedades es un soporte experimental, pero con suerte, lo añadiré pronto, de hecho, funciona y estoy en Chrome, lo siento. Y así aquí, lo que estamos haciendo es usarlo para obtener el valor de ese atributo, que configuramos en el elemento dirección de animación, y lo estamos configurando a este atributo de nombre de transición de vista. Ahora, para activar la animación, tenemos estos nuevos pseudo selectores en CSS vista transición antigua, que acepta el nombre de la animación anterior o siguiente en este caso, y aplica los estilos al elemento que se está animando. Y vista transición nueva es también una nueva API de navegador y aplica estilos al nuevo elemento que se está animando. Pero tiene disponibilidad limitada. Solo falta en Firefox. Así que con suerte, lo añadirán pronto. Y por último, ¿cómo iniciamos esta animación? Bueno, podemos hacerlo usando el inicio de transición de vista, que es una nueva API. Y le dice al navegador que inicie la animación que ha habido alguna actualización realizada y que anime entre ese estado antiguo y el nuevo estado. Pero nuevamente, disponibilidad limitada, solo falta en Firefox. Así que ese es el selector de rango de fechas aquí. Y hemos hecho muchos cambios en él. Pero al hacerlo eliminamos dos oyentes de eventos, hemos añadido soporte de animación, hemos eliminado la lógica de renderizado condicional, hemos añadido soporte para la posición automática del panel. Y lo más importante, hemos reducido la cantidad de JavaScript que hemos tenido que escribir en aproximadamente un 7%. Y eso no incluye animaciones.

Si hubiera añadido animación, eso sería mucho más código. Así que pasemos al formateador de texto. Así que este formateador de texto es algo que construí en mi sitio personal, puedes revisarlo si quieres. Funciona un poco como Grammarly, donde puedes ingresar algún texto, y si hay algún tipo de error, lo resalta. No he añadido soporte de hover en la versión en vivo, solo como un FYI. Pero probablemente te estés preguntando cómo demonios funciona esto. O cómo funcionan cosas como esta, como Grammarly, o incluso el exportador de imágenes de código de Carbon. Bueno, funcionan con este concepto de capas. Así que verás eso en solo un momento una vez que termine de escribir esto.

Así que si expando las capas, podemos ver que en realidad hay dos capas. Hay una capa de entrada, y hay una capa de resaltado, la capa de entrada se encuentra arriba. Y esa es la capa con la que el usuario está interactuando en la que estás escribiendo. Pero la capa debajo de esa es la capa de resaltado, que en realidad tiene los elementos con el CSS aplicado para el resaltado. Así que si echamos un vistazo a algún código, notaremos, nuevamente, como acabo de mencionar, hay dos capas, hay una capa de resaltado, y hay un área de texto, que es el elemento de capa de entrada. Ahora, la razón por la que tenemos que tener dos capas es porque es difícil en esta forma anterior, o esta forma antigua, aplicar estilos en el mismo elemento en el que el usuario está escribiendo activamente sin causar algún comportamiento raro. Así que por eso tienes que mantener dos capas separadas.

Ahora, dado que tenemos dos capas, tenemos que mantenerlas sincronizadas. Y dado que el usuario solo está interactuando con una de ellas, tenemos que añadir un oyente de eventos, al menos uno, probablemente más que esto. Así que aquí tenemos un oyente de eventos de desplazamiento, que cuando el usuario se desplaza en el área de texto, tenemos que cambiar la posición de desplazamiento de la capa de resaltado para asegurarnos de que se mantengan sincronizadas. Ahora, si echamos un vistazo a este uso de efectos bastante grande, notaremos que estamos haciendo bastante aquí. Pero lo importante, es que estamos reconstruyendo el contenido de la capa de resaltado cada vez que el usuario ingresa texto en el área de texto, lo cual no es la forma más óptima de hacer esto. Pero es la forma en que muchas de estas implementaciones lo hacen. Así que nos sumergimos en el código, veremos que aquí estamos construyendo la cadena HTML, y cualquier contenido no resaltado lo estamos agregando a esta cadena. Y luego si hay, ya sabes, algo para resaltar, estamos creando un elemento span y agregándolo a la cadena HTML. Y por último, estamos configurando este HTML interno para la capa de resaltado. Y estamos creando esta actualización del DOM al hacerlo. Así que ese es el formateador de texto. Pero código demasiado complicado. Y tiene mutaciones repetidas y costosas a los elementos del DOM. Entonces, ¿cómo podemos refactorizar esto? Echemos un vistazo. Bueno, primero, eliminemos las capas duplicadas. Y tengamos una sola capa, una capa editable de contenido.

Específicamente, tenemos una capa editable de contenido solo de texto plano. Así que solo texto plano es una nueva API. Y permite solo la entrada de texto sin formato. Y está disponible como base a partir de este año. Así que es una nueva API. Pero básicamente lo que significa solo texto plano es, aquí podemos ver en esta bonita demostración, si copias algún código, o más bien copias algún texto en un área editable de contenido, trae todo el formato, el texto plano elimina todo eso y pega solo el texto sin formato, que es exactamente lo que queremos en este caso.

Ahora, una vez que hemos igualado el texto que los usuarios han ingresado en el div editable de contenido, y decimos, oye, sabes, hay algún problema que necesitamos resaltar, tenemos que crear un objeto de rango, que es un objeto disponible para nosotros en JavaScript. Y lo importante es que tenemos que definir el rango de fecha de inicio y fin aquí. Así que comenzamos el, establecemos el inicio para la coincidencia, y tenemos que pasarle dos parámetros. Así que primero siendo una referencia al elemento del DOM. Y el segundo siendo el índice de la coincidencia. Así que para establecer el inicio, es el índice de inicio, y establecer y es el índice de fin.

Ahora, ¿cómo creamos los resaltados una vez que hemos creado estos objetos de rango? Bueno, lo hacemos con solo estas dos líneas aquí. Lo más importante es que creamos este nuevo objeto de resaltado, que es una nueva API. Y representa todos los rangos que queremos resaltar. Y está disponible como base a partir de este año. Así que nuevamente, una nueva API. Y para decirle al navegador que cree los resaltados, una vez que hemos creado el objeto de resaltado, llamamos al CSS dot highlights que establece, que es nuevamente, una nueva API del navegador. Y le proporcionamos dos parámetros. Primero es el nombre del grupo de resaltado. Y segundo es el objeto de resaltado que creamos en el paso anterior.

Ahora esto crea los resaltados, pero no se aplica realmente a los estilos. Entonces, ¿cómo hacemos eso? Bueno, tenemos que sumergirnos en algo de CSS. Y específicamente, hay este nuevo pseudo selector highlight, que acepta un nombre de grupo como parámetro, y nos permite resaltar esos grupos en consecuencia. Y cualquier estilo dentro de este selector se aplicará al resaltado. Ahora, esto tiene disponibilidad limitada, solo falta en Firefox, pero debería añadirse relativamente pronto.

Ahora hay una API más que quiero señalar aquí, que es la relative color API, que es una nueva API que te permite convertir un color de un formato a otro sin tener que hacerlo manualmente. Así que en este caso, estamos convirtiendo de una variable CSS, que es un color hex a un RGB, y también estamos aplicando una opacidad a él. Así que esto es algo que realmente he disfrutado usar este año. Y está disponible como base a partir de este año también.

Y está disponible con estas otras funciones de color, así como no solo RGB, sino también HSL, HWVLAB, LCH, OKLAB, y OKLCH. Así que ese es el text formatter. Y aquí podemos ver que este es el text formatter refactorizado con esas nuevas APIs de navegador. Mantenemos la funcionalidad donde puedes resaltar cualquier error en el texto. Pero de nuevo, ¿cómo funciona esto? Bueno, eliminamos las capas, las capas duplicadas como vimos en el código. Y también hemos eliminado dos event listeners. Hemos eliminado la capa duplicada. Eliminamos la lógica para duplicar texto al cambiar, todo mientras reducimos la cantidad de JavaScript en aproximadamente un 7%, lo cual es nuevamente fantástico.