SPA, 공유 요소 전환 및 기술을 재평가합니다

놀란 로슨 (Nolan Lawson)은 단일 페이지 응용 프로그램 (SPA)에서 눈에 띄는 전환을 설명했을 때 약간의 토론을 촉발시켰다.

Astro, Qwik 및 Elder.js와 같은 새로운 프레임 워크는 "0KB JavaScript"로 MPA [다중 페이지 응용 프로그램]을 선전하고 있습니다. 블로그 게시물은 역사, 초점 관리, 스크롤 복원, CMD/CTRL- 클릭, 메모리 누출 등의 모든 과제를 나열하는 라운드를 만들고 있습니다.

그러나 논의가 덜한 것은 최근 몇 년 동안 MPA가 스파에 대해 더 많은 우위를주기 위해 맥락이 어떻게 바뀌 었는지라고 생각합니다.

놀란이 스파가 운명과는 거리가 멀다는 것을 명확히하기 위해 후속 조치를 발표했기 때문에 많은 사람들이 실제로 그 첫 번째 부분에 매달린 것 같습니다.

[T] 그는 내 게시물의 포인트가 스파를 묻고 무덤에 춤을 추지 않았다. 나는 스파가 훌륭하다고 생각하고, 나는 그들 중 많은 사람들을 위해 일했고, 그들이 그들보다 미래의 밝은 미래를 가지고 있다고 생각합니다. 내 주요 요점은 다음과 같습니다. 스파를 사용하는 유일한 이유는“항해가 더 빨리 만들어지기 때문”이기 때문일 수 있습니다.

그리고 그가 말하는 이유가 있습니다. 실제로, 첫 번째 기사는 구체적으로 공유 요소 전환에서 수행되는 작업을 지적합니다. 앞으로 나아가면 페이지 입구에 애니메이션/전환/크기 조정/포지셔닝 요소를위한 API가 있으며 존재합니다. Jake Archibald는 Google I/O 2022에서 어떻게 작동하는지 시연했으며 비디오는 보석입니다.

한 페이지가 다른 페이지로 전환 할 수있는 방법이 궁금하다면 브라우저는 나가는 페이지와 들어오는 페이지의 스크린 샷을 가져 와서 그 사이를 전환합니다. 따라서 한 페이지가 두 개의 이미지가 두 개의 이미지를 잡고있는 브라우저만큼 다른 페이지가되지 않으므로 다른 페이지가 애니메이션을 사용하는 동안 하나의 이미지를 애니메이션 할 수 있습니다. 제이크는 현장 뒤에서 일어나는 일이 페이지 이미지를 포함하는 의사 요소로 만들어진 DOM 구조는 다음과 같습니다.

 
  <image-wrapper>
    
    
  >
></image-wrapper>

우리는 그것을 분리하고 나머지 페이지에서 다른 애니메이션을 적용하려면 특정 요소를 "스크린 샷"할 수 있습니다.

 .site-header {
  Page-Transition-Tag : 사이트 헤더;
  포함 : 페인트;
}

그리고 우리는 @keyframe 애니메이션에 연결하여 할당 할 수있는 의사 요소를 얻습니다.

 

  
  <image-wrapper>
    
    
    
    
  >
></image-wrapper>

Dang, 그것은 도대체 영리합니다!

또한 HTML, CSS 및 JavaScript가 계속 발전하고 개선되는 푸딩의 증거입니다. 제레미 키이스 (Jeremy Keith)는 우리가 일부 기술에 대한 과거의 판단을 재평가 할 때가되었다고 제안합니다.

지난 몇 년 동안 변경 사항을 알지 못했다면 단일 페이지 앱이 실제로 더 이상 사실이 아닌 고유 한 장점을 제공한다고 생각하는 것은 쉽습니다. […] 그러나 개발자는 의심스럽고 여전히 기본 브라우저 기능보다 타사 라이브러리를 신뢰하는 것을 선호합니다. 그들은 과거에 그 도서관에 대해 결정했습니다. 그들은 과거에 브라우저 지원 상태를 평가했습니다. 나는 그들이 그러한 결정을 다시 평가하기를 바랍니다.

스파의 성분은 구체적으로 :

최근 몇 년 동안 웹이 도약과 경계에서 시작된 것처럼 느껴집니다 : 서비스 작업자, 원본 JavaScript API 및 CSS와 함께 할 수있는 일에 대한 놀라운 향상. 무엇보다도 가장 중요한 것은 브라우저 간의 상호 운용성이 점점 좋아지고 있습니다. 새로운 웹 표준에 대한 보편적 지원은 그 어느 때보 다 빠른 속도로 도달합니다.

HTML, CSS 및 JavaScript : 여전히 도시 최고의 칵테일입니다. 따라 잡는 데 1 분이 걸리더라도.

위 내용은 SPA, 공유 요소 전환 및 기술을 재평가합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!