Hai uns 15 anos, traballaba nunha empresa na que creamos aplicacións para axentes de viaxes, traballadores dos aeroportos e compañías aéreas. Tamén creamos o noso propio marco interno para compoñentes de IU e capacidades de aplicacións dunha soa páxina. Tiñamos compoñentes para todo: campos, botóns, pestanas, intervalos, táboas de datos, menús, datas, seleccións e seleccións múltiples. Incluso tiñamos un compoñente div. O noso compoñente div foi xenial, por certo, permitiunos facer cantos redondeados en todos os navegadores, o que, créao ou non, non era cousa doada de facer naquel momento.
O noso traballo tivo lugar nun momento da nosa historia cando JS, Ajax e HTML dinámico foron vistos como unha revolución que nos levou ao futuro. De súpeto, puidemos actualizar unha páxina de forma dinámica, obter datos dun servidor e evitar ter que navegar a outras páxinas, o que se consideraba lento e mostraba un gran rectángulo branco na pantalla entre as dúas páxinas. Había unha frase, popularizada por Jeff Atwood (o fundador de StackOverflow), que decía: "Calquera aplicación que se poida escribir en JavaScript escribirase eventualmente en JavaScript." - Jeff Atwood
Para nós naquel momento, parecíanos un atrevido a crear esas aplicacións. Parecía unha aprobación total para facer todo con JS. Así que fixemos todo con JS e non nos dedicamos moito tempo a investigar outras formas de facer as cousas. Realmente non sentimos o incentivo para aprender correctamente o que podían facer HTML e CSS. Realmente non percibimos a web como unha plataforma de aplicacións en evolución na súa totalidade. Principalmente vímolo como algo que necesitabamos solucionar, especialmente cando se trataba de compatibilidade con navegadores. Poderiamos botarlle máis JS para facer as cousas. Axudoume tomar o tempo para aprender máis sobre o funcionamento da web e o que estaba dispoñible na plataforma? Por suposto, probablemente podería ter afeitado un montón de código que non era realmente necesario. Pero, naquel momento, quizais non tanto. Verás, as diferenzas de navegador eran bastante importantes naquela época. Este era un momento no que Internet Explorer aínda era o navegador dominante, sendo Firefox o segundo, pero comezaba a perder cota de mercado debido a que Chrome gañaba rapidamente popularidade. Aínda que Chrome e Firefox foron bastante bos para poñerse de acordo nos estándares web, os ambientes nos que se executaban as nosas aplicacións fixeron que tivésemos que soportar IE6 durante moito tempo. Mesmo cando se nos permitiu admitir IE8, aínda tivemos que tratar con moitas diferenzas entre os navegadores. Non só iso, senón que a web da época non tiña tantas capacidades integradas directamente na plataforma.
Avance rápido ata hoxe. As cousas cambiaron tremendamente. Non só temos máis destas capacidades que nunca, senón que tamén aumentou a velocidade á que están dispoñibles. Permíteme facer a pregunta de novo, entón: ¿Axudaríasche a tomar o tempo para aprender máis sobre como funciona a web e o que está dispoñible na plataforma? Absolutamente si. Aprender a comprender e utilizar a plataforma web hoxe en día ponche unha gran vantaxe sobre outros desenvolvedores. Se traballas no rendemento, a accesibilidade, a capacidade de resposta, todos eles xuntos ou só enviando funcións da IU, se queres facelo como enxeñeiro responsable, coñecer as ferramentas que tes dispoñibles axúdache a alcanzar os teus obxectivos máis rápido e mellor. Algunhas cousas para as que quizais xa non necesites unha biblioteca Sabendo o que os navegadores admiten hoxe, a pregunta, entón, é: que podemos abandonar? Necesitamos un compoñente div para facer cantos redondeados en 2025? Por suposto, nós non. A propiedade border-radius foi compatible con todos os navegadores actualmente utilizados durante máis de 15 anos neste momento. E a forma de esquina tamén chegará pronto, para os recunchos aínda máis elegantes. Vexamos as funcións relativamente recentes que agora están dispoñibles en todos os navegadores principais e que podes usar para substituír as dependencias existentes na túa base de código. O punto non é abandonar inmediatamente todas as túas bibliotecas queridas e reescribir o teu código base. En canto a todo o demais, primeiro terás que ter en conta a compatibilidade do navegador e decidir en función doutros factores específicos do teu proxecto. As seguintes funcións están implementadas nos tres motores de navegador principais (Chromium, WebKit e Gecko), pero é posible que teñas diferentes requisitos de compatibilidade do navegador que che impidan utilizalos inmediatamente. Agora ben, aínda é un bo momento para aprender sobre estas funcións, e quizais planear usalas nalgún momento. Popovers e diálogos A API Popover, o elemento HTML
Por suposto, a túa velocidade de conexión a Internet probablemente tamén aumentou, pero ese non é o caso de todos. E tampouco todos teñen as mesmas capacidades do dispositivo. En cambio, introducir código de terceiros para cousas que podes facer coa plataforma, probablemente significa que envías máis código e, polo tanto, chegues a menos clientes do que normalmente farías. Na web, un mal rendemento de carga leva a grandes taxas de abandono e prexudica a reputación da marca. Executando menos código nos dispositivos Ademais, o código que envías nos dispositivos dos teus clientes é probable que se execute máis rápido se usa menos abstraccións de JavaScript na parte superior da plataforma. Probablemente tamén sexa máis sensible e máis accesible por defecto. Todo isto leva a clientes máis e máis felices. Consulte o blog anual sobre a brecha de desigualdade de rendemento do meu colega Alex Russell, que mostra que os dispositivos premium están en gran parte ausentes dos mercados con miles de millóns de usuarios debido á desigualdade de riqueza. E esta fenda non fai máis que crecer co paso do tempo.
Disposición de albanelería incorporada Unha función da plataforma web que chegará en breve e que estou moi entusiasmado é CSS Masonry.
Comezo explicando o que é a albanelería. Que é a albanelería A albanelería é un tipo de deseño que se popularizou por Pinterest hai anos. Crea pistas independentes de contido dentro das cales os elementos se empaquetan o máis preto posible do inicio da pista.
Moitas persoas ven a Masonería como unha excelente opción para carteiras e galerías de fotos, o que certamente pode facer. Pero Masonry é máis flexible que o que ves en Pinterest e non se limita só a deseños tipo fervenza. Nun esquema de mampostería:
As pistas poden ser columnas ou filas:
Non todas as pistas de contido teñen que ter o mesmo tamaño:
Os elementos poden abarcar varias pistas:
Os elementos pódense colocar en pistas específicas; non teñen que seguir sempre o algoritmo de colocación automática:
Demos Aquí tes algunhas demostracións sinxelas que fixen usando a próxima implementación de CSS Masonry en Chromium. Unha demostración da galería de fotos que mostra como os elementos (o título neste caso) poden abarcar varias pistas:
Outra galería de fotos que mostra pistas de diferentes tamaños:
Un deseño do sitio de noticias con algunhas pistas máis anchas que outras e algúns elementos que abarcan todo o ancho do deseño:
Un taboleiro kanban que mostra que os elementos se poden colocar en pistas específicas:
Nota: OAs demostracións anteriores fixéronse cunha versión de Chromium que aínda non está dispoñible para a maioría dos usuarios da web, porque CSS Masonry só comeza a implementarse nos navegadores. Non obstante, os desenvolvedores web xa levan anos usando bibliotecas para crear deseños de Masonry. Sitios que usan albanelería na actualidade De feito, a albanelería é bastante común na web hoxe en día. Aquí tes algúns exemplos que atopei ademais de Pinterest:
E algúns exemplos máis, menos obvios:
Entón, como se crearon estes deseños? Solucións alternativas Un truco que vin usado é usar un deseño Flexbox no seu lugar, cambiar a súa dirección a columna e configuralo para envolver. Deste xeito, pode colocar elementos de diferentes alturas en varias columnas independentes, dando a impresión dun deseño de mampostería:
Non obstante, hai dúas limitacións con esta solución:
A orde dos elementos é diferente do que sería cun deseño de albanelería real. Con Flexbox, os elementos enchen primeiro a primeira columna e, cando estea chea, van á seguinte columna. Con Masonry, os elementos apilaríanse na pista (ou columna neste caso) que teña máis espazo dispoñible. Pero tamén, e quizais o máis importante, esta solución require que estableza unha altura fixa para o contenedor Flexbox; se non, non se produciría ningún envoltorio.
Bibliotecas de albanelería de terceiros Para casos máis avanzados, os desenvolvedores estiveron usando bibliotecas. A biblioteca máis coñecida e popular para iso chámase simplemente Masonry, e descárgase unhas 200.000 veces por semana segundo NPM. Squarespace tamén ofrece un compoñente de deseño que representa un deseño Masonry, como alternativa sen código, e moitos sitios úsano. Ambas opcións usan código JavaScript para colocar elementos no deseño. Albañilería empotrada Estou moi emocionado de que Masonry estea empezando a aparecer nos navegadores como unha función CSS integrada. Co paso do tempo, poderás usar Masonry do mesmo xeito que fai Grid ou Flexbox, é dicir, sen necesidade de ningunha solución ou código de terceiros. O meu equipo de Microsoft estivo a implementar soporte de Masonry integrado no proxecto de código aberto Chromium, no que se basean Edge, Chrome e moitos outros navegadores. Mozilla foi en realidade o primeiro provedor de navegadores en propoñer unha implementación experimental de Masonry en 2020. E Apple tamén estivo moi interesada en facer que este novo deseño web se produza. O traballo para estandarizar a función tamén avanza, con acordo dentro do grupo de traballo CSS sobre a dirección xeral e mesmo un novo tipo de visualización: grid-lanes. Se queres saber máis sobre Masonry e seguir o progreso, consulta a miña páxina de recursos CSS Masonry. Co tempo, cando Masonry se converta nunha función de referencia, como Grid ou Flexbox, poderemos simplemente usalo e beneficiarnos de:
Mellor rendemento, Mellor resposta, Facilidade de uso e código máis sinxelo.
Vexamos estes máis de cerca. Mellor rendemento Crear o teu propio sistema de deseño tipo Masonry ou usar unha biblioteca de terceiros, significa que terás que executar código JavaScript para colocar elementos na pantalla. Isto tamén significa que este código bloqueará a renderización. De feito, ou non aparecerá nada, ou as cousas non estarán nos lugares correctos ou no tamaño adecuado, ata que se execute ese código JavaScript. O deseño de mampostería úsase a miúdo para a parte principal dunha páxina web, o que significa que o código faría que o teu contido principal apareza máis tarde do que podería ter doutro xeito, degradando o teu LCP ou a métrica de pintura de contido máis grande, que xoga un papel importante no rendemento percibido e na optimización do motor de busca. Probei a biblioteca Masonry JS cun deseño sinxelo e simulando unha conexión 4G lenta en DevTools. A biblioteca non é moi grande (24 KB, 7,8 KB con gzip), pero tardou 600 ms en cargar nas miñas condicións de proba. Aquí tes unha gravación de performance que mostra ese tempo de carga de 600 ms para a biblioteca de Masonry e que non se produciu ningunha outra actividade de renderizado mentres iso estaba a suceder:
Ademais, despois do tempo de carga inicial, o script descargado debía ser analizado, compilado e executado. Todo o que, como se mencionou antes, estaba a bloquear a representación da páxina. Cunha implementación de Masonry incorporada no navegador, non teremos un script para cargar e executar. O motor do navegador só fará as súas cousas durante o paso inicial de renderizado da páxina. Mellor capacidade de resposta Do mesmo xeito que cando se carga unha páxina por primeira vez, o cambio de tamaño da xanela do navegador leva a renderizar o deseño nesa páxina de novo. Neste punto, porén, se a páxina está a usar a biblioteca Masonry JS, non é necesario cargar o script de novo, porque xa estáaquí. Non obstante, o código que move os elementos nos lugares correctos debe executarse. Agora esta biblioteca en particular parece ser bastante rápida ao facelo cando se carga a páxina. Non obstante, anima os elementos cando necesitan moverse a un lugar diferente ao cambiar o tamaño da xanela, e isto marca unha gran diferenza. Por suposto, os usuarios non pasan tanto tempo redimensionando as fiestras do seu navegador como o facemos nós os desenvolvedores. Pero esta experiencia de cambio de tamaño animada pode ser bastante perturbadora e engádese ao tempo percibido que tarda a páxina en adaptarse ao seu novo tamaño. Facilidade de uso e código máis sinxelo O sinxelo que é usar unha función web e o sinxelo que parece o código son factores importantes que poden marcar unha gran diferenza para o teu equipo. Nunca poden ser tan importantes como a experiencia do usuario final, por suposto, pero a experiencia dos desenvolvedores inflúe na capacidade de mantemento. Usar unha función web integrada trae importantes beneficios neste aspecto:
Os desenvolvedores que xa coñecen HTML, CSS e JS probablemente poderán usar esa función facilmente porque foi deseñada para integrarse ben e ser coherente co resto da plataforma web. Non hai risco de que se introduzan cambios no modo en que se utiliza a función. Hai case cero risco de que esa función quede obsoleta ou non se manteña.
No caso de Masonry incorporado, porque é un deseño primitivo, úsao desde CSS, igual que Grid ou Flexbox, sen JS implicado. Ademais, outras propiedades CSS relacionadas co deseño, como gap, funcionan como esperarías. Non hai trucos nin solucións para coñecer, e as cousas que aprendes están documentadas en MDN. Para a lib Masonry JS, a inicialización é un pouco complexa: require un atributo de datos cunha sintaxe específica, xunto con elementos HTML ocultos para definir os tamaños das columnas e dos espazos. Ademais, se queres abarcar columnas, debes incluír o tamaño do espazo para evitar problemas:
Comparemos isto co que sería unha implementación de Masonry incorporada:
Código máis sinxelo e compacto que só pode usar cousas como o espazo e onde as pistas de extensión se realizan co tramo 2, igual que na cuadrícula, e non require que calcules o ancho correcto que inclúe o tamaño do espazo. Como saber o que está dispoñible e cando está dispoñible? En xeral, a pregunta non é se deberías usar Masonry incorporada nunha biblioteca JS, senón cando. A biblioteca Masonry JS é incrible e leva moitos anos enchendo un oco na plataforma web e para moitos desenvolvedores e usuarios felices. Ten algúns inconvenientes se o comparas cunha implementación de Masonry incorporada, por suposto, pero non son importantes se esa implementación non está lista. É fácil para min enumerar estas novas funcións interesantes da plataforma web porque traballo nun provedor de navegadores e, polo tanto, adoito saber o que está por chegar. Pero os desenvolvedores adoitan compartir, enquisas tras enquisas, que facer un seguimento das cousas novas é difícil. Manterse informado é difícil e as empresas non sempre priorizan a aprendizaxe de todos os xeitos. Para axudar con isto, aquí tes algúns recursos que proporcionan actualizacións de xeito sinxelo e compacto para que poidas obter a información que necesitas rapidamente:
A plataforma web inclúe o sitio explorador: Pode estar interesado na súa páxina de notas de publicación. E, se che gusta o RSS, consulta o feed de notas de lanzamento, así como as fontes de referencia recentemente dispoñibles e amplamente dispoñibles.
A WebPanel de control de estado da plataforma: Pode que che gusten as súas diversas páxinas do ano base.
Páxina de folla de ruta do estado de Chrome Platform.
Se tes un pouco máis de tempo, tamén podes estar interesado nas notas de lanzamento dos provedores de navegadores:
Chrome Borde Firefox Safari
Para obter aínda máis recursos, consulta a miña folla de trucos Navegando na plataforma web. A miña cousa aínda non está implementada Esa é a outra cara do problema. Aínda que atopes o tempo, a enerxía e as formas de facer un seguimento, aínda hai frustración por facer que se escoite a túa voz e se implementen as túas funcións favoritas. Quizais levas anos esperando a que se resolva un erro específico ou a que se envíe unha función específica nun navegador no que aínda falta. O que vou dicir é que os provedores de navegadores escoitan. Formo parte de varios equipos entre organizacións nos que comentamos os sinais e comentarios dos desenvolvedores todo o tempo. Observamos moitas fontes de comentarios diferentes, tanto internas de cada provedor de navegadores como externas/públicas en foros, proxectos de código aberto, blogs e enquisas. E, sempre estamos tentando crear mellores formas para que os desenvolvedores compartan as súas necesidades específicas e casos de uso. Polo tanto, se podes, esíxese máis aos provedores de navegadores e presionámonos para que implementemos as funcións que necesitas. Entendo que leva tempo e tamén pode ser intimidante (por non mencionar unha alta barreira de entrada), pero tamén funciona. Aquí tes algunhas formas en que podes escoitar a túa voz (ou a da túa empresa): realiza as enquisas anuais sobre o estado de JS, o estado de CSS e o estado de HTML. Xogan un papel importante na forma en que os provedores de navegadores priorizan o seu traballo. Se necesitas que unha API específica baseada en estándares se implemente de forma coherente nos navegadores, considera enviar unha proposta na próxima iteración do proxecto Interop. Require máis tempo, pero considera como Shopify e RUMvision compartiron as súas listas de desexos para Interop 2026. Información detallada como esta pode ser moi útil para que os provedores de navegadores dean prioridade. Para obter ligazóns máis útiles para influír nos provedores de navegadores, consulta a miña folla de trucos Navegando na plataforma web. Conclusión Para pechar, espero que este artigo deixeche algunhas cousas nas que pensar:
Emoción por Masonry e outras funcións web próximas. Algunhas funcións web que pode querer comezar a usar. Algunhas pezas de código personalizado ou de terceiros que quizais poidas eliminar en favor das funcións integradas. Algunhas formas de facer un seguimento do que vén e influír nos provedores de navegadores.
O máis importante é que espero convencerte dos beneficios de usar a plataforma web ao máximo.
