만족도가 vue보다 높은 js 프레임워크, svelte

개요

이것은 svelte에 관한 보도입니다.svelte는 2016년 개발된 프레임워크입니다.
읽으면 스웨트일 거예요.
여기. 페이지의'Awareness,interest,and satisfaction rankings'에서 vue보다 높은 프레임 svelte.일본어 정보가 거의 없기 때문에 번역된 것을 여기에 기재한다.
앞으로 어떻게 될지 모르겠지만 새로운 js 프레임워크를 사용하고 싶은 분들께 참고가 된다면 기쁘겠습니다.

svelte란 무엇입니까?

svelte는 고속 웹 응용을 구축하는 도구로React, Vue 등 자바스크립트 프레임워크와 비슷하여 매끄럽고 상호작용적인 사용자 인터페이스를 간단하게 구축할 수 있는 목표를 공유했다

React 및 Vue와의 차이점

Svelte는 프로그램을 만들 때 프로그램 코드를 설명하는 대신 이상적인 자바스크립트로 변환합니다.프레임워크의 추상화된 성능 비용을 지불하지 않고 프로그램을 처음 불러올 때 처벌을 받지 않는다는 뜻이다.Svelte로 전체 응용 프로그램을 구축할 수도 있고 기존 코드에 추가로 추가할 수도 있다.일반적인 프레임워크에 의존하는 비용이 없고, 구성 요소를 어느 곳에서든 독립적으로 포장할 수 있다.
인용자 여기.
그나저나 로고는 이런 느낌이에요.

svelte의 특징

스몰 코드(Write less code)

예를 들어 두 개의 입력 상자에 입력한 결과의 합을 출력하려면 React는 442문자를 출력하고, Vue는 263문자를 출력하며, svelte는 145문자를 출력한다
상세 정보여기.

가상 DOM이 아닙니다.

"가상DOM의 속도가 너무 빨라서 신화라고 할 수 밖에 없다"는 입장에 따라 svelte는 가상DOM을 사용하지 않았다
상세 정보여기.

실제 재활성화

Svelte는 React와 Vue와 같은 구성 요소 프레임워크이지만 선언적인 상태 구동형 코드를 기술하는 것이 아니라 구축할 때 실행해 구성 요소를 매우 효과적인 명령 코드로 변환하고 외과적으로 DOM을 업데이트한다.
다만, 아직 완성하지 못했다.
상세 정보여기.

코드 예

아래 참조: 공식 문서

데이터를 "}"로 출력하는 코드

<script>
    let name = 'world';
</script>

<h1>Hello {name}!</h1>

css 역할 영역에 대한 코드

<script>
    import Nested from './Nested.svelte';
</script>

<style>
    p {
        color: purple;
        font-family: 'Comic Sans MS', cursive;
        font-size: 2em;
    }
</style>

<p>These styles...</p>
<Nested/>

이것은 다른 문서의 구성 부분이므로 우리는 생략할 것이다.
이 경우 css에서 "These styles..."끌.
즉 모든 구성 요소가 작용한다는 것이다.

버튼을 눌렀을 때 문장의 코드를 바꿉니다

<script>
    let count = 0;

    function handleClick() {
        count += 1;
    }
</script>

<button on:click={handleClick}>
    Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

svelte를 만지고 싶은 사람.

튜토리얼이 있어요. 여기서 만져보세요.
https://svelte.dev/tutorial/basics

총결산

이번에는 svelte에 대해 기술하였다.
나는 이 틀의 사용 정도를 모르겠지만, 참고 가치가 있다면 나는 매우 기쁠 것이다.
읽어주셔서 감사합니다.

참고 자료

공식 문서