Svelte 3 : 라디칼 컴파일러 기반 JavaScript 프레임 워크

svelte 3 : 프론트 엔드 개발에 대한 새로운 접근

이 기사는 컴파일 프로세스를 통해 자신을 구별하는 독특한 프론트 엔드 JavaScript 프레임 워크 인 Svelte 3을 탐구합니다. 대형 JavaScript 번들을 배송하는 React와 같은 프레임 워크와 달리 Svelte는 응용 프로그램을 상당히 작고 최적화 된 JavaScript 코드로 컴파일합니다. 빌드 프로세스 중에 달성 된이 최적화는 더 빠르고 효율적인 응용 프로그램을 초래합니다. svelte는 또한 데이터 관리 및 DOM 조작에 대한 독특한 접근 방식을 제공합니다. 실제 DOM을 직접 업데이트하여 가상 DOM이 필요하지 않아 성능이 향상됩니다. 이것은 직관적 인 구성 요소 생성 및 내장 반응 상태와 함께 개발을 즐겁고 효율적으로 만듭니다. 노련한 React 또는 Vue 개발자조차도 탐험 할 가치가 있습니다. 그 기능을 보여주는 간단한 응용 프로그램을 작성합시다.

Svelte의 핵심 장점 :

최적화 된 JavaScript : Svelte는 최적화 된 JavaScript로 컴파일하여 REACT와 같은 프레임 워크와 비교하여 런타임 크기를 줄입니다. Direct DOM 조작 : Svelte는 실제 DOM을 직접 업데이트하여 데이터 관리 및 DOM 조작 효율성을 향상시킵니다. 단순화 된 구성 요소 :

구성 요소 생성은 스코프 CSS 및 통합 반응 상태로 간소화됩니다. 보일러 플레이트가 적습니다 :

컴파일러 접근 방식은 코드와 보일러 플레이트를 최소화하여 개발을 가속화합니다. 직관적 인 구문 :

반응성 및 구성 요소 통신은 최소 구문으로 처리됩니다. 경량적이고 효율적인 : svelte는 React and Vue와 같은 무거운 프레임 워크에 대한 가벼운 대안을 제공합니다.

시작하기 : 번들링 및 인프라의 복잡성을 피하기 위해 공식 Svelte 자습서를 따라갈 것입니다. 노드와 git이 설치되어 있는지 확인하십시오. 그런 다음 실행 :

이것은 벨트 템플릿을

디렉토리로 클론하고 필요한 툴링을 설정합니다. 그 후 디렉토리 ()로 이동하여 를 실행하여 종속성을 설치하십시오. 마지막으로, 는 롤업을 사용하여 개발 서버를 시작합니다. 응용 프로그램에 svelte 구성 요소 구축 : svelte 구성 요소는 파일에 있습니다. 템플릿은 를 제공하며, 세 부분으로 구성되어 있습니다 :
​​
1. / * 목록 스타일링을위한 CSS */ 스타일>
   <style> /* CSS for styling the list */ </style> <div class="search-wrapper"> <form class="search-form"> <input type="text" bind:value="{userSearchTerm}" placeholder="search for repositories"> </form> <ul> {#each filteredRepos as repository} <li> <strong>{repository.name}</strong> <code>{repository.url} {#Each Filtersepos as Repository}

{repository.name} {repository.url}