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}

{/각}

Search >> app.svelte <svelte>로 <code> 검색 App.svelte. repositories 반응성과 필터링 : svelte의 반응성은 search.svelte 구문으로 <code> $ :

구문으로 입증됩니다. 이렇게하면 filtersepos가 <code> userearchtern 또는 <code> repositories 변경 될 때마다 업데이트됩니다. Svelte의 반응성 기능의 이점을 강조하면서 기능 또는 이벤트 리스너를 사용한 대체 접근 방식도 논의됩니다. 생산 빌드 : <strong> >> run <code> npm run 빌드 프로덕션 준비된 번들을 만들려면. 결과 번들 크기는 일반적으로 Svelte의 컴파일 프로세스로 인해 작습니다. 결론 :

svelte는 코드 효율성과 성능을 강조하는 전통적인 프레임 워크에 대한 강력한 대안을 제공합니다. 직관적 인 구문 및 내장 기능은 개발을 단순화하여 프론트 엔드 개발을위한 강력한 경쟁자입니다. svelte faq (컨시즈 버전) : $: Svelte 란 무엇입니까? Search.svelte javaScript 프레임 워크 최적화 코드로 컴파일하고 런타임에서 빌드 시간으로 작업을 이동시킵니다. filteredRepos Svelte는 React/vue와 어떻게 다릅니 까? React/vue 브라우저에서 더 많은 작업을 수행합니다. userSearchTerm Svelte는 구성 요소를 어떻게 처리합니까? repositories 구성 요소는 HTML/CSS/JS- 유사 구문으로 작성되고 효율적인 JavaScript로 컴파일됩니다. Svelte는 가상 Dom을 사용합니까?

아니요, 실제 돔을 직접 업데이트합니다. Sveltekit 란 무엇입니까?

Svelte 위에 완전한 웹 응용 프로그램을 구축하기위한 고급 프레임 워크. Svelte의 장점? 작은 번들 크기, 더 빠른 성능, 간단한 구문, 덜 보일러 플레이트.

npm run build