SPA, transiciones de elementos compartidos y tecnología de revalorización | consejos CSS

Nolan Lawson provocó un debate cuando describió un cambio notable de las aplicaciones de una sola página (SPAs):

Los nuevos marcos de trabajo de moda como Astro, Qwik y Elder.js cuentan con su GPA [multi-page application] con "0kB JavaScript por defecto". Las publicaciones de blog enumeran todos los desafíos con SPAs: historial, administración de enfoque, restauración de desplazamiento, Cmd/Ctrl-clic, pérdidas de memoria, etc. Se disparan alegres disparos contra los SPA.

Sin embargo, creo que lo que se discute menos es cómo ha cambiado el contexto en los últimos años para dar GPAes más una ventaja contra Balnearios.

Parece que varias personas realmente se engancharon con esa primera parte porque Nolan publicó un seguimiento para aclarar eso. SPAs están lejos de estar condenados:

[T]el proposito de mi mensaje no era enterrar SPAs y baile en su tumba. yo pienso SPASon increíbles, he trabajado en muchos de ellos y creo que tienen un futuro brillante por delante. Mi punto principal era: si la única razón por la que usas un SPA es porque "hace que las navegaciones sean más rápidas", así que tal vez sea hora de reevaluar eso.

Y hay una buena razón por la que dice eso. De hecho, el primer artículo destaca específicamente el trabajo en curso sobre las transiciones de elementos compartidos. Si avanzan, tendremos una API para animar/transicionar/dimensionar/posicionar elementos en la entrada de la página y existir. Jake Archibald demostró cómo funciona en Google I/O 2022 y el video es una joya.

Si se pregunta cómo una página puede saltar a otra, el navegador toma capturas de pantalla de la página saliente y la página entrante y luego salta entre ellas. Por lo tanto, no es tanto una página que se convierte en otra como el navegador que retiene dos imágenes para que pueda animar una mientras la otra anima. Jake dice que lo que sucede entre bastidores es que se crea una estructura DOM a partir de pseudoelementos que contienen las imágenes de la página:

<transition-container>
  <image-wrapper>
    <outgoing-image />
    <incoming-image />
  </>
</>

Podemos "capturar" un elemento específico si queremos aislarlo y aplicar una animación diferente al resto de la página:

.site-header {
  page-transition-tag: site-header;
  contain: paint;
}

Y obtenemos pseudo-elementos a los que podemos conectarnos y asignar elementos personalizados. @keyframe entretenimiento:

<!-- ::page-transition=container(root)  -->
<transition-container>
  <!-- ::page-transition-image-wrapper(root)  -->
  <image-wrapper>
    <!-- ::page-transition-outgoing-image(root) -->
    <outgoing-image />
    <!-- ::page-transition-incoming-image(root) -->
    <incoming-image />
  </>
</>

¡Dang, eso es inteligente como diablos!

También es una prueba de cuánto HTML, CSS y JavaScript continúan evolucionando y mejorando. Tanto es así que Jeremy Keith sugiere que ya es hora de reevaluar nuestro juicio anterior sobre ciertas tecnologías:

Si no estuviera al tanto de los cambios en los últimos años, sería fácil pensar que las aplicaciones de una sola página ofrecen beneficios únicos que, de hecho, ya no son ciertos. […] Pero los desarrolladores siguen siendo cautelosos y prefieren confiar en las bibliotecas de terceros en lugar de la funcionalidad del navegador nativo. Ellos tomaron una decisión sobre estas bibliotecas en el pasado. Evaluaron el estado del soporte del navegador en el pasado. Me gustaría que reevaluaran estas decisiones.

Ingredientes para SPAs en concreto:

En los últimos años en particular, parece que la web ha avanzado a pasos agigantados: trabajadores de servicio, API nativas de JavaScript y un aumento sorprendente en lo que puede hacer con CSS. Más importante aún, la interoperabilidad entre navegadores es cada vez mejor. El soporte universal para los nuevos estándares web está llegando a un ritmo más rápido que nunca.

HTML, CSS y JavaScript: sigue siendo el mejor cóctel de la ciudad. Incluso si le toma un minuto ponerse al día.

Si quieres conocer otros artículos parecidos a SPA, transiciones de elementos compartidos y tecnología de revalorización | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas