Spas, transitions d'éléments partagés et technologie de réévaluation

Nolan Lawson a déclenché une discussion lorsqu'il a décrit un décalage notable des applications à une seule page (spa):

Les nouveaux frameworks branchés comme Astro, Qwik et Elder.js vantent leur MPA [application multi-pages] avec «0KB JavaScript par défaut». Les articles de blog font que les rondes énumèrent tous les défis avec les spa: histoire, gestion de la mise au point, restauration de défilement, CMD / CTRL-clic, fuites de mémoire, etc. Des coups de pouce joyeux sont pris contre les spas.

Je pense que ce qui est moins discuté, cependant, c'est ainsi que le contexte a changé ces dernières années pour donner aux MPA plus de la main contre les spas.

Il semble qu'un certain nombre de gens se soient vraiment accrochés à cette première partie parce que Nolan a publié un suivi pour clarifier que les spa sont loin d'être condamnés:

[L] Le point de mon poste n'était pas d'enterrer des spa et de danser sur leur tombe. Je pense que les spa sont super, j'ai travaillé sur beaucoup d'entre eux, et je pense qu'ils ont un bel avenir devant eux. Mon point principal était: si la seule raison pour laquelle vous utilisez un spa est parce que «cela rend les navigations plus rapides», alors il est peut-être temps de réévaluer cela.

Et il y a une bonne raison qu'il dit cela. En fait, le premier article indique spécifiquement que les travaux sont effectués sur les transitions d'éléments partagés. S'ils avancent, nous aurons une API pour l'animation / transition / dimensionnement / positionnement des éléments à l'entrée de la page et exister. Jake Archibald a démontré comment cela fonctionne chez Google I / O 2022 et la vidéo est un joyau.

Si vous vous demandez comment une page peut passer à une autre, le navigateur prend des captures d'écran de la page sortante et de la page entrante, puis transitions entre celles-ci. Donc, ce n'est pas tant une page en devenant une autre que le navigateur qui tient deux images afin qu'il puisse en animer un pendant que les autres animent. Jake dit que ce qui se passe derrière la scène est une structure DOM est créée à partir de pseudo-éléments contenant les images de la page:

 <transition-container>
  <image-wrapper>
    <image sortant></image>
    <image entrant></image>
  >
></image-wrapper></transition-container>

Nous pouvons «capturer» un élément spécifique si nous voulons l'isoler et appliquer une animation différente du reste de la page:

 .
  Tag-transition: leader du site;
  contenir: peindre;
}

Et nous obtenons des pseudo-éléments que nous pouvons nous connecter et attribuer des animations @keyframe personnalisées:

 
<transition-container>
  
  <image-wrapper>
    
    <image sortant></image>
    
    <image entrant></image>
  >
></image-wrapper></transition-container>

Dang, c'est intelligent que diable!

C'est également la preuve du pudding de la quantité de HTML, CSS et JavaScript continue d'évoluer et de s'améliorer. À tel point que Jeremy Keith suggère qu'il est grand temps que nous réévaluons notre jugement passé de certaines technologies:

Si vous n'étiez pas au courant des changements au cours des dernières années, il serait facile de penser que les applications de page d'une seule page offrent des avantages uniques qui ne se tiennent plus. […] Mais les développeurs restent suspects, préférant toujours faire confiance aux bibliothèques tierces sur les fonctionnalités du navigateur natif. Ils ont pris une décision concernant ces bibliothèques dans le passé. Ils ont évalué l'état du soutien du navigateur dans le passé. Je souhaite qu'ils réévaluent ces décisions.

Les ingrédients des spas spécifiquement:

Au cours des dernières années, en particulier, il a l'impression que le Web est survenu à pas de géant: les travailleurs du service, les API JavaScript natifs et un coup de pouce étonnant dans ce que vous pouvez faire avec CSS. Le plus important de tous, l'interopérabilité entre les navigateurs s'améliore de plus en plus. La prise en charge universelle des nouvelles normes Web arrive à un rythme plus rapide que jamais.

HTML, CSS et JavaScript: c'est toujours le meilleur cocktail de la ville. Même s'il faut une minute pour qu'il rattrape son retard.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!