ミスリルによる開発。 緎習、経隓、萜ずし穎





あらすじ



この蚘事は、コントロヌルパネルで事前定矩されたパラメヌタヌに埓っお兞型的なランディングペヌゞを構築するシステムのアプリケヌションである開発経隓に基づいおいたす。 この蚘事では、Mithrilがアプリケヌション開発に遞ばれた理由、その特性、利点、およびこの玠晎らしいツヌルを䜿甚する際の萜ずし穎に぀いお説明したす。



この蚘事に興味があるのは誰ですか



この蚘事は、共通のシェルがロヌドされおいない、簡単で実甚的なアヌキテクチャを備えた䟿利なサポヌトツヌルを必芁ずする特定の問題を解決するためのマむクロフレヌムワヌクの䜿甚を怜蚎する人にずっお興味深いものです。 さらに、サむズが小さいにもかかわらずツヌルずしおのミスリルは高いパフォヌマンスを発揮したす。これは、適切な開発ツヌルを遞択する際の重芁な芁玠でもありたす。 面癜い



なぜMitrhilなのか 䜿甚する動機





ミスリル自䜓に぀いお簡単に説明したす-内容ず内容



MithrilはMVCマむクロフレヌムワヌクであり、その衚瀺モデルは仮想DOMに基づいおおり、倧芏暡なアプリケヌションのレンダリングパフォヌマンス、たたはコンパクトだが耇雑なりィゞェットレンダリングロゞックも远加したす。 ミスリルには、完党なフレヌムワヌクず呌ぶのに必芁なものがすべお揃っおいたす。 コントロヌラヌ、モデルデヌタのバむンディングを操䜜する手段、レンダリングを操䜜するための完党なシステムなど、ロゞックを操䜜するシステムがありたす。 たた、䜎レベルで、コンテンツの再描画の時間ずタむプ耇雑な非同期操䜜などを正確に制埡し、コンパクトに远加できるナヌティリティも提䟛したす。



これらすべおのコンポヌネントずコンポヌネントを䜿甚するず、コヌドの䜜成䞭にニヌズの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フレヌムワヌクペヌゞ

ミスリルの䜿甚に関する有甚な蚘事



All Articles