Ritotjs対svelte

Svelteがどうやって革命的だと思ったかという話の中で、誰かが図書館を立ち上げましたRiotJS , だから試してみることにした.この記事で私は、構文、コンポーネントの構造、およびそれを使用するときに私に目立ったいくつかの機能の違いに関して気づいた重要な違いについて行きます.

成熟

私が最初から気づき始めた1つのものは、より多くの成熟して完全な機能を感じていました、彼らが「ゼロ依存性」パッケージ計画をドライブしようとして、そして、主に開発者依存性を持っているだけであるように、多くのことに関して類似している間、暴動は確かにsvelteに比べてより多くの機能と力を持っているようでした.
この例はドキュメントです.Riot's documentation 正直に本当に助けと喜びを読むには、私が知っておく必要があるすべての例がありました.中svelte's documentation いいです、暴動は私に多くのケースでよりよくありました、そして、それは私がそれを試みることについて愛した1つのものです.

成分構造

構造とレイアウトの構成要素について、SvelteとRiotは非常に類似していますが、各ライブラリ/フレームワークのコンポーネントをどのようにレイアウトするかという点において重要な違いがあります

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

今ここで言うかもしれないexample-component コンポーネントのルートは、ある意味ではありますが、構造の一部がどのように単一のDOM要素またはpsuedo要素の下に入れ子になっていないかに注目しています

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

これは私が個人的に暴動について本当に好きでなかった1つのものです.そして、すべてがソートの(疑似)要素の下でネストされているので、すべてが途中で壊されます.
現在、これは完全に暴動で強制されない何かでありえました、しかし、私がコンポーネントのセクションが分離される要素svelteスタイルをしようとするとき、暴動コンポーネントビルダーはそれが好きでないようでした.

機能性

もう一度、2つのライブラリの機能性は非常に類似しています、しかし、暴動は反応性とデータ構造のようなもののために少しの異なるモデルを使用します.svelteコンポーネントは、<script> コンポーネントの一部、またはプロップが更新され、この場合は暴動が少し異なります.代わりに、他のライブラリと同様の状態システムを使用して、反応などの反応.
各ライブラリがどのように反応性と状態を扱うかについての例の比較を見てみましょう.Svelteで起動すると、ここでの状態管理の意味は自動的に、Svelteは単にその中の変数によって、コンポーネントの“状態”を処理するようになります.

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

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

一方、暴動では、手動で作成し、コンポーネントのコンポーネントの状態を更新して再レンダリングする状態を更新する必要があります.

<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には、これは私の経験で使用するのは少し難しくライブラリを作ることができます.
私が気づいたもう一つの方法は、機動隊がどのように部品を輸入するかを扱うことです.Svelteでは、単にimport コンポーネントを使用すると、あなたのHTMLでは、意味で“レジスタ”それを使用するコンポーネントを使用して登録する必要があります

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

Svelteのコンポーネントを使用している間、単にそれをインポートし、それを使用して

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

<Clicker />

設定

それぞれのライブラリで裸のプロジェクトを設定するという点で、それは両方とも非常に単純でした、ちょうど彼らを初期化するためにコマンド(s)を走らせて、しかし、私は個人的に暴動のためにデフォルトのテンプレートが好きでありませんでした

Xpyxel / 暴動

rolulupを使用して非常に基本的なテンプレートリポジトリ

最終語

私は両方のライブラリが好き!Svelteはまだどのように多くの年の暴動は、開発にされていると比較して非常にinfantileですが、それはそれを使用するための多くの簡単です.私は、プロジェクトのための両方のライブラリを使用して、主により堅牢なコンポーネントの構造を必要とするより大きなプロジェクトのための暴動を使用して、小さな個人のプロジェクトのためのsvelteを使用して自分自身を見ることができます.結局、両方の図書館は彼らがよくすることをします、そして、私は間違いなく暴動とsvelteを将来見ることができます.