ミスリルによる開発。 練習、経験、落とし穴

あらすじ

この記事は、コントロールパネルで事前定義されたパラメーターに従って典型的なランディングページを構築するシステムのアプリケーションである開発経験に基づいています。 この記事では、Mithrilがアプリケーション開発に選ばれた理由、その特性、利点、およびこの素晴らしいツールを使用する際の落とし穴について説明します。

この記事に興味があるのは誰ですか？

この記事は、共通のシェルがロードされていない、簡単で実用的なアーキテクチャを備えた便利なサポートツールを必要とする特定の問題を解決するためのマイクロフレームワークの使用を検討する人にとって興味深いものです。 さらに、サイズが小さいにもかかわらずツールとしてのミスリルは高いパフォーマンスを発揮します。これは、適切な開発ツールを選択する際の重要な要素でもあります。 面白い？

なぜMitrhilなのか 使用する動機

ミスリル自体について簡単に説明します-内容と内容

MithrilはMVCマイクロフレームワークであり、その表示モデルは仮想DOMに基づいており、大規模なアプリケーションのレンダリングパフォーマンス、またはコンパクトだが複雑なウィジェットレンダリングロジックも追加します。 ミスリルには、完全なフレームワークと呼ぶのに必要なものがすべて揃っています。 コントローラー、モデルデータのバインディングを操作する手段、レンダリングを操作するための完全なシステムなど、ロジックを操作するシステムがあります。 また、低レベルで、コンテンツの再描画の時間とタイプ（複雑な非同期操作など）を正確に制御し、コンパクトに追加できるユーティリティも提供します。

• ルーター -コンポーネントをページとしてブラウザの特定のアドレスにバインドできます。
• Webサービス -http（s）経由でオンラインデータリクエストを操作できるようにするメソッド。フレームワーク機能の適応動作が組み込まれています。

これらすべてのコンポーネントとコンポーネントを使用すると、コードの作成中にニーズの90％をカバーするアプリケーションをmithrilで開発できます。

なぜミスリルを選んだのですか？

アーキテクチャの開発中、システム自体にデータの負荷が最小限であり、すべてが典型的なものであり、すべての要求、処理テンプレートの形式での追加のオーバーレイ、出力、および応答を待機しているクライアントを考慮して、クライアントとサーバー組織の間で選択しました-なぜなら、私たちの時代には、コンテンツのダウンロード速度と「瞬時の」読みやすさが非常に重要であり、機器に余分な負荷がかかるためです。

そのため、すぐにサーバー実装オプションを破棄し、少量の血液（および余分な使用済み神経細胞）でさまざまなタスクを解決できるクライアント側ツールのオプションを検討し始めました。

1. ツールのパフォーマンス。
2. 便利なデータ編成。
3. 描画の管理と速度。
4. ブラウザサポート：IE9以降、モバイルブラウザ。
5. 冗長な「適用された」相互作用のない便利で実用的なロジック管理
6. 過剰な機能性を伴わない、ツールの最大のコンパクトさ。
7. 前の声明から来る-楽器の最大「バニラ」。
8. ツールに慣れていない新しい開発者の開発への迅速な接続。
9. SEOを考慮して、将来的に適応する能力。
10. コンポーネントに依存しない開発-モノリシックソリューションを必要としません。

検討中のツールの中で、 Angular 、 Angular Light 、 Backbone 、 Knockout 、 Reactなどの多くのライブラリを調べました。 また、既製のフレームワークと複雑なツールだけでなく、個別のテンプレートシステム、データライブラリなども検討しました。

他のツールをふるいにかける理由

分析中にこれらのオプションがすべて破棄されたのはなぜですか？ 以下は、これらのツールが選択に関連しなかったリストの簡単な概要です。
AngularとReactは冗長性があるため、すぐには適していません。機能と組織の99％がプロセスで必要ないためです。
バックボーン -過度に冗長なロジックのために排除されましたが、それは遠い時代のアタビズムであり、その開発により、すべてのコンテンツのほぼ直接的な制御、および一般的に暗黙的なロジック構造の選択が可能になりました。
Knockoutは優れたライブラリですが、埋め込まれた一連の操作には大きすぎます。それらの多くがあり、最初はテンプレートでレンダリングするための大量のコード用に設計されています（ロジックおよびモデルのデータに関連）。 Backboneと同様にロジックの制御は非常に具体的ですが、データとバインディングを適切に操作できます。 私たちのアプリケーションでは、この機能は冗長であり、このオプションも放棄することが決定されました。
Angular Lightは、テンプレート、「遅延」ディレクティブおよびコンポーネントを含む、宣言された同様のロジックを持つ、角度のマイクロアナログです。 角度からのディレクティブの元のロジックと動作から、多くは残っていませんが、簡素化されていますが類似したテンプレートシステム、ツリーとディレクティブの初期化をタグ、クラス、属性、および$スコープバインディングの類似性によって比較するシステムです。 優れたツール-しかし、かなり具体的で柔軟性の低いコンポーネント構築ロジックを備えており、その正確な動作を理解することも最初は困難でした。 このオプションは、最後までスペアのままで機能していました。

