🚵🏾 👩🏾‍🤝‍👨🏻 💑 私たち全員が南に送ったように（まあ、またはテンプレートエンジンに関する話の続き） 🤦🏾 🤜🏻 ⚽️

一般的に、私は非常に愛情のある人であり、特にさまざまなグッズの面で。しかし、私の中の何かは、それが神聖さの光輪を見つけて、賞賛の対象になり次第（2番目の前に心からきれいになりました）ひっくり返ります。この瞬間、私の内なる声（はい、声が聞こえます）は厳しく私に言います-「ここから出よう！」

そして、このようながらくたは、複雑で、クレイジーですが、非常に楽しいテクノロジーの世界で非常によく起こります。私の特定のケースでは、Web開発の世界で。

昨日はJQでした。まあ、彼女の神に役立つ小さなもの。しかし、専門家はJQがJavaScriptの一部であり、これがないとイベントをノードにバインドすることは完全に不可能であると心から信じ始めました（聴衆のささやき：クロスブラウザの互換性、cssssにいくつかの問題があるため）。そして、寺院を備えた教会が建設され始め、JQは私たちの罪人をアイコンから眺め始めました。そして、本は「Programming JQuery」（JQ「programming」、Karl！）という名前で書かれました。

そして昨日はAngularJSでした。そして、彼は彼の後ろに立っているので、彼は素晴らしかった...ええ、彼自身が立っています。

そして今日はReactJSです。一般的に、私たちのすべて。なんで？ DOMへの直接アクセスに反しているため、それは正しいためです。なんで？そして、DOMにアクセスするのは間違っているからです！なんで？男の子、w＃pooに行きます！

いいえ、フレンズ、それについて考えないでください-私はそれをまったく持っていません-私を信じて、私はロイヤルティコンテストで賞を受賞しました。まさにすべてにその場所と目的があります。タンクから撃ち、ハエをたたこうとすることは、どういうわけか深刻ではありません。しかし、ある時点で、これを正確に開始し、JavaScriptの半分のメガバイトが単純なプロジェクト（TypeScriptのソースコードを使用して、JSに書き込みをせず、「理由」を聞かないため-答えは上の段落でした）

ReactJSは本当に素晴らしいものです。そして、 ~~ブラックジャックを~~使用してアプリケーションを作成し、あらゆる種類のウィンドウ、タブ、その他のゴミを含むデスクトップにドラッグできるウィジェットを~~送信する~~タスクに直面したとき（いくつかあります）、ReactJSを選択することをheしませんでした。しかし、「賢明な」顧客が単純なプロジェクトで私たちのところに来て、彼（プロジェクト）がAngualrまたはReactJSに基づいているべきであるかのヒントのように、私は和解のしるしとして泣き、飲み、戦い、飲みたいです。そして、ご存知のように、それはほとんど常に機能しますが、場合によってはまだ暖かい気候へのチケットを書く必要があります。

その間、私はチームで幸運でした。そして、以前の投稿ですでに述べたように、私は単純なテンプレートエンジンを並行して開発することを許可されました。この点で会社は独自の純粋に利己的な利益を持っていることを教えてくれますが）。

一般に、彼の最初の公開、つまり5か月後から、テンプレートエンジンは大幅に変更されました。このメモの内容（対象読者の話題：意見が一致しません。これはReactJSについてではなく、Angularについてもです）。待って！「React」という言葉を何度か間違いなく言います。

そのため、行われた主なことは、並列プロジェクトの大きなプールです。現在、1つの（かなり大きな）ライブラリが結合されています。

アナログRequireJS
リソースローダー（CSSファイルなど）
キャッシュコントローラー
基本的な機能（AJAXリクエスト、DOMを操作するためのツール、CSSなど）
さて、テンプレートエンジン、それは彼についてです

決して乾いたつまらないものの山であなたを退屈させるつもりはありませんが、それが何であるかを示すために、単純な例の「カップル」だけを与えます。

たとえば、平凡なテーブルが必要です。また、JSONでデータを出力する特定のAPIがあります。テンプレートを使用して別個のHTMLファイルを取得して描画します。そして、必要なスタイルを添付することを忘れないでください。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Flex.Template</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="pattern.css" /> </head> <body> <table data-type="Demo.Table"> <tr> <th>{{titles.column_0}}</th> <th>{{titles.column_1}}</th> <th>{{titles.column_2}}</th> <th>{{titles.column_3}}</th> </tr> <tr {{[rows]}}> <td>{{column_0}}</td> <td>{{column_1}}</td> <td>{{column_2}}</td> <td>{{column_3}}</td> </tr> </table> </body> </html>

