ReactからRiot 2.0へ





この人気のブログエントリは、ミニマリズムの研究の出発点でした。 Muutは、人気のあるフレームワークBackbone、Angular、またはEmberを使用すべきではないと言うことから始めました。



私たちの動機:



1)クライアントアプリケーションのサイズが小さい。 フレームワークがアプリケーション自体よりもはるかに大きい場合は受け入れられません。

2)作業が完全に理解可能で透明な小さなフレームワーク。 すべての一般的なフレームワークには、非常に多数のAPIメソッド、プロパティ、およびその他の利点があります。 サードパーティのサイトにアプリケーションが埋め込まれているため、完全な理解が特に重要でした。



フレームワークがまったく必要かどうか疑問に思いました。 APIがUIから分離されている限り、問題はありません。 イベントシステムを使用すると、スタンドアロンコンポーネントを構築できます。ネイティブのpushStateを使用すると、ブラウザの戻るボタンで友達を作ることができます。



これらの考えから、Riot 1.0の作業を開始しました。



暴動1.0



Riotは、ブログで説明されている「フレームワークなし」の概念を実装したものです。 MVPを実装するための最小限のセットは何ですか? Riotは補助製品として始まりましたが、経験が積むにつれて成長し始めました。 Riot 1.0には既に次の機能が含まれています。

  1. MVPテンプレートの実装。
  2. APIをプレゼンテーションから分離し、スタンドアロンコンポーネントを作成するための観察可能なコンセプトの実装。
  3. URLと[戻る]ボタンで動作するルーター。






Riot 1.0は成功した製品でした。 もちろん、みんなのためではありません。彼は他の人とはとても違っていたからです。 彼は、特にその創造の動機について、愛され、嫌われていました。



Facebook React



反応は異なっていました。 個々のコンポーネントのマークアップとロジックをスタンドアロンのユニットに結合するというアイデアは良いことです。 コンポーネントUIは常にHTMLとJavaScriptの組み合わせであるため、コンポーネントでのそれらの接続は明らかです。



どの要素が異なるイベントに関連付けられているかを覚えておく必要はありません。 これらはすべて、コンポーネント内の1つの場所にあります。

テンプレートは、懸念ではなくテクノロジーを分離します。


テンプレートは、責任ではなく技術を共有します。 アイデアをありがとう、Facebook!



コンポーネントは、アプリケーションコードを減らし、DOM操作を減らし、jQueryセレクターを減らします。 UIコードが理解しやすくなっています。 JavaScriptコードを変更するだけで、ビューが自動的に処理します。



反応の欠点



Reactの縮小バージョンのサイズは124Kであり、これは問題です。 ユーザーにそのような巨大なライブラリをダウンロードさせることはできません。



大量のコードは、過度の複雑さの兆候です。 一括更新、サブツリーのレンダリング、ダーティチェック...これを行う簡単な方法があるはずです。



冗長な構文:多くの特定の構成体、コロン、中括弧、メソッドの大きなリスト。 私たちの目的のための余分な「箱から出して」の多く。



JSXはほとんど必要なものですが、HTMLとJSを簡単に組み合わせる方法を探していました。



Reactは、特定のイベントとサポートされているHTMLタグのシステムを実装しています。 私たちはそのような制限を望んでおらず、いつものようにDOMを使いたいと思っています。



暴動2.0



同様のReactを実装することは可能ですが、欠点はありませんか? はい、わかっていましたが、Riot 2.0が登場しました。







Riot 1.0(ミニマリズム)、React(仮想DOM、コンポーネント)およびHTML5(カスタムタグ)からアイデアを借りました。

小さなAPIが必要でした。 riot-attributesなどの特定の要素のないHTMLとJavaScriptが必要でした。

私たちは自分自身を超越しました。 Riot 2.0は、予想よりはるかに小さくシンプルであることが判明しました。 10倍小さくはありませんが、Reactの24倍小さく、9つのAPIメソッドのみです。



次は?



Riotの以下のバージョンが含まれます。

  1. ブラウザでコンパイラを使用して、サーバー上でのビルドを回避します。 私たちのコンパイラは小さくて高速なので、本番環境で安全に使用できます(すでに実装されています- およそTransl。 )。
  2. サーバーでのHTML生成。 これは現在のトレンドであり、同型アプリケーションを作成できます。 HTML生成はすでにカーネルに含まれているため、これは簡単に実装できるはずです。
  3. サーバーテスト。 jsdomを使用したより大きなテストスイート。
  4. HTML属性を使用した検証。


他のフレームワークとのパフォーマンス比較も実施する予定です。



確かに、1.0から2.0には多くの変更があります。 しかし、2.0ははるかに優れていると考えています。 カスタムタグは優れた機能を発揮し、このサイトで使用します。



それを試して、暴動にチャンスを与えてください!



MuutのRiotJS

GitHubのRiotJS



All Articles