それは未来です

この投稿は単なる冗談であり、ここで言及したツールを悪い観点から公開しようとはしていません。 私は常にそれらを使用します、彼らは素晴らしいです、そして私はそれらを使うことを勧めます。 それは未来です@ 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に戻ります。