왜 날씬해 봐요!

날씬하다

최근에 내가 stateofjs 2019를 보았을 때, 나는 또 스웨트를 만났다.그들은 예측상을 받았다. 이것은 그들이 인수할 수 있는 신흥 기술을 수여받았다는 것을 의미한다.
작년에 나는 날씬함을 읽었지만 나를 미치게 하는 것은 없어서 그것을 잊어버렸다.하지만stateofjs 2019가 궁금해서 참관했습니다website.
만약 당신이 이 글을 좋아한다면, 잠시 미소를 지으며, 그것을 공유하고, 나를 따라서, 나의 RSS 요점과 subscribe to my newsletter를 보십시오.
내 첫인상은 그런대로 괜찮다.
예:

a radical new approach to building user interfaces...

몸매가 날씬하다

writes code that surgically updates the DOM when the state of your app changes.

네, 좋아요.네, 듣기 좋아요!나는 당시에 내가 너의 다음 응용 프로그램에 Svelte를 추천할 줄 몰랐지만, 그들은 나의 주의를 끌었다.나는 ReactJs와Angular에 대해 여러 해 동안 흥미를 가지고 있으며, 나는 충분한 전단 프레임워크가 깊이 이해해야 한다고 생각한다.나는 VueJs를 한 번 보았지만 매우 좋아했지만, 나는 프로젝트에서 그것을 사용한 적이 없다.
날씬함으로!그들은 네가 그들의 "introductory blog post"을 읽도록 격려했기 때문에 나는 계속 말했다.여기서부터.너희는 리치 해리스You Gotta Love Frontend Code Camp의'반사 반응성'에 관한 동영상을 보아야 한다.날씬한 공부에 흥미가 없더라도 ReactJs, Vue 또는 다른 이유만 좋아한다면.이 강연은 매우 재미있다.🚀

Tl；박사

Svelte의 첫 번째 구성 요소에서 알아야 할 내용을 보고 컴파일러 프레임워크에서 버전 3의 주요 장점을 배울 수 있습니다.
나는 처음에 나의 blog에 이 글을 발표했다.

카탈로그

What is Svelte?

Why you should try Svelte?

Where can you try it?

How to start with your first component?

Component parts

Markup

Styles

JavaScript

Svelte warnings

Component logic and conditional rendering

If/else statements

Loops in Svelte

Waiting for data

What's next?

1. 날씬함은 무엇입니까?

그게 뭐야?Svelte는 어셈블리 프레임워크입니다.구성 요소를 정의하고 웹 응용 프로그램, 웹 사이트, 또는 당신이 실현하고 있는 모든 것들에서 다시 사용하십시오.ReactJs VueJs나 다른 프레임워크에서처럼그런데 뭐가 달라요?주요 차이점 중 하나는 구축할 때 운행하는 것이다.
그러나 이것은 구축할 때 실행된다는 것을 의미합니까?이것은 Svelte가 실행 중인 구성 요소 프레임워크가 아니라 컴파일러 같다는 것을 의미한다.그것은 코드를 실행하기 위해 브라우저의 추상적인 층을 필요로 하지 않는다.구현된 구성 요소를 순수한 JavaScript 코드로 컴파일합니다.
모든 브라우저는 순수한 JavaScript나 바닐라 JavaScript를 좋아합니다. 왜냐하면 이런 효율적인 코드의 해석과 실행 속도가 다른 브라우저보다 빠르기 때문입니다.순수 JavaScript이므로 코드가 직접 DOM을 변경합니다.Svelte는 사용자에 대한 빠른 업데이트를 시뮬레이션하기 위해 가상 DOM을 필요로 하지 않습니다.

2. 왜 날씬하게

...Frameworks are primarily a tool for structuring your thoughts, not your code. (Rich Harris)

날씬함은 하나의 틀이다.React도 하나의 예입니다. 우리도 VueJs를 사용하는 것을 고려할 수 있습니다.날씬함을 사용하는 주된 이유는 무엇입니까?

배포할 때 브라우저에서 vanilla JS를 실행할 수 있습니다.빠르고 간단한 JavaScript

Svelte에서 개발한 응용 프로그램은 높은 호환성을 가지고 있다.예를 들어 Svelte에서 타이머를 개발하면 다른 프레임워크에서 작은 위젯의 컴파일 버전을 사용할 수 있습니다.왜?봐봐. 1위는 바닐라 JS야.

실행할 때 프레임워크의 추상적인 층이 없고 브라우저에 제공하는 코드가 더 적다.코드 분할이 더 가치가 있을 수 있습니다.프레임워크 코드가 필요 없는 코드만 제공하면 됩니다.

날씬한 관리자는 프레임에 포함하고 싶은 기능을 자유롭게 선택할 수 있다.Svelte 자체가 컴파일된 JavaScript 출력에 없기 때문에 사용자가 실행할 때의 성능 문제를 걱정하지 않고 기능을 추가할 수 있습니다.그들은 일련의 기능을 추가할 수 있지만, 우리 개발자 중에는 가방의 크기 때문에 어떤 결함도 있을 수 없다.

이런 위대한 방법에 주목하는 것은 항상 좋다.성능과 사용자 체험에 있어서, 나는 GatsbyJs와 같은 JAMstack 응용 프로그램이 없거나 부족하다고 생각한다.

SPOILER: Svelte also develops Sapper - The next small thing in web development

3.어디서 한번 해볼래요?

가장 간단한 방법은 그들의 것을 사용하는 것이다REPL.REPL은 브라우저의 프레임워크 기능을 볼 수 있는 온라인 편집기입니다.당신도 완성할 것을 건의합니다tutorials.그것들은 서로 잘 구축되어 있지만, 기능 사이만 전환하고 싶다면, 그것들은 여전히 독립적이다.

4. 첫 번째 구성 요소부터 어떻게 시작합니까?

로컬 시스템에서 응용 프로그램을 구축하려면 install NodeJs 을 확인하십시오.그렇지 않으면 REPL을 사용할 수 있습니다.
이 예에서 우리는 Node 설치를 사용하고 npx 명령을 사용하여 로컬 기계에 개발 환경을 설치합니다.npx degit sveltejs/template svelte-tutorial cd svelte-tutorial이 명령은 필요한 모든 파일을 다운로드하기 위해 npm install 설치를 완료하고 package.json 에 열거된 모든 의존 항목을 설치해야 합니다.
실행npm run dev은 브라우저 포트 5000에서 시작하고localhost에 접근합니다.
현재, 우리는 이미 첫 번째 구성 요소를 실현할 준비가 되어 있다.

localhost: 5000에서 브라우저에 접근하여 페이지가 실행 중인지 확인하십시오.

인코딩을 시작하기 전에 구성 요소의 기본 지식을 빠르게 알아보겠습니다.

부속품

슬림한 구성 요소는 .svelte 파일에 세 가지 주요 부분을 포함한다고 설명합니다.

태그

각 구성 요소 파일에 Html을 작성합니다.내 Html은 파일 하단에 있습니다.예를 들어, 스타일과 JavaScript가 없는 간단한 구성 요소는 다음과 같습니다.SimpleHeadline.svelte

<h1>Hello world!</h1>

스타일

구성 요소 스타일은 <style> 태그 사이에 포장되고 구성 요소를 포함하는 Html입니다.우리는 위의 제목에 스타일을 추가하고 파일의 이름을 바꾸었다.StyledHeadline.svelte

<style>
  h1 {
    font-size: 42px;
  }
</style>

<h1>Hello world!</h1>

JavaScript

파일에 태그 <script> 를 추가합니다.스크립트 블록에는 JavaScript 논리가 들어 있습니다.이 점을 설명하기 위해서 나는 DynamicStyledHeadline.svelte라는 또 다른 파일을 만들었다.

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

<style>
  h1 {
    font-size: 42px;
  }
</style>

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

HTML{VARIABLE}의 괄호에 같은 변수를 추가하는 방법을 보십시오.이것은 어떻게 변수를 템플릿에 사용할 수 있습니까?

<script>
  import SimpleHeadline from './components/SimpleHeadline.svelte';
  import StyledHeadline from './components/StyledHeadline.svelte';
  import DynamicStyledHeadline from './components/DynamicStyledHeadline.svelte';
</script>

<style>
  main {
    /* ... */
  }
</style>

<main>
  <SimpleHeadline />
  <StyledHeadline />
  <DynamicStyledHeadline />
  <!-- ... -->
</main>

위와 같이 구성 요소를 응용 프로그램에 가져오면 로컬 페이지에서 볼 수 있습니다 DynamicStyledHeadline.

⚠️ 태그 정리⚠️ 변수에 태그를 삽입하려면 주석과 유사한 구문을 사용할 수 있습니다.{@html string} 태그는 정리되지 않습니다.너는 반드시 수동으로 물러나야 한다.

<script>
  let string = 'this string contains some <strong>HTML!!!</strong>';
</script>
<p>
  {@html string}
</p>

슬림 경고

내가 좋아하는 것은 스웨트가 제공한 경고다.다음 예시에서alt 속성을 찾지 못했다는 경고가 나타납니다.로컬 개발 환경 또는 REPL에서 알림을 볼 수 있습니다.

<script>
  let src = 'tutorial/image.gif';
</script>

<img src="{src}" />
<img {src} />
<!-- shorthand -->

<!-- svelete expects this line with the alt attribute: <img {src} alt="A man dances."> -->

어셈블리 논리 및 조건 렌더링

If/else 문장

응용 프로그램의 대다수 상황에서 응용 프로그램이나 구성 요소 상태에 따라 표시를 해야 한다.Svelte에서는 if/else 문구를 사용할 수 있습니다.만약 당신이 어떤 항목에서 손잡이를 사용한다면, 그것들은 매우 익숙해 보일 것이다.모든 조건 블록은 # 로 시작하고 / 로 끝납니다.else 블록이 필요한 경우 다음과 같이 : 문자를 사용할 수 있습니다.else 블록은 일반적일 수도 있고 다른if문장을 가지고 있을 수도 있습니다.

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

{#if name === 'Nora'}
<p>{name} - What a beautiful name.</p>
{/if} {#if name === 'Nora'}
<p>{name} - What a beautiful name.</p>
{:else if name === 'Linda'}
<p>{name} - I like that name</p>
{:else}
<p>{name} - The name is also beautiful.</p>
{/if}

섬세한 고리

현실 세계에서 우리는 데이터에 대해 순환을 해야 한다.if문장과 마찬가지로 블록은 # 문자로 시작하고 / 문자로 끝납니다.객체에 length 속성만 있으면 해당 객체를 순환할 수 있습니다.each [...iterable] 순환 통용iterables를 사용할 수 있습니다.우리의 예에서, 우리는 names 수조를 통해 순환하고, as 키워드를 빌려 현재 이름에 접근한다.그 밖에 우리는 현재 색인을 두 번째 매개 변수로 삼을 것이다.
분해 문법도 사용할 수 있다.이 예에서 사용each names as { name }.

<script>
  let names = [{ name: 'Nora' }, { name: 'Linda' }, { name: 'Helga' }];
</script>

<h1>Beautiful names</h1>

<ul>
  {#each names as currentName, index}
  <li>
    <a
      target="_blank"
      href="https://en.wikipedia.org/wiki/{currentName.name}_(name)"
    >
      {currentName.name}
    </a>
  </li>
  {/each}
</ul>

데이터 대기 중

우리는 모두 웹 개발에서 비동기적인 문제를 처리해야 하기 때문에, 우리도 그것을 기다려야 한다.await 키워드와 같은 JavaScript 언어 특성은 우리가 이 점을 할 수 있도록 도와준다.Svelte에서 우리는 약속의 해결을 기다리는 편리한 문법을 얻었다. #await🚀.

<script>
  let promise = getRandomNumber();

  async function getRandomNumber() {
    const res = await fetch(`tutorial/random-number`);
    const text = await res.text();

    if (res.ok) {
      return text;
    } else {
      throw new Error(text);
    }
  }

  function handleClick() {
    promise = getRandomNumber();
  }
</script>

<button on:click="{handleClick}">
  generate random number
</button>

{#await promise}
<p>...waiting</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}

5. 다음은 무엇입니까?

당신은 GitHub에서 본문의 모든 참고 자료를 찾을 수 있습니다.마음대로 봐, 먹어보거나 포크로 포크해.
당신은 지금 첫 번째 구성 요소를 위해 포장을 잘 해야 합니다.만약 네가 더욱 깊이 잠수하고 싶다면, 나는 네가 한두 시간의 시간을 써서 공식 강좌를 읽는 것을 건의한다.👨‍🏫
만약 네가 이 글을 좋아한다면, 잠시 미소를 지으며 그것을 나누어라. 나를 따라와라. my RSS feed와subscribe to my newsletter.
건배, 마크