블록의 새로운 프레임 워크 인 Svelte에 익숙해

수년 동안 Vue, Angular 및 React는 프론트 엔드 구성 요소 프레임 워크 환경을 지배했습니다. Google과 Facebook은 자체 솔루션을 제공하지만 VUE와 같은 프레임 워크의 오픈 소스 정신 (여러 스폰서와 함께 단일 기업 제어를 피함)은 상당한 매력을 가져옵니다. 오픈 MIT 라이센스에 대한 VUE의 약속 인 상승 스타 공유 인 Svelte를 입력하십시오.

이전에 CSS- 트릭 (특히 Ollie Williams의 구성 요소 기반 CSS에 대한 통찰력있는 기사)에 실린 Svelte는 면밀한 검사를 보증합니다. 이 기사는 고유 한 기능, 다른 프레임 워크와의 차별화 및 실제 구현을 탐구합니다.

Svelte의 독특한 접근

"Svelte는 생산적으로 배우고 사용하기에 가장 쉬운 JavaScript 구성 요소 라이브러리였습니다."

- Jeff Delaney, Firebase가있는 Svelte Realtime Todo 목록

반응, 각도 및 vue와 같은 Svelte는 JavaScript 구성 요소 라이브러리입니다. 그러나 핵심 차별화 요소는 다음과 같습니다.

1. 미리 컴파일 : Svelte는 컴파일러 역할을하여 하이브리드 HTML, JavaScript 및 CSS 코드를 최적화 된 JavaScript, HTML 및 CSS 파일로 변환합니다. 이 사전 컴파일은 C#에서 바이트 코드 또는 타입 스크립트와 JavaScript와 유사하지만 세 가지 언어를 모두 포함하면 런타임에서 빌드 시간으로 계산을 전환하여 유연성과 클라이언트 측 성능을 향상시킵니다.

2. 가상 DOM 없음 : 전통적인 프레임 워크는 효율적인 업데이트를 위해 DOM의 메모리 주거 사본 인 가상 DOM을 사용합니다. Svelte는 이것을 우회하여 실제 돔을 직접 조작합니다. Virtual DOM은 최적화를 제공하지만 Svelte의 접근 방식은 빌드 타임 계산과 함께 변화를 외과 적으로 적용하여 특히 더 큰 응용 분야에서 잠재적 성능 이득을 초래합니다.

3. 내장 CSS 스코핑 : Svelte의 통합 스타일은 CSS-in-JS 솔루션의 복잡성을 피합니다. 구성 요소 CS를 분리하여 빌드 프로세스 중에 파일을 분리하여 깨끗하고 캡슐화 된 스타일을 홍보합니다. SASS 및 LESS와 같은 전 처리기에 플러그인이 존재하지만 Svelte의 기본 CSS 처리는 놀랍도록 효율적이고 간단합니다.

Svelte 대 기타 프레임 워크

Svelte의 독특한 아키텍처는 성능과 개발자 경험에 영향을 미칩니다. 수많은 비교가 존재하지만 그 속도는 중요한 이점입니다. 그러나 속도는 단독 메트릭이 아닙니다. 다음 표는 더 넓은 비교를 제공합니다.

[원본 텍스트의 테이블 설명을 바탕으로 Svelte를 다른 프레임 워크와 비교하는 표는 여기에 갈 것입니다.] Svelte의 강력한 위치는 상대적인 청소년과 소규모 커뮤니티에도 불구하고 주목할 만합니다. 높은 개발자 만족도는 "Big Three"프레임 워크에서 관찰 된 최근 감소와 대조됩니다. 오픈 소스 특성은 상당한 자산입니다.

실용적인 사례 : 교차 관찰자

Svelte의 실용성을 설명하기 위해 수동 스크롤 이벤트 문제를 피하기 위해 종종 권장되는 성능 향상 기술 인 교차로 관찰자를 구현합시다. 우리는 단순화 된 예제를 위해 Svelte의 Repl을 활용합니다.

기본 Svelte 프로젝트를 설정 한 후 (Brevity를 위해 생략 된 세부 사항) 다음 코드가있는 src/components 폴더에서 IntersectionObserver.svelte 작성하십시오.

 'svelte'에서 {onmount} 가져 오기;
내보내기 한 번 = 거짓;
내보내기하자 상단 = 0;
내보내기하자 = 0;
내보내기 왼쪽 = 0;
내보내기 오른쪽 = 0;
교도소 = 거짓;
컨테이너하자;

onmount (() => {
    if (typeof intersectionObserver! == 'undefined') {
      const rootmargin =`$ {bottom} px $ {left} px $ {top} px $ {right} px`;
      const observer = new intersectionObserver (entries => {
        교차 = 항목 [0] .Sinterecting;
        if (intersecting && 한 번) {
          옵저버 (컨테이너);
        }
        }, {
          루트 마진
      });
        옵저버 .Observe (컨테이너);
        return () => observer.unobserve (컨테이너);
  }

  기능 핸들러 () {
    const bcr = container.getBoundingClientRect ();
    교차로 = (
      (bcr.bottom bottom)> 0 &&
      (bcr.right)> 0 &&
      (bcr.top -top) <window.innerheight if window.removeeventlistener window.addeventlistener return> window.removeEventListener ( 'scroll', handler);
  });

  div {
    너비 : 100%;
    높이 : 100%;
  }
<div bind:this="{container}">
  <slot></slot>
</div></window.innerheight>

기본 App.svelte 파일에서 구성 요소를 가져오고 사용합니다.

 "./components/intersectionObserver.svelte"에서 IntersectionObserver 가져 오기;

<intersectionobserver let:intersecting top="{400}">
  {#IF 교차}
    <div class="content">이 메시지는 교차 시점을 보여줍니다.</div>
  {:또 다른}
    <div class="content">이 메시지는 다른 것을 보여줍니다.</div>
  {/만약에}
</intersectionobserver>

<style>
  /* ...styles as in original article... */
</style>

이것은 IntersectionObserver 어떻게 래퍼 역할을하는지 보여주고 요소 교차를 기반으로 동작을 트리거합니다. onMount 함수는 브라우저 별 코드 실행을 보장합니다. CSS 추가 (원본 기사에 표시된대로)가 예제를 완성합니다.

결론

Svelte는 확립 된 프레임 워크에 대한 강력한 대안을 제공합니다. 성능, 사용 편의성 및 깨끗한 접근 방식은 강력한 경쟁자가됩니다. 작은 커뮤니티는 잠재적 인 도전을 제시하지만 성숙도와 오픈 소스 자연은 위험을 완화합니다. 대규모 채택 전에 비 임계 프로젝트 실험이 권장됩니다.

Svelte Ecosystem에는 Sapper (전체 웹 응용 프로그램 용) 및 Svelte Native (모바일 앱 용)가 포함되어 기능을 확장합니다. 성능 장점과 개발자 친화적 인 디자인에 대해 Svelte를 고려하십시오.

위 내용은 블록의 새로운 프레임 워크 인 Svelte에 익숙해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!