[입문] HTML, JAVASCRIPT, CSS 다 할 줄 알면 Svelte로 가보자고

요즘 자주 기웃거리는 개발 커뮤니티에서 svelte에 대한 이야기 꽃을 피우는 걸 눈팅하는 도중, 도대체 이 프레임워크가 뭐길래?(프레임워크라고 하기 보다는 컴파일러라고 부르는 것이 더 명확하다고 한다.)라는 생각이 들었다. 그럼 바로 Svelte 공식 홈페이지부터 보러 가야지! 

https://svelte.dev/

Svelte • Cybernetically enhanced web apps

svelte 공식 홈페이지

공식 홈페이지에는 Write less code(짧은 코드 작성) / No virtual DOM(가상머신이 필요없는) / Truly reactive(진실된 반응) 을 강점으로 내세우고 있는 듯 하다.  

😎 Svelte 우리 좀 어필해볼게!?!?!

1. Write less code

Build boilerplate-free components using languages you already know - HTML, CSS and JavaScript

Boilerplate란 일종의 어느 기능을 구현하기 위해 필요한 상용구 코드를 말한다. Svelte는 다른 언어에 비교적 상용구 코드로 부터 자유를 얻은 듯 하다. Boilerplate는 많을 수록 많은 세팅작업이 필요하다는 뜻으로 적으면 적을 수록 개발자에겐 매우 좋다.🙄

2. No virtual DOM

Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast

대표적으로 Vue.js와 React는 Virtual DOM을 사용하고 있다. Virtual DOM은 보통 Real DOM보다 빠르다. 하지만 무조건 Virtual DOM이 빠르지는 않다. Virtual DOM이 변경되는 경우에 새로운 Virtual DOM과 변경되기 전의 Virtual DOM을 비교해서 변경된 내용을 Real DOM에 적용 하는데, 이때 Virtual DOM을 비교하면서 오버헤드가 발생하게 된다. 물론 이를 해결하기 위해 React에서는 shouldComponentUpdate를 이용하여 최적화할 수 있다.
하지만 우리가 배워볼 Svelte는 Virtual DOM 자체를 사용하지 않는다. Virtual DOM은 변경된 내용을 알기 위한 수단으로 사용되는데, Svelte는 굳이 Virtual DOM을 사용하지 않더라도 변경된 내용을 알 수 있는 대체제를 사용하기 때문에 Virtual DOM을 사용하지 않는다. Virtual DOM을 사용하지 않기 때문에 변경된 내용을 알기 위해 사용되는 런타임 프레임워크가 포함되지 않으므로 번들 크기가 더 작아지게 된다.

3.Truly Reactive

No more complex state management libraries — Svelte brings reactivity to JavaScript itself

제작자는 Svelte를 이용해 Truly한 Reactive Programming을 구현할 수 있다고 한다. 리액티브 프로그래밍이란 스프레드시트와 같은 선언적이며 데이터 변화에 따라서 프로그램이 영향을 받는 비동기 프로그래밍 패러다임을 말한다. 크게 보면 선언형 프로그래밍 방식이라고 할 수 있다. 선언형 프로그래밍 방식을 기존의 명령형 프로그래밍 방식과 비교해보자면, 
명령형 프로그래밍 (Pull) vs 선언형 프로그래밍 (Push)
- 명령형 : 하드웨어를 대상으로 개발자가 작성한 코드가 정해진 절차에 따라서 순서대로 실행된다. 
- 선언형 : 데이터의 흐름을 미리 정의한 뒤, 데이터 값이 변경되었을 때 관련된 함수가 업데이트된다. 예로 함수형 프로그래밍, 반응형(reactive)프로그래밍이 있다.

 

✨ 우리 요즘 이정도야 

등장하고 난 뒤에 빠르게 증가하는 추세

svelte는 2019년에 등장하자마자 빠른 속도로 개발자들 사이에서 만족도 2위를 차지하였으며, 2020년에는 react를 넘어서버린 추세가 정말로 놀라워보인다. 개발자라는 사람이 이런 놈을 어떻게 알아보지 않고 배길 수 있을까?

 

🕵️ Svelte 의 Svelte한 소스 코드 한 번 봐보자!

react, vue, angular의 소스만 보다가 svelte의 소스를 한 번 보게 되면 정말 놀랍지 않을 수가 없다. 그냥 js+html+css 옛날 그 소스 그 자체인데요...? 근데 이 프레임워크 3대장에 준하는 기능과 심지어 그 이상의 빠른 속도를 보여주는 놈이 있다고? 네 그게 바로 svelte입니다.

https://dev.to/hb/react-vs-vue-vs-angular-vs-svelte-1fdm

React vs Vue vs Angular vs Svelte

React

Top 5 Real-world companies using React: Facebook, Instagram, Whatsapp, Yahoo!, Netflix

Displaying "Hello World" in React:

import React from 'react';

function App() {
   return (
      <div>
         Hello World
      </div>
   );
}

Vue

Top 5 Real-world companies using Vue: NASA, Gitlab, Nintendo, Grammarly, Adobe

Displaying "Hello World" in Vue:

<template>
    <h1>Hello World</h1>
</template>

 

Angular

Top 5 Real-world companies using Angular: Google, Microsoft, Deutsche Bank, Forbes, PayPal

Displaying "Hello World" in Angular:

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello World</h1>`,
})

export class AppComponent;

 

Svelte

Top 5 Real-world companies using Svelte: Alaska Air, Godaddy, Philips, Spotify, New York Times

Displaying "Hello World" in Svelte:

<h1>Hello world</h1>