ミスリル

mithrilがツールの選択を目の当たりにしたとき、それはすでに完全な機能を備えたアプリケーションを書くための一連のツールの非常に成熟した成功したプロジェクトでした。 このツールには、バックボーンやノックアウトなどのアタビズムや過度のテンプレートロジックはありませんでした。実際、ミスリルはDOM要素の小さなラッパーであり、そのほとんどはDOMメソッドに直接結び付けられ、仮想DOMの形で小さな砂糖が追加され、オブジェクトに接続されていましたコントローラーロジック。 同時に、データバインディングと過剰な部分のほとんどがロジックから除外されました。これにより、実装の柔軟性が最大限に高まりました。 彼は、容量のある拡張可能なアプリケーションを開発するときに必要なすべてのミニマリズムと実用性を収集しました。 Angular Lightとは異なり、より透明なコンポーネントロジックがあり、より実用的で統一されています。これにより、コードの保守が容易になり、アーキテクチャの微妙な問題が突然発生することを考えなくなりました。

美をもたらす-砂糖、便利さ、ユーティリティ

既定では、mithrilでのコンポーネントの開発は、開発の利便性を高めるために、絶対に何も規定しないプロセスです。さまざまなツールやライブラリを好みに合わせて使用​​できますが、mithrilでアプリケーションの開発を開始するすべての人に役立つ基盤があると思います。

一般的なヒント、テンプレート、クラス、およびOOP

パターン
デフォルトでは、ReactのようにMithrilでは、DOM要素クエリを構築するための単純化システムにもかかわらず、テンプレートノードの記述を整理するのはかなり不便です。

//     "class" . m('div', { "class": "container-class" }, [ // ..    ,         .  . m('h1[withattr="attr"]', { onclick: function(event) { /*    */ } }, 'Header') ]); 

この機能は、通常のHTMLの使用に慣れており、ミスリルディスプレイアーキテクチャの複雑さに煩わされたくない場合に特に感じられます。 これには特別なトランスフォーマーがあります-MSX 、およびそのシェル-Babelコンパイラーに対する私の意見では最も便利なbabel-plugin-mjsxなどです。
これにより、React JSXでよく知っている同様の設計を使用できます。

  <div class="container-class"> <h1 withattr="attr" onclick={ (event) => { /.../ } }>Header</h1> </div> 

私の意見では、このオプション（MSX）はこのキットで非常に便利です。
gulp + browserify + babelify + msx 。
以下に使用例を示します。

 //     Babel      . var Compiler = babelify.configure({ //     babel core optional: [ 'es7.exponentiationOperator', 'es6.spec.blockScoping', 'es7.exportExtensions', 'es7.classProperties', 'es7.comprehensions', 'es7.decorators' ], //     plugins: [{ transformer: MSX, //  MSX position: "before" //     }] }); gulp.task('babel-msx', function() { browserify([ /*   */ ]) .transform(Compiler).bundle() //    Browserify .pipe(source('bundle.js')) .pipe(gulp.dest('build/')); }); 

クラスとOOP
2015年、ES6（ またはその拡張ドラフトシュガーバージョンES2015“ ES7” ）およびES5に変換したBabelやTypescriptなどのESLコンパイラが特に人気を博し始めました。多くは、クラスやデコレータのサポートなど、最大限の機能を使い始めたいと考えていました、その他。 すでに存在するフレームワーク（たとえば、 Angular 2.0 ）は新しい現実に適応し始め、たとえばAureliaのように登場しました。したがって、すべての機能の使用、およびこれらの機能用のツールの柔軟性は、多くの開発の重要な要素になります。

デフォルトでは、Mithrilは、アーキテクチャ内の独立したコンポーネントである通常のオブジェクト内に編成されます。クラスとして使用する組織の特別な機能は、同じミニマリズムの理由で実装されませんが、これは、オブジェクト開発を拡張または適応できないことを意味するものではありません楽器。

最も単純な場合、コンポーネントオブジェクトをクラスのインスタンスとして使用する必要があります-たとえば、次のように：

 /*   */ class Component { constructor(opts) { /*     ... */ this.opts = opts; /*      */ this.controller = this.controller.bind(this); this.view = this.view.bind(this); } /*   */ controller(props) { return { paramOne: this.opts.paramOne }; } /*   */ view(ctrl, props, children) { return ( <button onclick={this.method} attr={ctrl.paramOne} /> ); } }; /*   -      */ m.mount(document.body, new Component({ paramOne: 'Hello!' })); 

