Svelte

svelte

• 스펠트라고 보통 읽으며, 비교적 최근에 나온 프레임 워크이다. react가 현재 한국을 점령하고 있는 상황에서, 다른 형태의 SPA를 한번 살펴보고 배워보고자 SVELTE를 다루어 보려고 한다.
• 다른 설명보다 일단 code를 살펴 보자
• 아래 코드는 typescript형태의 svelte코드 이며, svelte가 제공하는 typescript start project template이다.

<script lang="ts">
	export let name: string;
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

• 흔히 보는 react코드와는 완전히 다르다는 것을 알 수 있다, 그나마 vue랑 약간 비슷함을 알 수 있다.
• 가장 특이한 점은 export let name: string, 으로 script에 그냥 정의된 변수를 html코드에 직접 넣어서 binding하여 사용한다는 것이다. 
• react 처럼 setState나 useEffect, DidComponentUpdate등과 같은 업데이트 관련 함수가 없다. 
• 일단 virtual dom을 사용하지 않는다.
• 스크립트의 변수가 직접 template(dom)에 매핑되어 있다.
• 코드 자체가 엄청나게 간단해 보인다.

REACT와의 차이는?

• 사실 react은 일종의 라이브러리, 프레임 워크이다.
  • 실행시에 react의 각종 함수, 템플릿등을 호출하고 사용하여 페이지가 만들어진다.
• svelte는 일종의 컴파일러이다. 
  • 코드가 컴파일되어 js, html로 전부 변환된 후 실행한다.
• svelte가 어떤면에서 보면 더 빠를 수 밖에 없다. 단 virtual dom을 쓰는 react와 아닌 svelte는 ui업데이트 시점이나 변경점을 제어 하는 방식이 달라, 이것을 어떻게 컨트롤 하느냐에 따라 화면 랜더링 속도는 react가 빠를 수도 svelte가 빠를 수도 있겠다는 생각이 든다.

우려되는 점들

• 가장 우려되는 점은 code간의 scope의 모호함
• 코드를 보면 script라는 Tag 내부에 모든 코드를 template(DOM)이 전부 공유하는 방식이다. 결국 this스코프나 module등 scope에 모호 함이 발생할 가능성이 높다.
• 이 단점으로 인해 견고한 architecture, 복잡한 architecture의 구성은 어려울 수도 있다. 약속된 제약이 없어 자유로울 수 있지만 그로인해 복잡성이 증가하면  코드에 대한 가독성은 떨어지고, 전체적인 구조를 견고하게 형성하는데 많은 어려움이 따를 수 있다.

그럼에도 불구하고?

• 장점이 너무 뚜렷하다.
• 간단하다,
• 그냥 봐도 되게 쉬울거 같다.