この投稿は単なる冗談であり、ここで言及したツールを悪い観点から公開しようとはしていません。 私は常にそれらを使用します、彼らは素晴らしいです、そして私はそれらを使うことを勧めます。 それは未来です@ CircleCI Blog
-こんにちは、クールなWebアプリケーションの作成方法を学びたいです。 経験があると聞きました。
-はい、私はちょうどフロントエンドをやっています、私はいくつかのツールを使用しています。
-かっこいい。 現在、HTML、CSS、およびJavaScriptを使用した通常のTODOリストである単純なアプリケーションを作成しています。jQueryを使用する予定です。 これは正常ですか？
-いや、いや、いや。 これは古い学校です。 ぎこちないは死んでいる-今は誰も使っていない！ Reactが必要です。 これは未来です。
-わかった、わかった。 これは何？
-Reactは、Webアプリケーションを開発するための新しい方法です。 Virtual DOMに基づいており、JSXコードを記述できます。
-バーチャル何？ Jsx これは何ですか。
-JSXはステロイドのHTMLです。 これは、XMLとJSを1つのコードに混在させるJavaScriptの拡張バージョンです。 VirtualDOMとは、実際のDOMの一部を表すオブジェクトのツリーがあることを意味し、DOMを直接操作することなく、非常に迅速に操作することができます。
-なぜXMLとJSを混在させるのですか？
-まあ、なぜ。 Reactは未来です。 再利用可能なコンポーネントを作成できます。
-バックボーンのように、そうですか？
-いいえ。 Bacbonは死んでいます。 現在、すべてがコンポーネント上にあります。
-それでは、JSXやVirtualDOMについて気にする必要はありませんか？
-いや。 しかし、それらがどのように機能するかを理解しておくと、どこかでスローダウンすることを考えたり、コンポーネントの状態など、本当に意味のあるコードを最適化したりする必要がなくなります。
-さて、私は少し迷い始めています。 したがって、Reactと呼ばれるコンポーネントを記述するためのいくつかのshnyagaがあります。 jQueryで使用できますか？
「まあ、アプリケーションの一部をReactで、もう一方を必要なものに書くことができます。」 しかし、jQueryは死んでいます。 ところで、アセンブリ中にコンポーネントを接着するためにWebpackに注意を払う必要があります。
-はい。 これは何ですか
-これはモジュールバンドラーです。 Nodeモジュールであるかのように多数のファイルを作成し、それらを1つのモノリシックファイルに結合（またはパーツに分割）してクライアントに送信します。 反応ツールも必要ありません。バベルを1つ実行してJSXをコンパイルできます。
-バベル？
-うん、バベル。 これは、ソースマップのサポートにより、ES6 + / JSXコードを読み取り可能なES5コードに転送するクールなガラクタです。 Facebookでも使用されています。
-ES6 +？
-ES6 / ES2015はECMAScriptの次のバージョンです。クラス、矢印関数、マップ、セットなど、多くの新機能があります...現在、ほとんどの人がES6 +を使用しています。
-それはそんなに良いことですか？
-あなたが尋ねます！ ES6 + +トランスピレーションは未来です。
-それでは。 どうすればできますか？
-ノードのインストールから開始...
-ノードをインストールしますか？ あーいや あなたはReactとコンポーネントについて何か言いました。
-ええ、はい。 次に、Fluxアーキテクチャを使用して、アクション、ストア、およびコンポーネントの作成を開始します。
-フラックス？
-Fluxでは、データが一方向に流れるストア、アクション、およびビューのセットとしてアプリケーションを構築します。 ビューはアクションを呼び出し、ディスパッチャを通過し、ディスパッチャイベントへのサブスクライブを保存し、ビューがサブスクライブされた変更イベントをスローします。
-うん。 MVCではどうですか？
-いいえ。 MVCは死んでいます。 フラックスは未来です。 現在、多くのフラックス実装があります。
-何？ フラックスの実装？
「はい、Fluxは単なるパターンだからです。」 実装のフル：Alt、Flummox、marty、fluxxor、fluxibleなど。さらに、DispatcherのFacebook実装もあります。
「これをすべて使用する必要がありますか？」
-新人がこのテンプレートコードをすべて自分でコーディングすることは非常に難しいため、既成の実装を採用してください。
-わかった。 自分でこのシートを書きたくありません。
-まあ、私は言う、dofigの実現。
-Angularはどうですか？
-ふ。
-フー？
-ふ。
-見て。 複雑なもののインストール、設定、仕上げに煩わされたくありません。
-最後に、それは簡単です。 初心者向けの既製のクジラ/リポジトリがあります。または、Yeomanジェネレーターを使用してこれを行うことができます。
「発電機が必要ですか？」 ヨマン？ これは他に何ですか？
-彼はあなたのためにコードを生成でき、あなたはそれを使って一度に複数のアプリケーションを作成できます。 新しいWebpackでDLLサポートを使用すると、各アプリケーションを他のアプリケーションとは別にコンパイルできます。
-アプリケーションは1つだけ、ページは1つ、コンポーネントは1つ、何でも1つにします。 一つだけ。
-いいえ。 組み合わせ可能なコンポーネントを学びます。 これが今の私たちのやり方です。 すべてをコンポーネントに分解する必要があります-個々の小さなゴミごとに1つです。
-これは冗長なようです。
-これは、精度、利便性、パフォーマンスを達成する唯一の方法です。 ホットリロードなどを使用できます...
-ホットリロード？ どのようにライブリロードが好きですか？
-違います。 Webpackはこの素晴らしい機能をサポートします。モジュールのホットリロードと呼ばれ、react用のreact-hot-loaderプラグインがあるため、ページ全体をリロードせずに個々のコンポーネントのコードを変更できます。 また、Fluxを使用すると、コードのホットな編集と同時に、データの変更履歴を前後にスクロールするようなタワースクロールなどを行うことができます。
-だから。 現在、パッケージング、アセンブル、トランスパイルなどのさまざまなツールとライブラリが多数あります。 他に何か？
-先ほど言ったように、Fluxは優れたアプリケーションアーキテクチャを構築する機会を提供します。 しかし、ObservablesとImmutable dataを使用すると、状況はずっと良くなり、より興味深いものになります。
-観測可能ですか？ Immutableが必要ですか？
-イベントと非同期を便利に処理するには、オブザーバブルが必要です。Immutable.jsは、永続性、効率性、シンプルさのために必要です。 オブザーバブルは配列のようなもので、非同期のみです。 ES2016の非同期ジェネレーターを使用して値を返します。
-どのような非同期ジェネレーターですか？
-さて、見て、通常のジェネレーターは、関数が一連の値を返すことを許可し、非同期修飾子を使用すると、将来に値を返すことができます。 確かに、この著者であるJafar Husseinはすでに提案を撤回しており、ES7のより専門的なes-observableについてKevin Smithと協力しています。
-エム。 単純なアプリケーションを実行したいだけです。 ウサギの穴はどのくらい深いのですか？
-まあ、元の観察可能に近いRxJSを使用できます。 広く普及しており、生産に適しています。
-RxJS？ どのように役立ちますか？
-すでに書かれた約束やイベントで動作します。 任意の非同期コードからObservableを作成し、通常の値と同様に操作できます。 しかし実際には、本当に反応的で興味深いものを探している場合は、Andre Staltzが開発したCycle.jsフレームワークを見てください。
-WTF。 簡単なアプリケーションを作成して実行するだけです。 もうできますか？
-もちろん、展開は別の興味深い質問ですが、ほぼ完了です。
-さて、「今日、私たちは多くを理解しました。」 説明ありがとう。
-すごい！ 問題ありません。
「それでは、すべてを正しく理解できるように繰り返します」 そのため、アプリケーションのコードをアクション、ストア、コンポーネントに分割し、一方向のデータフローを構築し、ES6 +コードを記述して、クリーンなコードを記述できる最新の言語機能をすべて取得し、Babelを使用してこのES6 +コードを全員に適したES5コードに変換する必要がありますブラウザ、webpackを使用してノードモジュールとして記述されたアプリケーションのすべての部分を単一のファイルに接着し、ImmutableJSを使用してデータを表し、RxJSを接続してイベントやその他の非同期関数を記述します。
-はい。 それは素晴らしいことではありませんか？
-そして、はい、私はまだ静的と縮小を忘れているようです。
「まったく問題ありません。」 Webpackはこれを行うことができます。 必要なのは、いくつかのブートローダー、プラグインをセットアップするだけです-それでほぼすべてです。 CSSと画像をインポートできます。 ところで、JSでスタイルを記述することができるCSSの代替があります...
-jQueryに戻ります。