Clever Geek Handbook

私はミスリル（別名MithrilJS）が大好きです

こんにちは親愛なる読者。 この投稿を開いたということは、最先端のWebベースの開発（つまり、Webフロントエンド開発）が活気に満ちていることを意味します。 そして始める前に トマトを投げる ナレーターに感謝するには、読んでください...少なくとも途中まで。







簡単な理由で記事を書くようになりました：開発者の心と心に戦争があり、多くの尊敬されているソフトウェアの巨人は、開発者の運命を軽減することが自分の義務だと考えています（これは良いことです）。 同時に、彼の脳と神経系を壊すことをheしないでください（しかし、これはそうではありません）。 いわば、次世代の幸福の名の下に。 たぶん間違っているかもしれませんが、私が長い間発見し、それ以来それらのマウスのようなサボテンを食べていない楽器についての情報を共有したいです： Mithril（MithrilJS） 。







原則として、ミスリルは特効薬や命を与える十字架ではありませんが、試して使用する価値はあります。







一言で言えば、これは状態管理に関連するトラブルのないReactライクなフレームワークであり、ルーティングとすぐに使えるサーバー要求の便利な方法を備えています。 APIは非常にコンパクトで、1ページに収まります。 このフレームワークは、Pythonの原則「単一の明白なアクションモードが必要です」を促進します。 コンパクト（6kB gzip）で高速です。







「Pff」、React開発者は「すべてがReactに似ている、なぜですか？」







答えを挙げます。Reactでプログラムを作成するときは、アプリケーションのロジックについてではなく、アプリケーションの状態に対する猛烈な制御を抑制する方法について考えます。 そうでない場合、私にトマトを投げます。 Flux、Redux、MobX、コンポーネントの状態、高次コンポーネント、ステートレスコンポーネント、関数コンポーネントなど など ルーターを選択する（または単純化する）必要があることと、サーバーとの対話用のライブラリを選択する必要があることを忘れないでください。







「ねえ、redux-saga、redux-thunk、react-easy-redux-saga-inegrator-with-router-and-holy-shit！を使用して、プロジェクト設定で簡単にできるようにFB自体からreact-appを作成することを忘れないでください」 。

「ちょっと、Angularを使ってください。それはフレームワークであり、何らかのテンプレートエンジンではありません。しかし、バンドルサイズが2MB未満になるようにテンプレートをすぐにコンパイルすることを忘れないでください。settergetters {（[（（]]）}の構文を覚えてください。わあ、私たちはチームに1本の唐辛子さえあります。







うーん...







そして、私はただSPAをしたいです。 たぶんES5でも。 たぶん、Webpack / Grunt / Gulp / Browserify / TypeScript / Flowがなくても。 ページ上のスクリプトを接続して運転しました。

「はい、あなたは異端者です！燃やしてください！」 -多くが叫ぶでしょう。







やめて







正直に言うと、ES5ではSPAを作成しませんが、小さなスクリプトを作成します。 これが大規模なプロジェクトの一部ではない場合、いつかスクリプトを開いて変更し、涙でバンドルを見て、3行のスクリプトのソースコードを探す場所を考えないようにします（私は書いていませんでした）。







ミスリルについてmore



これは本当にReactに似ています。 ここで、再訓練されたと言えます。 JS-first、すべてがjavascript ...はい、オプションです。 このバージョンを作成します。







これは、Mithrilコードがどのように見えるかです。 ES5に書き込みます。 インポートを簡単に追加し、varをletおよびconstに置き換え、不要な関数を省略し、必要に応じて矢印関数を適用できます。







親愛なる忍者だけでなく、みんなにこの投稿を読んでほしい。 







// store.js var store = { todosOrdered: [1], todoDetails: { // default for example 1: { title: '  ', isActive: true } } }; // components/Todo.js //        //     //    //     function handleTodoCheck(id) { store.todoDetails[id].isActive = !store.todoDetails[id].isActive } function handleTodoTitleChange(id, value) { //       console.log('id=' + id + ";value=" + value); store.todoDetails[id].title = value } //    var Todo = { //   view: function (vnode) { var id = vnode.attrs.id; //    var todo = store.todoDetails[id]; //          return( //  - //    CSS-,     'div.todo' m('.todo', { //   //    class: todo.isActive ? "active" : "no-active" }, [ m('input', { 'type': 'checkbox', onchange: handleTodoCheck.bind(null, id) //      }), m('input', { value: todo.title, //       onchange: m.withAttr('value', handleTodoTitleChange.bind(null, id)) }) ]) ) } } // components/Todos.js var Todos = { view: function (vnode) { return( m('.todos', //    store.todosOrdered.map(function(todoId) { //      return m(Todo, {id: todoId}) }), ) ) } }


ここでは、いわばレンダリングと状態管理に関するものです。 味に塩こしょうを加えます。

コンポーネントの階層（1つのコンポーネント-1つのタスク）があり、ユーザーと対話してプレゼンテーションを更新します。







