개발자 선호도 프레임워크 1위, Svelte
개발자 선호도 프레임워크 1위, Svelte
2016년 오픈소스로 공개된 프레임워크, Svelte.
2021년 스택오버플로우 조사 결과를 보면 선호도 조사에서 최상위권에 위치해 있다.
스벨트가 사랑받는 이유
속도
React, Vue의 성공요인은 가상 돔(Virtual Dom)이었다. 실제 DOM을 카피한 가상 DOM을 만들어서, 수정사항이 있을 때 가상 돔 부분만 빠르게 비교하여 업데이트하기 때문에 리렌더링 속도를 줄여주었다.
하지만 Svelte는 이런 가상 돔도 과감하게 버렸다. 실제 DOM을 사용하지만, Run Time이 아닌 Build Time에서 Vanilla JavaScript Bundle로 컴파일하기 때문에 속도가 빠르다.
런타임이 아닌 빌드타임에 코드를 반응형으로 변환하기 때문에, Svelte를 컴파일러라고도 얘기할 수 있다.
간소화된 코드
스벨트가 사랑받는 또 다른 이유는 코드가 간소화되었다는 점이다. 불필요한 내용을 줄이는 것을 원칙으로 하기 때문에 코드가 훨씬 간소화되었다.
React는 442자, Vue.js는 263자의 코드를 작성해야 하는 내용을 Svelte는 145자만 사용하여 만들 수 있다.
번들크기의 감소
코드 양이 줄어들면 컴파일되어 생성된 번들파일의 크기도 줄어든다. 번들파일의 크기가 줄어들면 SPA(Single Page Application)의 첫 렌더링 속도가 빨라진다.
SPA의 단점은 첫 렌더링 시 모든 리소스를 다운로드하고 파싱해야 하기 때문에 느리다는 것인데, 이 단점을 상쇄해주는 것이다.
Svelte
React
Vue
단점
CDN 제공 불가
CDN은 Content Delivery Network의 약자로, 물리적으로 멀리 떨어져 있는 사용자의 콘텐츠 로딩 속도를 줄여주는 기술을 말한다. CDN은 용량이 큰 콘텐츠를 로딩해야 하는 동영상 스트리밍 서비스, 쇼핑몰 등에 사용된다.
React는 https://unpkg.com/react@18/umd/react.production.min.js, Vue는 https://cdn.jsdelivr.net/npm/vue@2.6.0에서 CDN을 제공하고 있지만 스벨트는 CDN을 사용하지 못한다. 스벨트는 빌드타임에 움직이지 런타임에 실행되는 서비스가 아니기 때문이다.
작은 생태계
아직 개발되지 오래되지 않았기 때문인지, 관련 커뮤니티도 적고 라이브러리가 적기 때문에 개발하는 데 어려움이 있다.
그럼에도 불구하고 장점이 워낙 강력하고, 뉴욕타임즈, 스포티파이 등 굵직한 기업에서 스벨트를 사용하는 점을 봤을 때 스벨트가 유망한 도구라는 건 부정할 수 없을 것이다.
참조
https://www.samsungsds.com/kr/insights/svelte.html
https://namu.wiki/w/Svelte
https://library.gabia.com/contents/infrahosting/8985/
Svelte로 맛보는 웹 애플리케이션 개발(이효범 지음)