가늘게 강하다

4125 단어 javascriptsveltewebdev
최근에 나는 Svelte와 조금 놀았고, 나는 몇 가지 생각을 공유하고 싶었습니다.

Svelte은 새로운 접근 방식이라고 주장하며 이것이 내가 좋아하는 것입니다. 하지만 어떻게? 무엇이 그렇게 독특합니까?

부인 성명



코드가 많지 않을 것입니다.

문서를 확인하십시오. 꽤 유용합니다. 여기에서는 내가 Svelte를 이해하는 방법과 Svelte가 매우 좋다고 생각하는 이유에 초점을 맞추고 싶습니다.

간단히 말해서 가상 DOM이 없습니다.



Svelte의 제작자는 자신의 창작물을 React 및 기타 프레임워크와 비교하여 접근 방식을 설명합니다.

가상 DOM을 생성하고 diffing 알고리즘을 적용하는 대신 Svelte는 필요할 때만 DOM을 업데이트하는 "매우 효율적인 VanillaJS 코드"로 코드를 변환합니다.
.svelte 파일에 사용된 HTML 태그, 예: div 또는 h1 는 바닐라에서와 같은 방식으로 추가되지만 Svelte에서는 완전한 선언적이므로 쓰기가 훨씬 빠릅니다.

게다가 HTML/JS/CSS를 사용한 고전적인 웹 개발과 비슷하므로 겁먹거나 수천 개의 추가 개념을 배울 필요가 없습니다.

See REPL 및 examples

컴파일러입니다



Svelte와의 가장 큰 차이점은 빌드 시간에 미리 계산한다는 것입니다.
  • 먼저 내부 파서로 파일을 파싱.svelte하여 추상 트리(AST)를 구축합니다
    • .
  • 그런 다음 이 AST를 읽어 변수와 종속성(~ 노드)을 수집합니다.
  • 그런 다음 각 노드에 대한 코드 블록(Fragment)을 생성합니다
    • .
  • 그런 다음 클래스를 내보내는 JavaScript 모듈을 만듭니다.

    • 런타임 오버헤드가 없으며 실제로 런타임이 전혀 없습니다. 꼭 필요한 것만 담았습니다. 그 때문에 브라우저는 평가할 작업과 코드가 적습니다.

    Svelte는 HTML 페이지에 추가할 수 있는 작은 CSS 및 JS 번들을 생성합니다.

    <!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width'>
    <title>My website</title>
    <link rel='stylesheet' href='/build/bundle.css'>
    <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>

</html>


    반동



    Rich Harris는 "Rethinking reactivity"라는 눈에 띄는 슬로건으로 소개했습니다Svelte 3.

    그러나 반응성이란 무엇입니까?

    DOM이 현재 상태의 업데이트와 동기화되는 방식을 측정합니다. React와 같은 대부분의 Javascript 프레임워크는 이를 위한 중간 계층을 추가합니다. React에서는 가상 DOM입니다. Svelte에서는 빌드 시간입니다.

    반응성은 개발자에게만 필요한 것이 아니라 매우 중요합니다. 페이지가 사용자 상호 작용에 응답하는 방식을 보여줍니다.

    컴포넌트 기반 프로그래밍



    다른 많은 도구와 마찬가지로 Svelte를 사용하여 앱을 여러 구성 요소로 분할할 수 있습니다. 각 구성 요소는 자식(중첩 구성 요소)에 영향을 주지 않고 스타일과 스크립트를 가질 수 있습니다.

    Svelte는 HTML의 상위 집합이므로 <style> 및 <script> 태그를 사용할 수 있습니다. See it in repl .

    한발 물러나자



    내가 Svelte에서 가장 좋아하는 것은 그것이 컴파일러라는 것입니다. 미친듯이 효율적이고 코드를 적게 작성합니다.

    그러나 초당 수천 개의 업데이트를 실행하는 사람이 아무도 없기 때문에 모든 벤치마크가 의미가 없다고 생각합니다. 따라서 Svelte가 React보다 50배 더 ​​빠르다고 말하는 것은 아마도 유효하지만 사용자 관점에서는 의미가 없을 것입니다.

    게다가, Svelte는 자바스크립트 프레임워크가 아니라 컴파일러이기 때문에 자바스크립트 프레임워크를 Svelte와 비교하는 것은 불공평할 수 있습니다. 컴파일러를 작성하는 경우 프레임워크와 동일한 제약 조건 및 제한 사항이 없는 것은 다행입니다.

    그럼에도 불구하고 Rich Harris는 이에 대해 매우 정직합니다.

    we are abusing the language for fun and profits



    마무리



    Svelte를 사용해 보시기 바랍니다. 그것은 가치.

    부적절할 수도 있지만 지킬을 좋아하는 것과 같은 이유로 Svelte를 좋아합니다. 몇 가지 추가 개념이 포함된 HTML/JS/CSS를 사용한 고전적인 웹 개발입니다.
    Qiita(4) 쓰고 있는 분야, 읽고 낚시하고 있는 분야
    Qiita(2) 편집 요청

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage