이 글은 www.mikenikles.com에 처음 등장했다.
사진 작성자Aryan Singh가 Unsplash

여러 해 동안, React는 줄곧 나의 첫 번째 선택이었다

2015년 10월 14일에 나는 회의를 주재했다inaugural React Vancouver meetup.당시 나는 1년 중 대부분을 리액트를 사용하며 뜻을 같이하는 개발자들을 한자리에 모으고 싶었다.
나는 감히 말하지만, 당시의 React는 인터넷 전단 세계에서 혁명적이었다.jQuery, 메인 네트워크 등 대체 방안과 비교하면js 또는 Angular 1.x. React로 개발하여 직관적이고 상큼하며 효율적으로 느끼게 한다.개인적으로 블록을 독립적으로 구축하는 생각은 정말 끌린다. 왜냐하면 자연스럽게 구조적이고 조직이 양호하며 유지보수하기 쉬운 코드 라이브러리를 만들었기 때문이다.
앞으로 몇 년 동안 나는 줄곧 Angular2를 세심하게 주목해 왔다.x+, Vue 등, 그러나 아무도 자신이 배에서 뛰어내리는 가장 좋은 선택이라고 생각하지 않는다.

그리고 날씬함을 알게 됐어요.

내가 날씬함을 처음 알게 된 것은 2018년 중, 즉 3.0판이 출시되기 1년 전이었다(다음 글 참조)."이것이 날씬한 것에 미련을 두는 이유입니다.

If you're not familiar with Svelte (https://svelte.dev/), please go to the website and spend 5 minutes reading the intro.

읽었어요?정말?뛰어나다👍
영상을 본 후 내 머릿속의 주요 문제는'날씬함'을 배워서 새로운 프로젝트, 심지어 기존 프로젝트에 활용할 가치가 있느냐는 것이다.날씬함은 나에게 깊은 인상을 남겼지만, 여전히 나로 하여금 그것을 완전히 받아들이게 하기에는 부족하다.

날씬하다x

2019년 4월 22일-Svelte 3: Rethinking reactivity는 내가 기다려온 블로그 게시물이다.

Please take some time to read the blog post and - it's about spreadsheets but I promise it's fun 😉

왜 이렇게 중요해?우선 날씬한 팀은 버전 3에 대해 논의해 왔고, 실제 응용을 보고 싶다.다른 한편, Svelte와 그의 약속은 나로 하여금 흥분을 금치 못하게 했고, 심지어는 내가 그것을 처음 들었을 때의 반응을 뛰어넘었다.
당시 나는 인터넷 개발자들을 지도하고 React에 대해 알게 하는 데 상당한 시간을 들였다.react 응용 프로그램을 개발하려면 JSX, JS에서의 CSS, Redux,create react app, SSR 등의 개념을 학습하고 이해하며 어느 정도 파악해야 한다.

None of that was necessary with Svelte.

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

<style>
  h1 {
    color: blue;
  }
</style>

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

쉬워요?동의합니다.사실 이것은 이렇게 간단하다. 나는 내 수강생들에게 누가 새로운 인터넷 개발인지 건의한다.

곧, 코드에서 무슨 일이 일어났습니까?

script 탭은 구성 요소 논리가 있는 위치입니다.style 탭은 이 구성 요소의 CSS를 정의합니다. 이 모든 것이 구성 요소 밖으로 유출되지 않기 때문에 h1을 안전하게 사용할 수 있습니다. 이 구성 요소에만 적용됩니다.CSS의 Javascript 객체로 가장하거나 CSS로 가장한 문자열 문자가 아닌 진정한 CSS입니다.
아래쪽은 어셈블리의 HTML입니다.변수를 {myVariable}와 함께 사용합니다.React의 JSX에 비해 Svelte는 for, class, forHtml, className 가 아닌 정확한 HTML 표시를 사용할 수 있습니다.모든 비표준 HTML 속성 목록을 보려면 React 문서의 "Differencs In Attributes"를 참조하십시오.

샘플 재구성

React에 비해 Svelte의 외관을 이해하기 위해 https://reactjs.org/에 열거된 내용을 재구성합니다.

간단한 구성 요소

위의 코드 세션을 참조하십시오.

상태 구성 요소

Interactive demo

<script>
  let seconds = 0;
  setInterval(() => seconds += 1, 1000);
</script>

Seconds: {seconds}

반응:33행
날씬하다

신청서

Interactive demo

<script>
  /* App.svelte */
  import TodoList from './TodoList.svelte';

  let items = [];
  let text = '';

  const handleSubmit = () => {
    if (!text.length) {
      return
    }
    const newItem = {
      text,
      id: Date.now(),
    };
    items = items.concat(newItem);
  }
</script>

<div>
  <h3>TODO</h3>
  <TodoList {items} />
  <form on:submit|preventDefault={handleSubmit}>
    <label for="new-todo">
      What needs to be done?
    </label>
    <input
      id="new-todo"
      bind:value={text}
      />
    <button>
      Add #{items.length + 1}
    </button>
  </form>
</div>

<script>
  /* TodoList.svelte */
  export let items = [];
</script>

