Clever Geek Handbook

ErgoJSを使用してフロントエンドを構築する







リッチWebアプリケーションを作成するためのErgoJSと呼ばれるjsフレームワークをご紹介します。 そして、はい、私は自転車が大好きです。



この記事では、フレームワーク自体を詳細に説明せず、プロジェクトWebサイトに近い将来に関連情報を投稿する予定なので、一般的なポイントのみに触れます。



知人を始めましょう。



ErgoJSには、いわば、MVC、MVVM、独自のテンプレート言語などの特別な「キラー機能」という中核的なアイデアはないということです 。

ErgoJSは主にウィジェットのライブラリとして作成されましたが、現在では、 年齢が上がるにつれて、本格的なWebアプリケーションの構築に重点が移りました。



このフレームワークの作業はかなり前に始まりました。「脂肪」クライアントに対処し、アプリケーションだけをリベットすることに慣れているプログラマを対象としています。 しかし、当初はデザイナー-レイアウトデザイナー-プログラマーの3つの専門分野に分かれていたWeb開発チームに参加し、後にデザイナーレイアウトデザイナーと開発者プログラマーのカップルが修正を加えました。 プログラミングツールを作成するのは簡単で楽しかったのですが、スタイルとマークアップですぐには機能しませんでした（こんにちは、IE6）。 チームとの長時間の会議、「一度だけやろう」という試みは、目立った結果をもたらさず、貴重な時間しかかかりませんでした。 別のソリューションを探す必要がありました。 そして、これはCSSフレームワークの出現まで続きました。CSSフレームワークは、完全ではありませんが、レイアウトマジックを整理して体系化し、単純なWeb開発者が使用できるようにしました。



目標と目的



決定ではなく、方法の蓄積と固定



ErgoJSは、カーネルとウィジェットライブラリの2つの部分で構成されています。 それらは密接に関連していますが、それぞれに目的があります。 そのため、カーネルはプログラマーとレイアウトデザイナーの手法と作業方法を組み込み、システム化しようとし、Webアプリケーションブリックの役割を果たすウィジェットを作成および変更できるようにします。 最も退化したケースでは、カーネルコンポーネントを使用して、 html名前空間の機能を使用して通常のページレイアウトを実行できます。



ウィジェットライブラリには、アプリケーションの作成元となるコンポーネントの参照セットが含まれています。 これにより、開発へのアプローチが変更され（「作成」ではなく「アセンブル」）、プログラマーのトレーニングレベルの要件が軽減されます（ページ上で要素を整列または中央揃えする方法を知る必要はありません。必要なレイアウトを使用するだけです）。 プログラマーは、ライブラリに含まれるコンポーネントを使用してプロトタイプを作成し、時には粗く、時には非常に正確に、完成したソフトウェア製品のレベルまでさらに「仕上げ」ます。



最小限の驚きの原理



フレームワークのコンポーネントの機能と動作には、明白で予測可能な動作がある傾向があります。 特定の事柄がどのように機能するかについては、経験や見解が人によって異なるため、これを達成することは困難ですが、専門家グループと問題を議論することで多くの問題を解決できます。



やりすぎないで



HTMLまたはCSSを使用して何かを実装できる場合は、これを行う必要があります。 JavaScriptを使用すると、一般的なブラウザー（ポリフィル）による完全な標準サポートの欠如を補うか、標準化に該当しない新しい機能を追加できます。

仕様が更新されると、 ErgoJS機能が更新されます。たとえば、すべてのブラウザーでflexboxレイアウトがサポートされると予想されるため、ウィジェットサイズの自動計算に関係するErgoJSレイアウト機能のかなりの部分を放棄できます。



コンパクトコード



問題の一般的な解決策には常に1つの欠点があります-冗長性。 この場合、一般化の拒否、または操作の簡単な記録のためのメカニズムの作成が必要です。 ErgoJSは2番目のパスに従うよう努めていますが、1つのルールがあります。「コードが再利用のために記述されている場合は、一般的なフォームを使用する必要があります。」 他のすべての場合、短い形式が望ましいです。



ErgoJSの機能



宣言型プログラミングスタイル。



プログラマーにタスクが設定されると、彼はソリューションアルゴリズムを検索して実装します。 ユーザーインターフェイスでは、すべてが異なります。ソリューションはアルゴリズムを意味するものではなく、構造的な分解を可能にします。 この場合、画像を小さな部分に分割し、それぞれを個別に解決できます。 しかし、これらのすべての部品にすでに独自のソリューションがあり、開発者がそれらを一緒に組み立てる必要がある場合、ビルダーはどのようにパネルまたはレンガから家を組み立てて構築しますか？ 開発の本質は変わりつつあります。レンガを次々と敷く方法について考える必要はありませんが、パネルを接続する方法、開口部を作る方法、床を置く方法について考える必要があります。 危機にwhatしているものを理解するために、いくつかの例を考えてみましょう。



ボタンが必須のボックスを作成します。 



var box = new Ergo.widgets.Box(); var btn1 = new Ergo.widgets.Button({text: ' 1'}); var btn2 = new Ergo.widgets.Button({text: ' 2'}); var btn3 = new Ergo.widgets.Button({text: ' 3'}); box.items.add(btn1); box.items.add(btn2); box.items.add(btn3);


