스벨트 공식 페이지
HEROPY님의 Svelte.js [Core API] 완벽 가이드

Svelte란

1. Svelte(스벨트)는 Rich Harris가 제작한 새로운 접근 방식을 가지는 프론트엔드 프레임워크입니다.
2. Svelte는 자신을 ‘프레임워크가 없는 프레임워크’ 혹은 ‘컴파일러’라고 소개합니다.
   이는 Virtual(가상) DOM이 없고, Runtime(런타임)에 로드할 프레임워크가 없음을 의미합니다.
3. 기본적으로 빌드 단계에서 구성 요소를 컴파일하는 도구이므로 페이지에 단일 번들(bundle.js)을 로드하여 앱을 렌더링할 수 있습니다.

특징

간결한 코드

• 높은 가독성 유지
• 개발 시간 단축
• 쉬운 리팩토링
• 쉬운 디버깅
• 더 작은 번들 (SPA최적화)
• 낮은 러닝 커브

Svelte와 React의 코드 비교

Svelte

<!-- Svelte -->

<script>
  let a = 1;
  let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

React

// React

import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

No virtual DOM

• No Diffing
  상태가 변경된 부분만 리렌더링

• No Overhead
  Virtual DOM 생성으로 인한 오버헤드 낭비x

• 빠른 성능(퍼포먼스)

  같은 결과물의 react.js와 메모리 사용량 비교시
  React : 30 ~ 110MB
  Svelte : 15 ~ 30MB
  -W3C HTML5 Conf 2019에서 변규현 님의 Svelte와 React 퍼포먼스 비교 시연 중-

Svelte는 가상돔을 사용하지 않는다.
새로운 Virtual DOM을 이전 Snapshot과 비교하거나(Diffing), 상태 변화에 따른 새로운 가상 요소 생성 등에 많은 오버헤드가 있을 수 있으며 최종적으론 실제 DOM을 업데이트해야 하므로 그 과정을 생략하는 것이 더욱 빠를 수 있다고 합니다.

반응성

• Framework-less VanillaJS
• Only devDependencies
• 명시적 설계(창의적 작업)

반응성은 변경된 값이 DOM에 자동으로 반영됨을 의미합니다.
Svelte는 별도의 Setter 없이 값의 할당(assignments)만으로 업데이트를 트리거(Trigger)할 수 있습니다.

단점..

• 낮은 성숙도(작은 생태계)
• CDN 미제공
• IE 지원x