これは、Mithrilでクラスを使用する最も簡単な方法ですが、それでも理想的なオプションではありません。たとえば、いくつかの機能を考慮する価値があります。たとえば、すべてのデータをインスタンスに絶対に保存せず、それらがビューに保存されていると仮定すると、幻想的なリスクはありません後続の再描画中にデータに別れを告げる-そのため、ロジックとデータは別々に保持する方がよい。 同時に、コントローラーにデータを保存して操作することも最善の方法ではありません。データをコンポーネント階層の奥深くに転送する必要がある場合は、依存ツリー全体を作成する必要があります。

たとえば、Flux Storeアプリケーションまたは使用したいその他のストレージを構築するときに使用できます-そして、コンポーネント内で適応させると、アクティブ化されたタブのインデックスのように、インスタンス内のデータストレージ、処理、および抽象イベント操作の明確な階層ができます。など Reactのように、componentWillMount、componentDidMountなどを使用して、 アクションアクションをレンダリング、レンダリング、さらにはライブループの即興的な外観にバインドすることができます。

建築上の特徴、落とし穴、個人的なメモ

描画

MithrilはVirtual DOMに基づいており、これはその速度とパフォーマンスを提供する特徴的な機能の1つですが、最小限のフレームワークであることを考慮して-レンダリングシステムにはいくつかの機能があります。 。 たとえば、Mithrilでは、たとえばReactでできるように、単一のノードまたはコンポーネントの再描画を他のすべてのコンポーネントとは別個に制御することはできません。 そして、これは理解にいくつかの困難を課します。したがって、Mithrilでの再描画の仕組みを理解することは価値があります。
ユーザーアクセスで使用可能な再描画には2つのタイプがあります。

m.startComputation / m.endComputation-再描画時に状態を整理することを可能にするメソッド-文字通り-それらはVDOMツリーの最初のスナップショットのセグメントを示し、2番目のスナップショットは両方のスナップショットが比較され、変更が見つかった後、パッチを形成し、データをポイントごとに変更します。 これは、たとえば、非同期データをロードする場合に役立ちます。この場合、操作を開始する前に最初のスナップショットを取得し、結果を取得した後に最後のスナップショットを取得します。 機能のうち、メソッドは特定のコンポーネントで呼び出された場合でもツリー全体をグローバルに比較するため、再描画がツリー内の他のコンポーネントに影響を与えないように開発時に注意する必要があります。 簡単な使用例を次に示します。

 function asyncGetAndRedraw() { /*      */ m.startComputation(); /*   */ SomeAsyncOperation({ ...args }).then(function promised(data) { /*   (   ) */ setTarget = data; /*     ,    ,   */ m.endComputation(); }); }; 

m.redrawはハードレンダリング用のメソッドです。このメソッドが呼び出された場合、比較は行われません。メソッドはコンポーネントのツリー全体を完全に再描画します。再描画するときはコンポーネントの既存の状態を考慮しないため、このメソッドには注意が必要です。

コンポーネントでプレーンHTMLを使用する

かなり危険で推奨されない操作ですが、テンプレートの純粋なHTMLの行を挿入する必要がある場合があり、 m.trustメソッドがこれに役立ちます。使用方法を次に示します。

 m.render("body", [ m("div", m.trust("<p>Clean Html</p>")) ]); 

結論として

この短い記事では、Webアプリケーションを開発する際にMithrilマイクロフレームワークに関心のあるもの、その利点、他のツールとの比較分析（個人の評価とニーズ）、および一般的な人々によるこのフレームワークの使用に関するいくつかの砂糖とメモを調べました。 上記のことから、Mithrilは、パフォーマンスと相まって、開発において最大の効率と簡潔さを必要とするコンパクトで大容量のWebアプリケーション（ウィジェットなど）を書くことを主な目的としていることを強調する価値があると思います。 ただし、アーキテクチャを慎重に検討する場合は、実装、メソッド、およびいくつかのスーパークラスとデコレータをシェルとして追加します-このツールは、大規模なプロジェクトやWebアプリケーションを失望させません。 この記事には、ミスリルの使用に関する私の意見と見解が記載されています-このシステムの使用経験がある場合、または自分で発見した微妙な点がある場合-ミスリルについて知ることは非常に興味深いことです。 この記事が興味深く、読むのに役立つことを願っています。

オプショナル

公式サイト。
Githubフレームワークページ
ミスリルの使用に関する有用な記事