Svelte

[YearinKim]

Svelte란

• Rich Harris가 제작한 프론트엔드 프레임워크
• 프레임워크가 없는 프레임워크 혹은 컴파일러라고 소개
• Svelte의 뜻은 날씬한, 호리호리한

The State of JS 2021 Web Frontend Framework

	React	Vue	Angular	Svelte
만족도	2	3	4	1
관심도	3	2	4	1
사용량	1	3	2	4
인지도	1	2	3	4

Svelte의 특징

• 공식 사이트: https://svelte.dev/

Write less code

Build boilerplate-free components using languages you already know

HTML, CSS and JavaScript.

• Boilerplate-free
• 높은 가독성 & 개발 시간 단축 & 쉬운 리팩토링
• 낮은 러닝 커브

<!--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
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>
  );
};

<!--Vue-->
<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">

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

<script>
  export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };
</script>

No Virtual DOM

Svelte compiles your code to tiny, framework-less vanilla JS.

your app starts fast and stays fast

• No Diffig
• No Overhead
• Framework-less VanillaJS
  

Truly reactive

No more complex state management libraries

Svelte brings reactivity to JavaScript itself

• Two-Way Binding
• 반응형 선언문과 변수

단점

• CDN으로 Svelte 사용이 불가능
• 브라우저 지원 체크가 필요
• Svelte 생태계를 고려

마치며,,,

• Svelte는 React나 Vue등에 비해 나온지 얼마 되지 않아 사용량이 높지 않고 그만큼 Reference도 부족해 개발 과정에서 막히는 부분이 있으면 검색을 통해 해결하기 쉽지 않다는 단점을 가지고 있지만
• 많은 개발자들이 관심을 가지고 있는 만큼 시간이 지나면 충분히 해결됨 문제라고 생각합니다.
• 아직 사용하는 기업을 찾기 힘들기 때문에 배워야할 필요성을 떨어질 수 있지만, 간단한 토이 프로젝트정도라면 Svelte를 시작해보는 것도 좋은거 같습니다.
• 무엇보다, 배우기 쉽다는 것은 Svetle의 가장 큰 매력이라고 생각합니다.

[YearinKim]

https://heropy.blog/2019/09/29/svelte/