これが必要な場合、テンプレートをレンダリングします

 _patterns.get({ //   url : '/components/table.simple/component.html', //  "" node : document.body, //  hooks : { titles : { column_0: 'Column #0', column_1: 'Column #1', column_2: 'Column #2', column_3: 'Column #3', }, //      rows: _patterns.url('/examples/json/table.json') }, }).render();

それだけです、実際（結果はここにあります）。そして、特に素晴らしいのは、テンプレートをローカルで開いて、（穏やかで、ゆっくりと、気を散らすことなく）スタイルをデバッグできることです。これは、平凡なHTMLページがあるためです。

もちろん、データとペンを入力できます。

 var data_source = []; for (var i = 0; i < 100; i += 1) { data_source.push({ column_0: (Math.random() * 1000).toFixed(4), column_1: (Math.random() * 1000).toFixed(4), column_2: (Math.random() * 1000).toFixed(4), column_3: (Math.random() * 1000).toFixed(4), }); } _patterns.get({ url : '/patterns/table/single/pattern.html', node : document.body, hooks : { titles: { column_0: 'Column #0', column_1: 'Column #1', column_2: 'Column #2', column_3: 'Column #3', }, rows: data_source } }).render();

そして、あなたはそれをマークアップに直接押し込むことができます-主なものは愛することなので、何も禁止されていません。

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--BEGIN: Patterns definitions--> <link rel="pattern" name="my_table" src="/html/table/template.html" data-hooks="rows, c_0, c_1, c_2, c_3" /> <!--END: Patterns definitions--> </head> <body> <my_table> <rows> <c_0>0.0</c_0> <c_1>0.1</c_1> <c_2>0.2</c_2> <c_3>0.3</c_3> <c_0>1.0</c_0> <c_1>1.1</c_1> <c_2>1.2</c_2> <c_3>1.3</c_3> <c_0>2.0</c_0> <c_1>2.1</c_1> <c_2>2.2</c_2> <c_3>2.3</c_3> <c_0>3.0</c_0> <c_1>3.1</c_1> <c_2>3.2</c_2> <c_3>3.3</c_3> <c_0>4.0</c_0> <c_1>4.1</c_1> <c_2>4.2</c_2> <c_3>4.3</c_3> </rows> </my_table> </body>

マークアップを使用すると、一般的に非常に便利なことができます。たとえば、次のような非常に重要なタブのコレクションがあります。

 <div class="tabs-container"> <div class="tabs-buttons"> <a class="tab-button">Tab 0</a> <a class="tab-button">Tab 1</a> <a class="tab-button">Tab 2</a> </div> <div class="tabs-content"> <div class="tab-content"> <p class="tab-content">Tab content 0</p> </div> <div class="tab-content"> <p class="tab-content">Tab content 1</p> </div> <div class="tab-content"> <p class="tab-content">Tab content 2</p> </div> </div> </div>

これをテンプレート、つまり別のHTMLファイルに配置します。

 <div class="tabs-container"> <div class="tabs-buttons"> <a class="tab-button" {{[buttons]}} onclick="{{@onClick}}">{{button}}</a> </div> <div class="tabs-content"> <div class="tab-content" {{[tabs]}}>{{tab}}</div> </div> </div>

このテンプレートを使用したマークアップ（ページ上）で、次のことができます。

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--BEGIN: Patterns definitions--> <link rel="pattern" name="tabs" src="/html/tabs/template.html" data-hooks="buttons, tabs, button, tab" /> <!--END: Patterns definitions--> </head> <body> <tabs> <buttons> <button>Tab 0</button> <button>Tab 2</button> <button>Tab 3</button> </buttons> <tabs> <tab><p>Content of tab 0</p></tab> <tab><p>Content of tab 1</p></tab> <tab><p>Content of tab 2</p></tab> </tabs> </tabs> </body>

また、直感的に読みやすく、理解しやすいです。プロモーションサイトのタブは実際に行われます。

美しさは、テンプレートがすべてクライアント上でローカルに保存されることです。つまり、ページがリロードされると、このページ自体のレイアウトの一部は単にロードされず、クライアントから取得されます。これは、JSやCSSファイルなどのリソースにも当てはまります。実験としてのみ、ページを完全にキャッシュする機能もありますが、これらは単なる実験です。

もちろん、テンプレート用に独自のコントローラーを作成し、いくつかの機能を付与することもできます。テンプレート内の値を「ライブ」変更できます（表の例では、セルの値を変更します）。モデル、イベント（確かに標準）があります。そしてもちろん、ご存知のようにDOMにアクセスして楽しむことができます。

多くのことをそこで行うことができます、ここで読むことは禁止されていません（もし、自由な時間があれば）。

ただし、開発中にFlex-Patternに設定された要件に個別に注意します。これは、その使用の可能性を部分的に反映しています。

最初で最も重要なのは標準HTMLのみであり、現在のJS標準のみです。つまり、テンプレートはHTMLファイルであり、プリオールではありません。
これはクリーンなフロントエンドソリューションであり、テンプレートはレイアウトにマウントできますが、Flex-Patternはサーバーソリューションではなくクライアントソリューションです。
何からも完全に独立。 Flex-Patternだけを接続して作業を開始し、追加の基本機能（前述）を取得するだけで十分です。

実際、これらはアイデアの元になっている3つのクジラです。

繰り返しますが、Reactについて（約束しました）、前回は彼と比較するための多くの参照と「リクエスト」がありましたが、これらは重量カテゴリが異なるため比較されません。違いについてのみ説明します。

Reactには、追加の環境で（通常の快適な作業のために）多数の~~保守要員~~が必要です。 Flex-Patternsは完全に自給自足です（モジュールを作成する機能とは別に、JQのような基本的な機能の存在にも他の利点があります）-ピックアップして動作します。
Reactはnpmに慣れており、Flex-Patternsはそれが何であるかさえ知りません。
ReactはHTMLに似たものを使用しますが、HTMLは使用しません。 Flex-PatternsはHTMLのみであり、defaultValueの知識は必要ありません。
React全体は、開発者に対してかなり不信感を抱いており、多くの点で制限されています（おそらく利点があります）。 Flex-Patternsは、ページに接続されている~~シェル~~を~~保護し~~た人を完全に信頼します。
Reactはより高速に動作します。 Flex-Patternsは全体として25〜35％遅くなりますが、React 100のレンダリング速度が120ミリ秒である小さなパターン（たとえば、1000行のテーブル）で「顕著」です。Flex-Patterns150のレンダリング速度は200ミリ秒です。巨大なオブジェクト（10,000行のテーブルなど）について話す場合、結果はほとんど同じです。
記憶は両方とも釣り合っています。
Reactはマークアップとロジックを「妨害」しますが、Flex-Patternsは積極的にそれを分割してファイルの周りに分散させ（不快に思えるかもしれません）、HTML内のコードを回避しようとします。
Reactはブラウザーのキャッシュを信頼し、Flex-Patternsはパターンをひたすらキャッシュします。
Reactは「少し」多くの人に働きかけ、Flex-Patternでは「少し」少ない。
Reactには、状態の神聖な概念があり、Flex-Patternsは無神論者であり、罪を許します。

そして最後に、プロジェクトの将来についてのいくつかの言葉（もし誰かがもちろん興味があるなら）。プロジェクトは成長しており、その開発はますます骨の折れる作業です。近い将来-私の推定によると、体重を約200 kbから120から170 kb（最初は楽観主義者の声）に減らすことができる厳しい食事療法。また、空中に同じことを行うというアイデアがありますが、JQでは、サイズが70〜100 kbのライブラリを取得できます（テンプレートエンジンだけでなく、JQの機能を本質的に複製するより多くのものを忘れないでください）。

ただし、サポートなしでできることはほとんどありません。あ！おびえた）））いいえ、それは財政についてではありません。アスタリスクがあれば、彼らは私にこの全体の時間をもう少し与えてくれるだけです（私は嘘をついていません、これは状態であり、展開されています）。あなたにとって-これはクリックですが、私にとっては-この創造を発展させるための余分な時間です。事前に感謝します。

すべての幸福、善と光。

脅威。 Reactを学ぶ;）

私たち全員が南に送ったように（まあ、またはテンプレートエンジンに関する話の続き）

More articles: