Svelte와 함께 읽기 목록을 작성하십시오

<:> svelte : 프론트 엔드 프레임 워크 환경에서 떠오르는 별 Svelte는 "또 다른 프론트 엔드 프레임 워크"의 상태를 능가하면서 빠르게 인기를 얻었습니다. 이 상징에는 "올해의 혁신"(JS 2019), 최고 만족도 등급 (JS 2020) 및 가장 사랑받는 웹 프레임 워크 (스택 오버 플로우 2021)라는 제목이 포함됩니다. 이 성공은 작은 번들 크기, 탁월한 성능 및 사용자 친화적 인 디자인의 매력적인 조화에서 비롯됩니다. Svelte는 핵심 강점 외에도 내장 상태 관리, 전환 및 애니메이션과 같은 귀중한 기능을 제공합니다. 이 튜토리얼은 Svelte가 어떻게 이러한 효율성을 달성하는지 탐구합니다. 후속 튜토리얼은 Svelte를 사용하여 응용 프로그램을 구축하는 데 더 깊이 파고들 것입니다.

Svelte의 창세기 Svelte의 주류 입양이 2020 년대 초에 시작되었지만, 그 기원은 2016 년 말 최초의 Github 커밋으로 거슬러 올라갑니다. Rich Harris (롤업 번들러로도 알려진)가 만든 Svelte는 The Guardian 의 그래픽 편집자로서의 경험에서 나왔습니다. 성능이나 번들 크기를 희생하지 않고 대화식 웹 사이트 시각화를 단순화하는 도구에 대한 그의 필요성은 기술적으로 능숙하지 않은 동료들에게 접근 할 수있게되면서 Svelte의 개발로 이어졌습니다. 처음에는 오픈 소스 커뮤니티 내에서 작고 헌신적 인 헌신을 얻은 Svelte의 획기적인 발전은 2019 년 4 월 버전 3의 출시와 함께 도착했습니다.이 버전은 개발자 경험과 사용 편의성을 강조하는 완전한 재 작성으로 Svelte가 스포트라이트로 추진했습니다. 그 인기는 그 이후로 급격한 관리자를 끌어 들이고 Rich Harris가 Vercel과 합류하여 풀 타임으로 초점을 맞췄습니다. Svelte와 React 및 VUE를 포괄적으로 비교하려면 "Svelte 3 : 라디칼 컴파일러 기반 JavaScript 프레임 워크"를 참조하십시오. 간단한 책 목록 구축 Svelte의 기능을 설명하기 위해 간단한 책 목록 응용 프로그램을 작성하겠습니다. 최종 응용 프로그램은 아래 이미지와 비슷합니다

우리는 공식 Svelte 프로젝트 템플릿으로 시작하겠습니다 (대안에는 더 복잡한 응용 프로그램을위한 Vite 기반 템플릿 또는 Sveltekit이 포함됩니다). 필요한 패키지를 설치 한 후 (를 수정합니다.

이 코드는 최상위 레벨에서 직접 작성하여 Svelte의 HTML-Superset Syntax를 활용합니다. 다음, 우리는 정적 책 목록과 루프를 추가하여 그것을 렌더링 할 것입니다 :

.

<h4 id="Add-Book">Add Book</h4>
<input type="text">
<h4 id="My-Books">My Books</h4>
<ul>
  <li>A book</li>
</ul>

<label> Add Book <input type="text" bind:value="{newBook}" on:keydown="{addBook}"> </label> <h4 id="My-Books">My Books</h4> <ul> {#each books as book} <li>{book}</li> {/each} </ul> 입력과

변수 사이에 양방향 바인딩이 생성됩니다. 이벤트 리스너를 추가합니다. 함수는 Enter가 누르면 배열을 업데이트합니다. Svelte의 반응성은 자동으로 구성 요소를 다시 렌더링합니다 Svelte의 컴파일 프로세스 Svelte의 성능과 작은 번들 크기는 컴파일러 특성 때문입니다. 그것은 bind:value={newBook} 파일을 전처리하여 DOM을 외과 적으로 업데이트하는 최적화 된 JavaScript로 변환합니다. 이렇게하면 큰 런타임이 필요하지 않으며 효율적인 재주문이 가능합니다. newBook. 스타일링 및 전환 추가 CSS로 UI를 향상시켜 봅시다 : on:keydown={addBook} 기본적으로 svelte 스코프 스타일. 마지막으로, 페이드 인 전환을 추가 해 봅시다 : addBook 스타일링 및 전환을 포함한 전체 코드는 다음과 같습니다. books 이로 인해 기능적이고 시각적으로 매력적인 책 목록 응용 프로그램이 발생합니다. (최종 응용 프로그램의 이미지는 여기로 이동합니다 :

) 건축 고려 사항 및 향후 개선 사항

이 튜토리얼은 기본 소개를 제공합니다. 더 큰 응용 프로그램에는 상태 관리, 여러 구성 요소 및 구성 요소 상호 작용 메커니즘이 필요합니다. Svelte는 이들을위한 솔루션을 제공하며, 이들은 후속 자습서에서 탐색 될 것입니다. 는 다음 프로젝트에 적합합니까? Svelte의 활성 유지 관리, 강력한 툴링, 안정적인 기능, 생태계 증가 및 Sveltekit의 가용성으로 인해 다양한 프로젝트의 강력한 경쟁자가됩니다. 커뮤니티는 번성하고 있으며 프레임 워크는 속도 징후의 징후를 보이지 않습니다.

다음 단계 이것은 6 부 시리즈의 첫 번째 부분입니다. 향후 부품은 템플릿 구문, 반응 문, 상점, 구성 요소 상호 작용 및 테스트를 다룹니다. 완전한 시리즈는 아마존에서도 제공됩니다.

위 내용은 Svelte와 함께 읽기 목록을 작성하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!