Svelte - 프론트엔드 개선

짧은 역사

2010년대 초반에는 대규모의 유지 관리 가능한 웹 응용 프로그램을 만드는 것이 꽤 어려운 일이었습니다. 대부분 개발자가 직면해야 하는 프런트 엔드 개발의 엄청난 공포 때문이었습니다. 그러나 이것은 React 및 Vue 과 같은 프레임워크에 의해 더 쉬워졌습니다. 이 프레임워크는 구성 요소 지향 프레임워크를 존재하게 하여 개발자들 사이에서 즉각적인 인기를 얻었습니다. 그러나 한 개발자는 더 좋고 더 큰 아이디어를 염두에 두고 있었습니다.

무엇에 관한 것이며 무엇을 해야 하는가

Svelte는 Rich Harris가 만든 프런트 엔드 프레임워크입니다. "프레임워크 없는 프레임워크"로 판매되는 Svelte는 다른 프런트 엔드 프레임워크와 달리 런타임이 아닌 빌드 시간 동안 대부분의 작업을 수행합니다. 선언적 구성 요소 코드를 일반 바닐라 JS 코드로 변환하는 컴파일러를 사용하여 이를 달성합니다.
이는 JavaScript 런타임을 브라우저에 전달하는 대신 UI 구성 요소를 코드로 변환하기만 하므로 다른 프런트 엔드 프레임워크를 통해 만든 앱보다 Svelte 앱을 더 빠르게 만듭니다.

코드 형식 설명

Svelte 파일은 확장자.svelte를 가지며 각 파일은 3개의 섹션으로 나눌 수 있습니다.

<script> : 이 블록에는 구성 요소 인스턴스가 생성될 때 실행되는 JavaScript가 포함되어 있습니다. 최상위 수준에서 선언된(또는 가져온) 변수는 구성 요소의 마크업에서 '볼 수' 있습니다.

<script>
    let x = 0;
    let y = 0;

    function yPlusAValue(value) {
        return value + y;
    }

    $: total = yPlusAValue(x);
</script>

Total: {total}
<button on:click={() => x++}>
    Increment X
</button>

<button on:click={() => y++}>
    Increment Y
</button>

$ 태그는 문을 반응형으로 표시하고 다른 구성 요소보다 먼저 실행됩니다.

<script>
    export let title;

    // this will update `document.title` whenever
    // the `title` prop changes
    $: document.title = title;

    $: {
        console.log(`multiple statements can be combined`);
        console.log(`the current title is ${title}`);
    }
</script>

이 블록의 바인딩은 태그 내에서 context = "module" 조건을 사용하여 내보낼 수도 있습니다.

<script context="module">
    let totalComponents = 0;

    // this allows an importer to do e.g.
    // `import Example, { alertTotal } from './Example.svelte'`
    export function alertTotal() {
        alert(totalComponents);
    }
</script>

<script>
    totalComponents += 1;
    console.log(`total number of times this component has been created: ${totalComponents}`);
</script>

<style> : 이 블록 내의 CSS는 해당 구성 요소로 범위가 지정됩니다. 이는 구성 요소 스타일의 해시를 기반으로 영향을 받는 요소에 클래스를 추가하여 작동합니다.

<style>
    p {
        /* this will only affect <p> elements in this component */
        color: purple;
    }
</style>

template : 여기에는 기본적인 html 코드가 포함되지만 항상 일반 html 코드는 아니며 Svelte에서 미리 제공한 추가 선언 코드로 구성됩니다.
일반적인 html 태그(<div> 등), 속성 및 소품(textInputs, 버튼 등), 텍스트 표현식(regex), 주석 등의 몇 가지 예가 있습니다.

Svelte의 장점

1) 첫째, Svelte는 브라우저와 웹 사이의 디지털 레이어 수를 줄여주기 때문에 다른 앱보다 최적화에서 우위를 점합니다.

2) 복잡한 구성 요소 기반 프레임워크보다 이해하기 쉬운 초보자 친화적인 구문을 가지고 있습니다.

3) 컴파일러는 런타임 전용 프레임워크에 없는 유연성과 성능에 액세스할 수 있습니다.

Svelte가 가진 한 가지 주요 단점은 Svelte가 상대적으로 새로운 언어이기 때문에 지속적으로 발전하고 증가함에도 불구하고 제공해야 하는 지원 생태계가 다른 프레임워크보다 상대적으로 작다는 것입니다.

그래서 사람들이 좋아하나요?

이 질문에 대한 대답은 약간 복잡합니다. 이해하기 쉬운 구문과 결합하여 다른 프레임워크보다 동일한 애플리케이션에 대해 Svelte를 사용하여 더 적은 코드를 작성할 수 있다는 사실은 커뮤니티에서 사소하지만 그다지 중요하지 않은 인식 변화를 촉발시킨 것입니다. 사람들은 여전히 ​​기술 지원이 부족하여 완전히 전환하기를 원하지 않았지만 동시에 완전히 포기하지도 않았습니다. 유연성과 동시에 충분히 큰 커뮤니티가 없다는 편집증으로 인해 비평가와 전문 개발자 사이에서 많은 긍정적인 평가를 받았습니다.

내 관점에서 나는 몇 년 안에 Svelte가 지금보다 더 신뢰할 수 있고 더 커질 수 있으며 더 많은 사람들이 Svelte의 잠재력을 고려할 때 전문적으로 사용할 수 있을 것이라고 믿습니다.