최신 Stack Overflow 개발자 설문 조사에 따르면 설문 조사 대상 중 가장 사랑받는 웹 프레임워크는 구성 요소가 있는 웹 인터페이스를 정의하기 위한 비교적 젊은 오픈 소스 웹 사용자 인터페이스 프레임워크인 Svelte입니다.
Svelte는 TypeScript로 작성된 컴파일러로 구현되며 브라우저가 아닌 빌드 시 가능한 한 많은 작업을 수행하도록 설계되었습니다. 원래 Guardian에서 일하고 현재 New York Times의 그래픽 편집자인 Rich Harris가 만든 이 프레임워크는 다양한 회사에서 사용 하고 있습니다 . IBM 및 Chess.com 등.
Twitter에서 약간의 신중한 검색을 통해 Apple 과 Spotify 모두 프레임워크를 어느 정도 사용하고 있음을 알 수 있습니다.
많은 최신 웹 프레임워크와 공통적으로 Svelte는 웹 애플리케이션을 위한 이벤트 기반 사용자 인터페이스가 아닌 상태 기반 사용자 인터페이스를 지원합니다. 이러한 방식으로 작동하려는 브라우저 기반 응용 프로그램의 문제는 DOM 작업이 메모리에 모든 DOM 개체를 포함하기에는 너무 비싸고 W3C DOM 수준 2 API가 규정하는 방식으로 할당된다는 것입니다.
이를 극복하기 위해 React와 Vue 모두 가상 DOM을 사용합니다. 이 접근 방식은 각 상태 변경에 대해 가상 DOM에서 전체 애플리케이션을 원하는 상태로 다시 렌더링한 다음 프레임워크가 원하는 상태에 맞춰 브라우저의 실제 DOM을 가져오는 데 필요한 최소 변경 수를 계산하도록 하여 작동합니다.
접근 방식은 상상하는 것보다 더 효율적이지만 가상 DOM은 그럼에도 불구하고 diffing 을 포함하여 가상 DOM에서 수행되는 모든 작업이 실제 DOM에서 수행되는 작업에 추가되기 때문에 순수한 오버헤드입니다.
개발자가 이를 수동으로 최적화할 수 있는 다양한 방법이 있습니다. 예를 들어 shouldComponentUpdate구성 요소의 출력이 현재 상태 또는 props의 변경 사항에 영향을 받지 않는지 여부를 React에 알리는 것과 같은 방법을 사용하지만 상황은 분명히 이상적이지 않습니다.
Svelte의 장점
Svelte의 핵심은 가상 DOM이 필요 없다는 것입니다. Svelte에서 구성 요소를 생성하려면 본질적으로 .svelte파일 확장자가 있는 HTML 파일에 코드를 작성합니다. 그러면 Svelte 컴파일러가 추상 구문 트리로 변환하여 애플리케이션으로 가져올 수 있는 JavaScript 클래스를 제공합니다.
Svelte는 DOM 객체가 아닌 마크업의 초기 상태를 전달하므로 더 저렴하고 빠르게 로드됩니다. 그런 다음 최상위 구성 요소 변수의 변경 사항을 추적하여 전체 구성 요소를 다시 렌더링하는 대신 DOM의 영향을 받는 부분만 직접 업데이트합니다.
이 접근 방식의 한 가지 이점은 Object Computing의 파트너이자 저명한 엔지니어이자 "Svelte and Saper in Action"의 저자인 Mark Volkmann 이 The New Stack에 말했습니다. . React에서는 가상 DOM이 다음 주기에서 돌아서서 여러분이 한 일을 지워버리기 때문에 위험한 일입니다. 그러나 Svelte에서는 그렇지 않습니다.”
Svelte가 취한 접근 방식은 또한 예를 들어 소프트웨어 개발자 Stefan Krause의 벤치마크 를 보면 알 수 있듯이 고성능 앱으로 이어집니다 . 이 테스트는 4개의 열과 1000개의 행이 있는 테이블을 렌더링합니다. 사용할 프레임워크를 선택할 수 있습니다. 아래 표에서 저는 svelte-v3.42.1, vue-v3.2.1, angular-v12.0.1 및 react-v17.0.1을 선택했습니다.
Svelte 는 Jacek Schae 의 2020년 " 프론트엔드 프레임워크의 실제 비교 "에서도 마찬가지로 인상적인 결과를 얻었습니다 .
마찬가지로 Svelte가 생산하는 애플리케이션 번들은 경쟁 프레임워크를 사용하여 만든 동급 앱에서 생산하는 것보다 작은 경향이 있습니다. 동일한 2020년 실제 비교 기사에서는 Svelte가 가장 작은 파일 다운로드 크기를 생성하는 것을 보여줍니다. 일부 인기 있는 프레임워크에 대해 보고된 gzip 앱 크기는 다음과 같습니다.
- React + Redux 193
- Angular 141.2
- Vue 71
- Svelte 15
이러한 성능 이점과 더 작은 크기의 조합은 더 야심찬 웹 애플리케이션을 구축할 수 있다는 것을 의미하며 Svelte는 스마트 TV, 스마트워치 및 POS 시스템과 같은 저전력 장치를 대상으로 하는 좋은 옵션이기도 합니다.
2019 You Gotta Love Frontend 코드 캠프에서 Harris는 신용 카드용 POS 단말기를 만드는 브라질 회사인 Stone을 인용 했습니다.
“그들은 React 및 Vue와 다른 프레임워크를 사용하여 이러한 인터페이스를 구축하려고 시도했지만 원하는 결과를 얻을 수 없었고 너무 느렸습니다. 그들은 대신 Svelte를 사용하여 빌드했고 정말 잘 작동했습니다. Svelte를 실행하는 브라질의 거리에는 200,000개의 이러한 장치가 있습니다."
Svelte 응용 프로그램은 일반적으로 구현하는 데 필요한 코드 줄도 더 적습니다. 코드 줄은 개발자 생산성을 측정하기 위한 끔찍한 척도이지만 그럼에도 불구하고 Harris는 코드 줄 수가 적은 프로젝트는 버그가 더 적은 경향이 있다고 주장합니다. 동일한 프론트엔드 비교 벤치마크는 다음을 제공합니다.
- React + Redux 2050
- Angular 2145
- Vue 2076
- Svelte 1057
그러나 Svelte 신봉자들이 프레임워크를 사랑하게 만드는 것은 무엇입니까? Volkmann은 "저에게 가장 큰 장점은 개발자 경험입니다.
그는 “주로 세 가지를 중심으로 한다”고 말했다. “하나는 반응성 측면입니다. 어떤 상태가 필요한 구성 요소를 React에서 구현할 때 useState 후크를 사용할 수 있습니다. 그런 다음 변수에 액세스하고 set 함수를 얻습니다. 변경하고 싶습니다.
Volkmann은 "Svelte에서는 변수일 뿐이며 변수를 새 값으로 설정했습니다."라고 덧붙였습니다. "그리고 그 변수가 HTML을 생성하는 데 사용된다면, 올바르게 다시 렌더링될 것이고 더 이상 생각할 것이 없습니다.
“둘째, 필요할 때 다시 실행하는 반응적 명령문을 가질 수 있습니다. 세 번째는 매장의 전체 주제입니다.”
저장소는 구성 요소 외부에 애플리케이션 상태를 유지한다고 Volkmann은 말했습니다. 각 저장소는 단일 JavaScript 값을 보유하지만 값은 물론 많은 값을 보유할 수 있는 배열 또는 객체일 수 있습니다. 모든 상점에는 구독 취소를 위해 호출할 수 있는 함수를 반환하는 구독 메서드가 있습니다.
스토어에 대한 내장 지원은 Angular의 @ngrx/store, React의 Redux 및 Vue용 Vuex와 같은 다른 프레임워크에서 일반적인 상태 관리 라이브러리의 필요성을 제거합니다.
댓글