この例では、親子関係がありますが、それなしで行うこともできます。 純粋な機能やタイムマシンはありません。







しかし、ここではすべてが非常にシンプルであり、ログが記録されており、何が起こっているのかが明確です。 必要に応じて、すべてに追加のデバッグ情報を提供できます。







型チェックを行う場合は、TypeScriptを使用し、インターフェイスを使用して引数を型チェックします。 このように： 







 interface TodoAttrs { id: number } //   ";",       // const    ,  const Todo = { view(vnode) { let attrs: TodoAttrs = vnode.attrs //   1 let id = attrs.id .... const Todos = { view(vnode) { return( //  ,   store.todosOrdered.map(todoId => m(Todo, <TodoAttrs>{id: todoId})) //   2 ) } }


私はスヌーブに私に急がないように頼みます、そして、とてつもない例のためにscりません。 彼が工夫されていることは明らかです。 しかし、ミスリルではすべてが本当に簡単です-それは本物のJSに非常に近いです：







  1. コンポーネントは、VirtualDOMツリーを返すビュー関数を持つオブジェクトです。 必要に応じてライフサイクルフックがあります（oninitなど）
  2. 引数を変更すると、コンポーネントが再描画されます。
  3. コンポーネントビュー（）メソッドによって参照される外部オブジェクトを他のコンポーネントから変更すると、コンポーネントが再描画されます。
  4. コンポーネントの外側で魔法をかけ、それらを更新したい場合は、m.redraw（）を呼び出します。 必要なコンポーネントが再描画されます。
  5. 利益


最後に、ここで何が見えますか？ （私は上記のリストを含むことを意味します）私の意見で正しいいくつかのこと：







  1. コンポーネント間で情報を交換する方法に夢中ではありません。 React + Redux？ React + MobX？ または、高次コンポーネントは十分ですか？ たぶんVue + Vuexの方が良いのでしょうか？ （私はすでに叫んで泣いています）。 外部オブジェクト（または複数）を取得し、状態ストアとして使用します。
  2. 可能性のある構文の質問への回答としてのhtml-first準拠（hello VueとRiot、Angular）：

    そして、ループ、条件、変数バインディング、イベントリスナーなどを実装するために、DSLは最終的に何になりますか？ 数年とフレームワークのいくつかの主要な更新で、それは何に変わりますか？ 私の意見では、構文は「テキスト内の変数」ではあまり明確ではありません。 そしてこれは重要です。 また、Mithrilのアプリケーション（およびテンプレート）はデバッグが簡単です。


JSXについては別途



JSX（およびBabel、Webpack、その他すべて）を簡単に使用できます。マニュアルは公式ドキュメントに記載されています。







JSXでは、次のようになります。 







 // components/Todos.jsx const Todos = { view(vnode) { return( <div className="todos"> {store.todosOrdered.map(todoId => <Todo id={todoId} />)} </div> ) } }


一般に、 m('span.cool', "I'm cool")



タイプm('span.cool', "I'm cool")



と比較すると、すべてのマーカーの味と色は異なります。 私はハイパースクリプト（そのような名前、はい）を使用していますが、フレームワークの作成者が推奨しています。







その他



一般的に、GitHubでの8kスターの公開時のMithrilは、これはそれほどではないかもしれませんが、非常に議論されているプログラミング言語のいくつかよりも多いかもしれません。 成熟したフレームワーク：2014年以降のgithub上の現在のリポジトリ、200人以上のカウンター投稿者、数日前の最終更新。







特にフォリオの「プロ向けのAngular」と比較して読むべき特別なものはないので、ドキュメントを読んで、便利な機能的なツールを使用することをお勧めしますそうすれば、トレーニングでお金を稼ぐことができます。







Mihtrilにはルーティングがあることを思い出させてください 







 m.route('/man', ManPage)


そして便利なサーバーリクエストメソッド 







 m.request({ method: "POST", url: "/todo", data: {id: id, title: title}, //    withCredentials: true, //   }) .then(function(data) { // data -   JSON console.log(data) })


接続方法 わずか6 KBのgzip： 







 <script src="https://unpkg.com/mithril"></script>


上記のすべてが機能します。







まあ、またはすべてのホイッスルとnpm、もちろん。

Gitterには非常に活気のあるコミュニティがあります







興味があれば、ドキュメントを翻訳（試用）できます。 実際、ミスリルには価値があると思います。







結局のところ、私たちは長い間、コンピューターではなくコンピューターに取り組んでいるので、英語を使ったからと言ってscらないようにお願いします。







私が言いたかったのはそれだけです。 ありがとう







私がミスをした/見なかった/理解しなかった/感謝しなかった場合、建設的な批判の準備ができていました。







はい、忘れました。既存のベンチマークへのリンクは次のとおりです。

https://lhorie.github.io/todomvc-perf-comparison/todomvc-benchmark/

https://developit.github.io/preact-perf/







GitHubリポジトリ







More articles:


All Articles