JavaScript 開発が非常に詳細なコードになる理由

Web開発はとても面白いです! しかし、JavaScript は...気が遠くなります。

Web 開発における他のことはすべて簡単ですが、JavaScript を深く掘り下げると、「みんな起きているのに、自分だけ酔っている」という悲劇的な感情を感じずにはいられません。他にはあなたが知らないことを知っている いくつかの大きな基礎知識のコンテンツであり、これらのコンテンツはすべての知識を理解するのに役立ちます。

真実は、本当です、問題を解決するための重要な部分がいくつか欠けています。

また、フロントエンド開発は実際におかしくなりました。

それはあなただけではありません。

椅子を引いて座ってください。いよいよ JavaScript アプリケーションを作成します。

最初のステップは、ローカル開発環境を準備して実行することです。 Gulp または Grunt、待ってください...NPM スクリプトもです。

WebPACK または Browserify を使用していますか? .js が必要ですか? ES6にアップグレードしますか?それとも前処理に Babel を追加しすぎていませんか?

BDD それとも定期的な単体テスト?どのようなアサーション フレームワークを使用する必要がありますか?もちろん、コマンドラインからテストを実行するのは良いことですが、PhantomJS も機能するかもしれません。

Angular か React?残り火？背骨？

React のドキュメントで、「Redux は JavaScript アプリの予測可能な状態コンテナーです。素晴らしいです!」を読みました。そのうちの 1 つが必ず必要になります。

JavaScript アプリケーションを構築するのはなぜそんなにクレイジーなのでしょうか? ！ ?

なぜ私がこのすべてがそれほどクレイジーだと言えるのかを理解してもらいましょう。まずは例から始めて、その後、美しい写真に移りましょう。

これは React 用の「Hello, world!」アプリケーションです。

えー

まだ終わってません。

// main.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(&#39;example&#39;)
  );

ここには、実際には、browserify のインストールや、それを Web ページ上で実行するために実際に実行する必要があることなど、いくつかの手順がありません。コンテンツ。 ￣ _（ツ）_ /￣

これを完了したら、最後に、bundle.js というファイルが必要になります。このファイルには、新しい React Hello World アプリケーションが含まれています。このアプリケーションには 19,374 行のコードがあります。そして、browserify、babelify、react-dom をインストールするだけで、数千行の未知のコードを検討することができます。

基本的にこれは…

Marc は彼の「Hello World」 React アプリを実装する準備がほぼ整いました pic.twitter.com/ptdg4yteF1

— Thomas Fuchs (@thomasfuchs) 2016 年 3 月 12 日

Hello を書きましょうプレーンな JavaScript コードを使用したワールド アプリ。

そうです

それだけです。コードは 18 行。 Index.html ファイルにコピー/ペーストし、ダブルクリックしてブラウザにロードできます。仕上げる。

この時点で、「待って、React はあなたが書いたこの小さなこと以上のことができるのに、そのような方法で JavaScript アプリを作成できるわけがない!」と思っているなら、その考えは (ほとんどの場合) 正しいです。しかし、なぜすべてがおかしいのかを理解するには、まだ小さな一歩を踏み出す必要があります。

以下はお約束の写真です。

これから取り組む JavaScript Web アプリケーションの大部分は、ベル カーブの中央のどこかに当てはまります。そして途中で、完全な React スタックから始めると、最初からアプリケーションを大幅にオーバーエンジニアリングすることになります。

だからすべてがおかしくなるのです。これらのツールのほとんどは、問題を解決するために必要だと思われますが、そのような問題に遭遇したことはなく、今後もそのような問題に遭遇することはありません。

同じ画像:

デフォルトでは誰もがアプリを過度に設計し、それを認識しているため、JavaScript 開発の状態は過度に煩雑になっています。

JavaScript アプリケーションを開始するにはどうすればよいですか? React や Angular などのツールを使用する必要がありますか?パッケージマネージャーを使用する必要がありますか?そうでない場合はどうすればよいでしょうか?テストは必要ですか?マークアップは Javascript で生成する必要がありますか?これらはすべて、デフォルトで提供される大規模なテクノロジー スタックを立ち上げる前に自問すべき質問です。

JavaScript アプリケーションを起動するとき、重要なのは、アプリが最終的に到達すると予想される複雑さのレベルの少し手前にある鐘曲線上の点を選択することです。

嘘は言いませんが、これをすべて検証するには経験が必要です。しかし、ここには、ほとんどの JavaScript アプリを起動できる非常に大きなスイート スポットがあります。jQuery とクライアント側のテンプレート、および製品ファイルを連結および縮小するための非常に簡単なビルド ツール (バックエンド アーキテクチャにそれがまだ備わっていないと仮定します)。 。

Javascript アプリの適切な構築方法を知っていれば、フレームワーク、npm/requir/webPack、ES6 をいつ、どのように使用するのか、なぜ使用するのか、いつテストを作成するのか、いつテストを作成する必要があるのか​​を理解できるようになります。ローカルで実行するのか、ブラウザで実行するのかなど、これらすべての疑問が生じます。

JavaScript 開発の知識でこれらのギャップを埋めることに興味がありますか?プロセス中に圧倒されたり、JavaScript アプリケーションを大幅にオーバーエンジニアリングしたりすることを避けたいですか?それについては後ほど重点的に説明していきますので、お楽しみに！

以上がJavaScript 開発が非常に詳細なコードになる理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。