RiotJS vs Svelte

나의 강연에서 어떤 사람이 svelteRiotJS를 언급했는데, 나는 그것이 무엇을 하는 데 혁명적이라고 생각해서 한번 해 보기로 결정했다.본고에서 나는 내가 주의한 관건적인 차이, 문법, 구성 요소 구조와 그것을 사용할 때 두드러진 기능 차이에 대해 계속 소개할 것이다.

성숙하다

나는 처음부터 Riot가 더욱 성숙하고 기능이 완비되었다는 것을 알아차렸다. 그들은 여러 가지 측면에서 비슷하다. 예를 들어'제로 의존'포킷 방안을 추진하려고 하는데 주로 개발자만 의존하고 Riot는 분명히 Svelte보다 더 많은 기능과 힘을 가진다.
이 방면의 한 예는 문서이다. Riot's documentation 정말 도움이 되고 즐겁게 읽을 수 있다. 내가 알아야 할 모든 것이 거기에 있고 예시가 있다.svelte's documentation는 괜찮지만 Riot's는 많은 상황에서 나에게 훨씬 좋다. 이것은 내가 즐겨 시도하는 점이다.

어셈블리 구조

구성 요소를 구성하고 레이아웃하는 방식에 대해 말하자면, Svelte와 Riot는 매우 비슷하지만, 나는 모든 라이브러리/프레임에서 구성 요소를 레이아웃하는 방식에 관건적인 차이가 있다는 것을 알아차렸다. 예를 들어 Svelte 구성 요소의 구성 요소를 Riot의 구성 요소에 비해 반드시 루트 요소가 있는 것은 아니다. 예를 들어 Svelte의 기본 구성 요소는 다음과 같다.

<script></script>
<style></style>
<example-component></example-component>

현재, 당신은 example-component 구성 요소의 뿌리라고 말할 수 있습니다. 어떤 의미에서 말하자면, 그것은 뿌리라고 할 수 있지만, 구조의 각 부분은 어떻게 단일 DOM 요소나 psuedo 요소에 끼워 넣지 않는지, 이제 Riot가 구성 요소를 어떻게 처리하는지 보십시오.

<example-component>
  <script></script>
  <style></style>
  <!-- your html for the component here as well -->
</example-component>

이것은 개인적으로 Riot를 좋아하지 않는 점이다. 왜냐하면 모든 것이 특정한 (위조) 요소에 박혀 있기 때문이다. 어느 정도에 모든 것이 함께 분쇄되고 날씬한 구성 요소에 대해 구성 요소의 구조는 분리된다. 왜냐하면 그들은 강제로 끼워 넣지 않았기 때문이다.
현재, 이것은 Riot에서 완전히 강제적으로 실행되는 것이 아닐 수도 있지만, 내가 요소의 날씬한 스타일을 사용하려고 시도할 때, 구성 요소의 일부가 분리되어 Riot 구성 요소 생성기가 그것을 좋아하지 않는 것 같다.

기능

이 두 라이브러리의 기능은 다시 매우 비슷하지만 Riot는 반응성과 데이터 구조 등 측면에서 서로 다른 모델을 사용했다.구성 요소<script> 부분의 변수나 도구가 업데이트되면 슬림한 구성 요소가 자동으로 업데이트되지만 이 경우 Riot는 다릅니다.Riot는 react 등 다른 도서관과 유사한 주 시스템을 사용한다.
각 라이브러리가 반응성과 상태를 어떻게 처리하는지 비교해 보자.Svelte에서 시작하여 이곳의 상태 관리는 어떤 의미에서 자동적이다. 왜냐하면 Svelte는 구성 요소의 변수를 통해서만 구성 요소의'상태'를 처리하기 때문이다.

<script>
  let clicks = 0;
  function addClicks() { clicks += 1; }
</script>

<button onClick={addClicks}>Clicked {clicks} times</button>

또한 Riot에서는 구성 요소가 업데이트되고 다시 렌더링될 수 있도록 구성 요소의 상태를 수동으로 생성하고 업데이트해야 합니다.

<clicker>
  <script>
    export default {
      state: { clicks: 0 },
      addClick() { 
        this.update({ clicks: this.state.clicks + 1 }); 
      }
    };
  </script>
  <button onclick={addClick}>Clicked {state.clicks} times</button>
</clicker>

비록 이것은 좋지만 도서관 사용의 복잡성을 증가시켰다. 국가를 잘 모르는 noobies에게 도서관은 나의 경험에서 더욱 사용하기 어려워질 것이다.
내가 알아차린 또 다른 일은 Riot가 가져오는 구성 요소를 어떻게 처리하는지 하는 것이다.svelte에서, 당신은 import 이 구성 요소를 html에서 사용하기만 하면 됩니다. 예를 들어, 어떤 의미에서, 그 구성 요소를 사용할 구성 요소에 등록해야 합니다.

<app>
  <script>
    import Clicker from "./components/clicker.riot";
    export default {
      components: { Clicker },
    };
  </script>
  <Clicker />
</app>

날씬함에서 구성 요소를 사용하는 것은 가져오고 사용하는 것처럼 간단하다

<script>
  import Clicker from "./components/clicker.svelte";
</script>

<Clicker />

설정 작업

모든 라이브러리에 기본 항목을 설정하는 데 있어서 이 두 라이브러리는 매우 간단합니다. 명령을 실행하여 초기화하기만 하면 됩니다. 그러나 저는 개인적으로 Riot의 기본 템플릿을 좋아하지 않기 때문에 최종적으로 제 템플릿을 만들었습니다.

회사 명 / 폭동

Rollup, Prettier 및 ESLint를 사용하는 RiotJS 기본 템플릿 라이브러리

마지막 한마디

나는 이 두 개의 창고를 좋아한다!비록 Riot가 개발된 지 여러 해가 되었지만, Svelte는 여전히 유치하지만, 사용하기에는 훨씬 간단하다.프로젝트에서 이 두 라이브러리를 사용하는 것을 볼 수 있습니다. 주로 더 튼튼한 구성 요소 구조를 필요로 하는 큰 프로젝트에서 Riot를 사용하고 작은 프로젝트에서 SVELT를 사용할 수 있습니다.최종적으로 이 두 라이브러리는 모두 잘 만들어졌다. 나는 Riot와 Svelte가 미래에 경쟁할 수 있을 것이라고 확신할 수 있지만 현재로서는 Riot가 더욱 성숙하고 기능 면에서 더욱 전면적일 것이다.