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>

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

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

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

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

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