そして宣言的に： 



 var box = $.ergo({ etype: 'box', defaultItem: { etype: 'button' }, items: [ {text: ' 1'}, {text: ' 2'}, {text: ' 3'} ] });


この例は、命令型アプローチでは一貫してウィジェットを作成し、宣言型では特定の「エグゼキューター」に必要な結果を示して、彼がすべてを行うことを示しています。 当然のことながら、結果をより正確かつ理解しやすく説明すればするほど、計画と一致するようになります。



ある意味では、 ErgoJSは最小限のインターフェース設計を強制的に実行し、それから作成を開始します。



仮想ウィジェットツリーとDOM



ウィジェットは独立したエンティティ、またはむしろ、DOMが単なる表現であるエンティティの階層です。 つまり、各ウィジェットは特定のDOM要素に関連付けられていますが、表示される場合、要素間の数、位置、および関係は必ずしもVWTの要素に対応するわけではありません。



VWTはShadow DOMに非常に似ていますが、2番目がロジックとプレゼンテーションの混合である場合、VWTは純粋なロジックです。 つまり、VWTはShadow DOMを使用してレンダリングプロセスを最適化できますが、それに対応するものではありません。 



 //  - $.ergo({ etype: 'button', components: { icon: { etype: 'icon', // ,      weight: -10, //  ,     DOM (   ) autoRender: false }, content: { //     etype: '&text' } } });


階層データバインディング



ほとんどの場合、データ構造はページ要素の構造に対応しますが、データはドメインモデルのフレームワーク内で論理的に接続されており、定義によりユーザーが認識および理解できるため、その表示はこのロジックを保持するため、驚くことではありません。



ウィジェットにデータを接続することにより、データはすべての子ウィジェットに自動的にバインドされます。 バインディングプロセスは、VWTの個々のウィジェットとサブツリーの両方のバインディングを無効化または無視することで制御できます。 



 var obj = { title: '', datetime: '2014-11-10T12:55:00', description: 'Loremipsum', img: 'img/image_001.jpg' }; $.ergo({ etype: 'box', //      data: obj, //  components: { header: { binding: 'text', dataId: 'title' }, content: { //    layout: 'stack', items: [{ etype: 'html:img', //     src binding: 'src' }, { binding: 'text' dataId: 'description' }, { dataId: 'datetime', //       binding: function(v) { this.opt('text', moment(v).format('YYYY-MM-DD')); } }] } } });


動的データバインディング



バインディングメカニズムは、データがウィジェットのパラメーター、外観、状態に影響することを意味します。 動的リンクでは、データはVWTウィジェットの構造を決定し、ウィジェットとのデータ接続は一方向です。 ビューを変更してもデータには影響しませんが、データを変更するとウィジェット間の関係が再調整されます。 



 var list_data = ['', '', '', ''] $.ergo({ //   UL/LI etype: 'html:ul', //     defaultItem: { etype: 'html:li', //     text binding: 'text' }, // ,      dynamic: true, //     data: list_data });


フラットリストやツリーのようなリストを管理するための動的リンクの明示的な目的に加えて、暗黙的な-ユーザーのアクセス制御もあります。 つまり、さまざまな権限のさまざまなスクリプトをロードするだけでなく、サーバーが送信するデータを共有することによって、ページの表示を変更できます。



コンポーネントと要素への分離



実際、この分離はjavascript自体によって決定されます。 コレクションには、ArrayとObject-単純な配列と連想の2つのタイプのコレクションがあります。 したがって、一意の名前を持つ子ウィジェットはコンポーネント（ `components`）になり、ピン番号を持つ子ウィジェットは要素（` items`）になります。 



 //    $.ergo({ etype: 'button', components: { // - `icon` icon: { etype: 'icon', state: 'fa-cog' }, //   `content` content: { etype: '&text' } }, text: ' ' }); //  $.ergo({ etype: 'html:ul', defaultItem: { etype: 'html:li', }, items: ['Item_1', 'Item_2', 'Item_3'] });


基礎として人気のあるフレームワーク（jQuery）



ErgoJS自体はjQueryの機能のごく一部しか使用せず、開発が進むにつれて、パフォーマンスが重要な領域でVanillaJSに切り替えます。 ただし、実際には、jQueryは不純物を作成する作業を大幅に簡素化し、膨大な数のサードパーティプラグインを接続する方法を開きます。 



 //  - var w = $.ergo({ etype: 'list', items: ['', '', ''] }); // jQuery- <ul>    el w.el.css('color', '#f00');


その他...



ErgoJSが何であるかを理解する最良の方法は、 サイトの例をよく理解することです。



長所と短所



ErgoJSの長所は次のとおりです。



  1. 「純粋な」HTML、「余分な」属性なし
  2. アプリケーションはJavaScriptで開発されています
  3. 1つの基本オブジェクト-ウィジェット




また、欠点にも言及してください。



  1. 比較的低いレンダリング速度
  2. 既製のソリューションはほとんどありませんが、デザインモードで作業する方法はありません
  3. 特別なテストサポートなし


More articles:


All Articles