<ul>
  {#each items as item}
    <li key={item.id}>{item.text}</li>
  {/each}
</ul>

반응: 66행
날씬하다

외부 플러그인을 사용하는 구성 요소

Interactive demo

<script>
  const md = new window.remarkable.Remarkable();
  let value = 'Hello, **world**!';
</script>

<svelte:head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/2.0.0/remarkable.min.js"></script>
</svelte:head>

<div className="MarkdownEditor">
  <h3>Input</h3>
  <label htmlFor="markdown-content">
    Enter some markdown
  </label>
  <textarea
    id="markdown-content"
    bind:value={value}
  />
  <h3>Output</h3>
  <div
    className="content">
      {@html md.render(value)}
  </div>
</div>

반응:42행
날씬하다

Less code = fewer bugs
Less code = better performance = better user experience
Less code = less maintenance = more time to develop features

나 또 날씬한 거 좋아해. 뭐야?

반응성

또 다른 강력한 기능은reactive declarations이다.한 가지 예를 들어 살펴보겠습니다.

<script>
  let count = 0;
  $: doubled = count * 2;

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

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

<p>{count} doubled is {doubled}</p>

다른 변수에 의존하는 변수가 있을 때 $: myVariable = [code that references other variables] 로 그것들을 설명하십시오.위에서 설명한 대로 카운트가 변경될 때마다 Double은 자동으로 재계산되고 UI는 새 값을 반영하도록 업데이트됩니다.

상점.

구성 요소 간에 상태를 공유해야 하는 상황에서 Svelte는 저장의 개념을 제공한다.The tutorial explains stores well . 지루한 강좌를 읽을 필요가 없다. 상점은 이렇게 간단하다.

파생 저장소

보통 한 상점은 다른 상점에 의존한다.스웨트 제공derived()이 가게를 합병한 곳이다.See the tutorial for details .

논리 블록으로 대기

네, 이것은 상당히 우아합니다.코드interactive demo부터 시작하겠습니다.

<script>
  let githubRepoInfoPromise;
  let repoName = 'mikenikles/ghost-v3-google-cloud-storage';

  const loadRepoInfo = async () => {
    const response = await fetch(`https://api.github.com/repos/${repoName}`);
    if (response.status === 200) {
      return await response.json();
    } else {
      throw new Error(response.statusText);
    }
  }

  const handleClick = () => {
    githubRepoInfoPromise = loadRepoInfo();
  }
</script>

<input type="text" placeholder="user/repo" bind:value={repoName} />
<button on:click={handleClick}>
  load Github repo info
</button>

{#await githubRepoInfoPromise}
  <p>...loading</p>
{:then apiResponse}
  <p>{apiResponse ? `${apiResponse.full_name} is written in ${apiResponse.language}` : ''}</p>
{:catch error}
  <p style="color: red">{error.message}</p>
{/await}

HTML의 #await 블록 보이시나요?현실 세계의 응용 프로그램에서, 이 경우, 불러오는 구성 요소, 오류 구성 요소, 그리고 실제 구성 요소가 API 응답을 나타낼 것입니다.오류 사례를 트리거하기 위해 텍스트 상자에 잘못된 리콜 이름을 입력하십시오.

"잠깐만, 그럼..."

소스 구성 요소?

내가 누군가에게 Svelte를 소개했을 때 나는 주로 "그런데 생태계, 구성 요소, 튜토리얼, 도구 등은?"
예, 오픈 소스 코드의 얇은 구성 요소는 React보다 훨씬 적습니다.그럼에도 불구하고, 소스가 시작된 React 구성 요소를 얼마나 자주 사용하고, 아무런 문제나 불필요한 비용이 없는 상황에서 통합합니까?나는 자바스크립트 커뮤니티의 많은 사람들이 웹 응용 프로그램을 모으기 위해 npm install ...에 지나치게 의존하고 있다고 생각한다.보통 자신의 구성 요소, 특히 날씬한 구성 요소를 구축하면 전체적인 시간을 줄일 수 있다.나는 이 점을 증명할 데이터가 없다. 이것은 나의 개인 경험에 기초한 것이다.
그러나 소스 모듈을 다시 사용하는 것이 위안이라고 생각하는 사람들에게는 점점 더 많은 가벼운 모듈이 있다.

일자리를 구하다

기회가 많으니 참고하십시오https://sveltejobs.dev/.애플의 사기 공정팀은 looking for a Svelte developer(2019년 12월 기준)이다.
반응, 베일, 각도 등이 필요한 일자리를 신청하는 것보다 경쟁이 훨씬 적다는 것을 명심해야 한다.

또한 Sapper는 날씬한 어플리케이션을 배포할 수 있습니다.

응용 프로그램 개발은 식은 죽 먹기다. 응용 프로그램도 배치해야 한다.이를 위해 날씬한 팀이 제공Sapper.이것은 완전한 게시물 자체이기 때문에 지금 이 사이트의 상세한 정보를 보십시오.

결론

이것은 나로 하여금 이 블로그 제목의 두 번째 부분을 생각하게 했다. "왜 다른 사람들이 흉내를 내는가"매일 새로운 인터넷 개발자들은 그들의 여정을 시작한다. 많은 사람들이 만나는 첫 번째 일은 먼저 무엇을 배워야 할지 확실하지 않다는 것이다.나는 미래가 간단하고 빠른 출시 시기라고 말했는데 이보다 더 간단하고 빠른 것은 생각나지 않는다.

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

<style>
  h1 {
    color: blue;
  }
</style>

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

트위터에 꼭 피드백을 보내주세요.
👋