전문적인 개발자가 아닌 사람의 개인적인 생각이다.

자바스크립트가 한창 보급될 때 JQuery가 자바스크립트를 직접 입력하는 것 보다 쉽기 때문에 많이 사용되었다. 그러다 리액트가 유행하였고 기존 웹개발에 익숙한 개발자들은 좀 더 쉽게 쓸수 있는 vuejs를 선택 하였다.

간단하게 사용할 수 있었던게 점점 커지면서 점점 복잡해지게 되는 것 같다. vuejs도 방법들이 나누어지면서 복잡해졌다. 

Svelte는 정말 여러가지의 장점들을 잘 종합해서 나온 웹컴파일러라고 생각된다. 

컴파일러라고 불리는 이유는 뷰나 리액트가 가상돔에서 랜더링 하는 것과 다르게 Svelte는 자바스크립트로 컴파일한다.

그래서 프로그램의 크기와 속도가 체감 가능하게 빠르다. 

일단. Svelte공식 다큐먼트를 보면 느끼겠지만 쉽다. 군더더기가 없이 깔끔하다. 

굳이 영상을 보며 배울 필요 없이 홈페이지에 들어가서 30분 정도 예제를 읽어보고 따라 해보면 어렵지 않게 익힐 수 있다.

Svelte가 자체 라우터를 제공하지 않는데 여러가지 사용해본 결과 가볍게 개발할때는 page.js가 사용하기 쉽고 좋았다.

visionmedia.github.io/page.js/

물론.

여러가지 모듈들은 아직 리액트와 뷰에 비해 부족한것 같지만 그런걸 상쇄할 정도의 가치는 있다고 생각된다.

간단한 라우팅 예)

App.svelte

<script>
  import router from "page"
  import Navbar from "./components/Navbar.svelte"
  import Pages from "./Pages.svelte"
</script>

<Navbar/>
<Pages/>

Pages.svelte

<script>
  import router from "page"
  import Home from "./pages/Home.svelte"
  import About from "./pages/About.svelte"

  let page
  router('/', () => page = Home)
  router('/about', () => page = About)
  router.start()
</script>

<svelte:component this={page} />

Navbar.svelte

<div>
  <a href="/">home</a>
  <a href="/about">about</a>
</div>

About.svelte

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

home.svelte

<main>
	<h1>Home</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>

스벨트 공식홈페이지.

svelte.dev/

-----버튼 컴포넌트 만들기 예) ------

app.svelte

<script>
	import Button from './Button.svelte';
</script>

<Button btnName="button1" click={function (){alert('button1 clicked')}}/>
<Button btnName="button2" click={function (){alert('button2 clicked')}}/>

button.svelte

<script>
	export let click, btnName; 
</script>

<button on:click={click}>
	{btnName}
</button>