Hace unos 15 años, trabajaba en una empresa donde creamos aplicaciones para agentes de viajes, trabajadores de aeropuertos y compañías aéreas. También creamos nuestro propio marco interno para componentes de interfaz de usuario y capacidades de aplicaciones de una sola página. Teníamos componentes para todo: campos, botones, pestañas, rangos, tablas de datos, menús, selectores de fechas, selecciones y selecciones múltiples. Incluso teníamos un componente div. Por cierto, nuestro componente div fue excelente, nos permitió redondear esquinas en todos los navegadores, lo cual, lo creas o no, no era algo fácil de hacer en ese momento.
Nuestro trabajo tuvo lugar en un momento de nuestra historia en el que JS, Ajax y HTML dinámico fueron vistos como una revolución que nos llevó hacia el futuro. De repente, pudimos actualizar una página dinámicamente, obtener datos de un servidor y evitar tener que navegar a otras páginas, lo que se consideró lento y mostró un gran rectángulo blanco en la pantalla entre las dos páginas. Había una frase, popularizada por Jeff Atwood (el fundador de StackOverflow), que decía: "Cualquier aplicación que pueda escribirse en JavaScript eventualmente se escribirá en JavaScript".—Jeff Atwood
Para nosotros en ese momento, esto nos pareció un desafío: crear esas aplicaciones. Se sintió como una aprobación general hacer todo con JS. Así que hicimos todo con JS y realmente no nos tomamos el tiempo para investigar otras formas de hacer las cosas. Realmente no sentimos el incentivo de aprender adecuadamente lo que HTML y CSS podían hacer. Realmente no percibíamos la web como una plataforma de aplicaciones en evolución en su totalidad. Principalmente lo vimos como algo que necesitábamos solucionar, especialmente en lo que respecta a la compatibilidad con el navegador. Podríamos simplemente agregarle más JS para hacer las cosas. ¿Me habría ayudado tomarme el tiempo para aprender más sobre cómo funciona la web y qué estaba disponible en la plataforma? Claro, probablemente podría haber eliminado un montón de código que realmente no era necesario. Pero, en ese momento, tal vez no tanto. Verá, las diferencias entre navegadores eran bastante significativas en aquel entonces. Esta era una época en la que Internet Explorer seguía siendo el navegador dominante, seguido de cerca por Firefox, pero comenzaba a perder participación de mercado debido a que Chrome ganaba rápidamente popularidad. Aunque Chrome y Firefox fueron bastante buenos a la hora de acordar estándares web, los entornos en los que se ejecutaban nuestras aplicaciones significaron que tuvimos que soportar IE6 durante mucho tiempo. Incluso cuando se nos permitió admitir IE8, todavía tuvimos que lidiar con muchas diferencias entre los navegadores. No solo eso, sino que la web de la época simplemente no tenía tantas capacidades integradas en la plataforma.
Avance rápido hasta el día de hoy. Las cosas han cambiado enormemente. No sólo tenemos más de estas capacidades que nunca, sino que también ha aumentado el ritmo al que están disponibles. Entonces, permítanme hacer la pregunta nuevamente: ¿Le ayudaría hoy tomarse el tiempo para aprender más sobre cómo funciona la web y qué está disponible en la plataforma? Absolutamente sí. Aprender a comprender y utilizar la plataforma web actual le otorga una gran ventaja sobre otros desarrolladores. Ya sea que trabaje en el rendimiento, la accesibilidad, la capacidad de respuesta, todos ellos juntos o simplemente en el envío de funciones de interfaz de usuario, si desea hacerlo como ingeniero responsable, conocer las herramientas que están disponibles le ayudará a alcanzar sus objetivos más rápido y mejor. Algunas cosas para las que quizás ya no necesites una biblioteca Sabiendo qué navegadores soportan hoy en día, la pregunta es: ¿Qué podemos deshacernos? ¿Necesitamos un componente div para redondear esquinas en 2025? Por supuesto que no lo hacemos. La propiedad border-radius ha sido compatible con todos los navegadores utilizados actualmente durante más de 15 años. Y pronto también llegará la forma de esquina, para rincones aún más elegantes. Echemos un vistazo a las funciones relativamente recientes que ahora están disponibles en los principales navegadores y que puede utilizar para reemplazar las dependencias existentes en su código base. El punto no es deshacerse inmediatamente de todas sus queridas bibliotecas y reescribir su código base. En cuanto a todo lo demás, primero deberá tener en cuenta la compatibilidad del navegador y decidir en función de otros factores específicos de su proyecto. Las siguientes funciones están implementadas en los tres motores de navegador principales (Chromium, WebKit y Gecko), pero es posible que tenga diferentes requisitos de compatibilidad con el navegador que le impidan utilizarlas de inmediato. Sin embargo, todavía es un buen momento para conocer estas funciones y tal vez planear usarlas en algún momento. Ventanas emergentes y diálogos La API Popover, el elemento HTML
Claro, la velocidad de tu conexión a Internet probablemente también haya aumentado, pero ese no es el caso para todos. Y tampoco todo el mundo tiene las mismas capacidades de dispositivo. En cambio, incorporar código de terceros para las cosas que puede hacer con la plataforma probablemente signifique que envíe más código y, por lo tanto, llegue a menos clientes de los que normalmente lo haría. En la web, un mal rendimiento de carga genera grandes tasas de abandono y perjudica la reputación de la marca. Ejecutar menos código en dispositivos Además, el código que envía a los dispositivos de sus clientes probablemente se ejecute más rápido si utiliza menos abstracciones de JavaScript en la parte superior de la plataforma. Probablemente también sea más receptivo y más accesible de forma predeterminada. Todo esto genera más y más clientes satisfechos. Consulte el blog anual sobre brecha de desigualdad en el desempeño de mi colega Alex Russell, que muestra que los dispositivos premium están en gran medida ausentes de mercados con miles de millones de usuarios debido a la desigualdad de riqueza. Y esta brecha no hace más que crecer con el tiempo.
Disposición de mampostería incorporada Una característica de la plataforma web que llegará pronto y que me entusiasma mucho es CSS Masonry.
Permítanme comenzar explicando qué es la Masonería. ¿Qué es la mampostería? La mampostería es un tipo de diseño que Pinterest hizo popular hace años. Crea pistas independientes de contenido dentro de las cuales los elementos se empaquetan lo más cerca posible del inicio de la pista.
Mucha gente ve la Masonería como una gran opción para portafolios y galerías de fotos, lo cual ciertamente puede hacer. Pero Masonry es más flexible que lo que ves en Pinterest y no se limita solo a diseños en forma de cascada. En un diseño de mampostería:
Las pistas pueden ser columnas o filas:
No es necesario que todas las pistas de contenido sean del mismo tamaño:
Los elementos pueden abarcar varias pistas:
Los elementos se pueden colocar en pistas específicas; No es necesario que sigan siempre el algoritmo de colocación automática:
Demostraciones Aquí hay algunas demostraciones simples que hice usando la próxima implementación de CSS Masonry en Chromium. Una demostración de la galería de fotos que muestra cómo los elementos (el título en este caso) pueden abarcar varias pistas:
Otra galería de fotos que muestra pistas de diferentes tamaños:
Un diseño de sitio de noticias con algunas pistas más anchas que otras y algunos elementos que abarcan todo el ancho del diseño:
Un tablero kanban que muestra que los artículos se pueden colocar en pistas específicas:
Nota: ElLas demostraciones anteriores se realizaron con una versión de Chromium que aún no está disponible para la mayoría de los usuarios web, porque CSS Masonry recién está comenzando a implementarse en los navegadores. Sin embargo, los desarrolladores web ya llevan años utilizando bibliotecas para crear diseños de Masonry. Sitios que utilizan mampostería hoy De hecho, la masonería es bastante común en la web hoy en día. Aquí hay algunos ejemplos que encontré además de Pinterest:
Y algunos ejemplos más, menos obvios:
Entonces, ¿cómo se crearon estos diseños? Soluciones alternativas Un truco que he visto usado es usar un diseño Flexbox, cambiar su dirección a columna y configurarlo para que se ajuste. De esta manera, puedes colocar elementos de diferentes alturas en múltiples columnas independientes, dando la impresión de un diseño de mampostería:
Sin embargo, existen dos limitaciones con esta solución alternativa:
El orden de los elementos es diferente de lo que sería con un diseño de mampostería real. Con Flexbox, los elementos llenan primero la primera columna y, cuando está llena, pasan a la siguiente columna. Con Masonry, los elementos se apilarían en cualquier pista (o columna en este caso) que tenga más espacio disponible. Pero también, y quizás lo más importante, esta solución requiere que establezca una altura fija para el contenedor Flexbox; de lo contrario, no se produciría ningún envoltorio.
Bibliotecas de mampostería de terceros Para casos más avanzados, los desarrolladores han estado utilizando bibliotecas. La biblioteca más conocida y popular para esto se llama simplemente Masonry y, según NPM, se descarga unas 200.000 veces por semana. Squarespace también proporciona un componente de diseño que representa un diseño de mampostería, como alternativa sin código, y muchos sitios lo utilizan. Ambas opciones utilizan código JavaScript para colocar elementos en el diseño. Albañilería empotrada Estoy muy emocionado de que Masonry esté comenzando a aparecer en los navegadores como una función CSS incorporada. Con el tiempo, podrá utilizar Masonry tal como lo hace con Grid o Flexbox, es decir, sin necesidad de soluciones alternativas ni código de terceros. Mi equipo en Microsoft ha estado implementando soporte integrado de Masonry en el proyecto de código abierto Chromium, en el que se basan Edge, Chrome y muchos otros navegadores. En realidad, Mozilla fue el primer proveedor de navegadores en proponer una implementación experimental de Masonry en 2020. Y Apple también ha estado muy interesada en hacer realidad este nuevo diseño web primitivo. El trabajo para estandarizar la función también avanza, con un acuerdo dentro del grupo de trabajo de CSS sobre la dirección general e incluso un nuevo tipo de visualización: carriles de cuadrícula. Si desea obtener más información sobre Masonería y realizar un seguimiento del progreso, consulte mi página de recursos de CSS Masonry. Con el tiempo, cuando Masonry se convierta en una característica básica, al igual que Grid o Flexbox, podremos simplemente usarlo y beneficiarnos de:
Mejor rendimiento, Mejor capacidad de respuesta, Facilidad de uso y código más simple.
Echemos un vistazo más de cerca a estos. Mejor rendimiento Crear su propio sistema de diseño similar al de Masonry, o utilizar una biblioteca de terceros, significa que tendrá que ejecutar código JavaScript para colocar elementos en la pantalla. Esto también significa que este código bloqueará la representación. De hecho, o no aparecerá nada, o las cosas no estarán en los lugares correctos o en el tamaño correcto, hasta que se haya ejecutado el código JavaScript. El diseño de mampostería se usa a menudo para la parte principal de una página web, lo que significa que el código haría que su contenido principal apareciera más tarde de lo que podría aparecer de otro modo, degradando su LCP, o métrica de pintura con contenido más grande, que juega un papel importante en el rendimiento percibido y la optimización de los motores de búsqueda. Probé la biblioteca Masonry JS con un diseño simple y simulando una conexión 4G lenta en DevTools. La biblioteca no es muy grande (24 KB, 7,8 KB comprimidos), pero tardó 600 ms en cargarse en mis condiciones de prueba. Aquí hay una grabación de rendimiento que muestra ese largo tiempo de carga de 600 ms para la biblioteca Masonry y que no se produjo ninguna otra actividad de renderizado mientras eso sucedía:
Además, después del tiempo de carga inicial, el script descargado debía analizarse, compilarse y luego ejecutarse. Todo lo cual, como se mencionó anteriormente, bloqueaba la visualización de la página. Con una implementación de Masonry incorporada en el navegador, no tendremos un script para cargar y ejecutar. El motor del navegador simplemente hará su trabajo durante el paso inicial de representación de la página. Mejor capacidad de respuesta De manera similar a cuando se carga una página por primera vez, cambiar el tamaño de la ventana del navegador hace que el diseño de esa página se muestre nuevamente. Sin embargo, en este punto, si la página utiliza la biblioteca Masonry JS, no es necesario volver a cargar el script, porque ya estáaquí. Sin embargo, es necesario ejecutar el código que mueve los elementos a los lugares correctos. Ahora bien, esta biblioteca en particular parece ser bastante rápida al hacer esto cuando se carga la página. Sin embargo, anima los elementos cuando necesitan moverse a un lugar diferente al cambiar el tamaño de la ventana, y esto marca una gran diferencia. Por supuesto, los usuarios no dedican tanto tiempo a cambiar el tamaño de las ventanas de su navegador como lo hacemos nosotros, los desarrolladores. Pero esta experiencia de cambio de tamaño animado puede ser bastante discordante y aumenta el tiempo percibido que le toma a la página adaptarse a su nuevo tamaño. Facilidad de uso y código más simple Lo fácil que es utilizar una función web y lo simple que parece el código son factores importantes que pueden marcar una gran diferencia para su equipo. Por supuesto, nunca pueden ser tan importantes como la experiencia del usuario final, pero la experiencia del desarrollador afecta la capacidad de mantenimiento. El uso de una función web incorporada conlleva importantes beneficios en ese frente:
Los desarrolladores que ya conocen HTML, CSS y JS probablemente podrán utilizar esa función fácilmente porque ha sido diseñada para integrarse bien y ser coherente con el resto de la plataforma web. No hay riesgo de que se introduzcan cambios importantes en la forma en que se utiliza la función. Existe casi cero riesgo de que esa característica quede obsoleta o no se mantenga.
En el caso de Masonry integrado, debido a que es un diseño primitivo, lo usas desde CSS, al igual que Grid o Flexbox, sin JS involucrado. Además, otras propiedades CSS relacionadas con el diseño, como el espacio, funcionan como es de esperar. No hay trucos ni soluciones alternativas que deba conocer, y lo que aprende está documentado en MDN. Para la biblioteca Masonry JS, la inicialización es un poco compleja: requiere un atributo de datos con una sintaxis específica, junto con elementos HTML ocultos para establecer los tamaños de columna y espacio. Además, si desea abarcar columnas, debe incluir el tamaño del espacio usted mismo para evitar problemas:
Comparemos esto con cómo se vería una implementación integrada de Masonry:
Código más simple y compacto que puede usar cosas como espacios y donde las pistas de expansión se realizan con el espacio 2, como en la cuadrícula, y no requiere que calcules el ancho correcto que incluye el tamaño del espacio. ¿Cómo saber qué está disponible y cuándo estará disponible? En general, la pregunta no es realmente si se debe utilizar Masonry integrado en lugar de una biblioteca JS, sino cuándo. La biblioteca Masonry JS es increíble y ha estado llenando un vacío en la plataforma web durante muchos años, y para muchos desarrolladores y usuarios satisfechos. Tiene algunos inconvenientes si lo comparas con una implementación de Masonry incorporada, por supuesto, pero esos no son importantes si esa implementación no está lista. Es fácil para mí enumerar estas nuevas características interesantes de la plataforma web porque trabajo en un proveedor de navegadores y, por lo tanto, tiendo a saber lo que está por venir. Pero los desarrolladores a menudo comparten, encuesta tras encuesta, que hacer un seguimiento de las cosas nuevas es difícil. Mantenerse informado es difícil y, de todos modos, las empresas no siempre dan prioridad al aprendizaje. Para ayudar con esto, aquí hay algunos recursos que brindan actualizaciones de manera simple y compacta para que pueda obtener la información que necesita rápidamente:
La plataforma Web cuenta con el explorador del sitio: Quizás le interese su página de notas de la versión. Y, si le gusta el RSS, consulte el feed de notas de la versión, así como el feed de Baseline recientemente disponible y ampliamente disponible.
La redPanel de estado de la plataforma: Es posible que le gusten sus distintas páginas del año base.
Página de hoja de ruta del estado de la plataforma Chrome.
Si tiene un poco más de tiempo, es posible que también le interesen las notas de versión de los proveedores de navegadores:
Cromo Borde Firefox safari
Para obtener aún más recursos, consulte mi hoja de referencia para navegar por la plataforma web. Lo mío aún no está implementado Ésa es la otra cara del problema. Incluso si encuentra el tiempo, la energía y las formas de realizar un seguimiento, todavía existe frustración al lograr que se escuche su voz y se implementen sus funciones favoritas. Tal vez haya estado esperando durante años a que se resuelva un error específico o que se incluya una característica específica en un navegador que aún falta. Lo que diré es que los proveedores de navegadores escuchan. Formo parte de varios equipos de varias organizaciones donde discutimos las señales y los comentarios de los desarrolladores todo el tiempo. Analizamos muchas fuentes diferentes de comentarios, tanto internas de cada proveedor de navegador como externas/públicas en foros, proyectos de código abierto, blogs y encuestas. Y siempre intentamos crear mejores formas para que los desarrolladores compartan sus necesidades y casos de uso específicos. Entonces, si puede, exija más a los proveedores de navegadores y presiónenos para implementar las funciones que necesita. Entiendo que lleva tiempo y también puede resultar intimidante (sin mencionar una alta barrera de entrada), pero también funciona. Aquí hay algunas maneras en que puede hacer que se escuche su voz (o la de su empresa): Realice las encuestas anuales sobre el estado de JS, el estado de CSS y el estado de HTML. Desempeñan un papel importante en la forma en que los proveedores de navegadores priorizan su trabajo. Si necesita que una API basada en estándares específicos se implemente de manera consistente en todos los navegadores, considere enviar una propuesta en la próxima iteración del proyecto Interop. Requiere más tiempo, pero considere cómo Shopify y RUMvision compartieron sus listas de deseos para Interop 2026. Información detallada como esta puede ser muy útil para que los proveedores de navegadores establezcan prioridades. Para obtener enlaces más útiles para influir en los proveedores de navegadores, consulte mi hoja de trucos para navegar por la plataforma web. Conclusión Para cerrar, espero que este artículo te haya dejado algunas cosas en las que pensar:
Emoción por la mampostería y otras funciones web próximas. Algunas funciones web que quizás quieras empezar a utilizar. Es posible que pueda eliminar algunos fragmentos de código personalizado o de terceros para favorecer las funciones integradas. Algunas formas de realizar un seguimiento de lo que se avecina e influir en los proveedores de navegadores.
Más importante aún, espero haberlo convencido de los beneficios de utilizar la plataforma web en todo su potencial.
