JS開発がおかしいのはなぜですか？？？

Web開発は楽しいです〜しかしJavascriptは...気が遠くなるようなものです。

Web開発の他のすべては非常に単純ですが、Javascriptを詳しく調べると、他の人が知っている重要なことを知らないかのように、「誰もが目を覚まし、あなたは一人でいる」と感じるでしょう。基本的な知識の内容、およびこれらの内容は、すべての知識を理解するのに役立ちます。

事実、あなたは問題解決のいくつかの重要な部分を見逃しているのは事実です。

さらに、フロントエンド開発は確かにクレイジーな状態になっています。

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

椅子を引っ張って座った。Javascriptアプリケーションの作成を開始する時が来ました。

最初のステップは、ローカル開発環境をセットアップして実行することです。では、Gulpを使用しますか？またはGrunt？待って、わかりました... NPMスクリプトがあるようです！

WebPACK？またはBrowserify？（恥ずかしがり屋）Require.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('example')

  );

これら以上。

$ npm install --save react react-dom babelify babel-preset-react

$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

実際、browserifyをインストールし、実行後にWebページで実行できるようにするなど、まだいくつかの手順が欠けています。これは、コンテンツを含むWebページを直接生成しないためです。

これを完了すると、最終的にbundle.jsというファイルが必要になります。このファイルには、19374行のコードを含む新しいReact HelloWorldアプリケーションが含まれています。そして、browserify、babelify、react-domをインストールするだけで、理解できない数千行のコードを生成するのに役立ちます。考えてみてください。

したがって、基本的には次のようになります。


Marc was almost ready to implement his "hello world" React app pic.twitter.com/ptdg4yteF1

— Thomas Fuchs (@thomasfuchs) March 12, 2016

さて、簡単なJavasciptコードを使用してHelloWorldアプリケーションを作成しましょう。


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <title>Hello World</title>

  </head>

  <body>

    <div id="container"></div>

    <script>

     document.body.onload = function(){

       var container = document.getElementById("container");

       container.innerHTML = '<h1>"Hello, world!"</h1>';

     }

    </script>

  </body>

  </html>

それでおしまい。合計18行のコード。それをコピーしてindex.htmlファイルに貼り付け、ダブルクリックしてブラウザにロードできます。終わらせる。

この時点で、あなたは間違いなく言うでしょう：「待ってください、Reactはあなたが今書いたガジェットよりも多くのことをすることができます、そしてあなたはそのようにJavascriptアプリケーションを書くことはできません！」（ほとんどの場合）あなたは正しいですはい。ただし、すべてがおかしい理由を理解するには、まだ小さな一歩を踏み出す必要があります。

以下は私が約束した写真です。
JS開発がおかしいのはなぜですか？？？

開発するほとんどのJavascriptWebアプリケーションは、ベルカーブの中間に位置します。それは間違いなく中間部分になります。完全なReactスタックから始める場合は、最初からアプリケーションを過剰に設計していることになります。

これがすべてが狂っている理由です。問題を解決するために必要だと思うツールのほとんどはありますが、そのような問題は発生しておらず、将来発生することはありません。

同じ写真：

JS開発がおかしいのはなぜですか？？？
デフォルトでは、誰もがアプリケーションを過剰に設計していますが、これに気付いていないため、Javascript開発の状態が煩雑になりすぎています。

Javascriptアプリケーションをどのように開始する必要がありますか？ReactやAngularなどのツールを使用する必要がありますか？パッケージマネージャーを使用する必要がありますか？これを行わない場合、あなたは何をすべきですか？テストは必要ですか？Javascriptを使用してロゴを生成する必要がありますか？これらはすべて、デフォルトで大規模なテクノロジースタックを起動する前に、自分自身に尋ねる必要のある質問です。

Javascriptアプリケーションを起動するとき、重要なのは、アプリケーションが最終的に到達すると思われる複雑さのレベルのすぐ前にあるベルカーブ上のポイントを選択することです。

私は嘘をつきません、これらすべてを検証するには経験が必要です。ただし、ほとんどのJavascriptアプリケーションを起動できる優れた点は次のとおりです。jQueryとクライアント側のテンプレート、および製品ファイルを接続および削減するための非常にシンプルなビルドツール（バックエンドアーキテクチャでまだこれが行われていない場合））。

Javascriptアプリケーションを正しく構築する方法を知っている場合は、フレームワークまたはnpm / require / webPackまたはES6を使用する方法、時期、理由、テストを作成する時期、およびテストをローカルで実行するためにわざわざする時期を理解し始めます。ブラウザで実行すると、これらすべての問題が解決されます。

これらのギャップをJavascript開発の知識で埋めることに興味がありますか？圧倒されるのを避けたいですか？この開発プロセス中にJavascriptアプリケーションを過剰に設計することを避けたいですか？それが来月の焦点ですので、お楽しみに。1、2週間でもっと乾物が出てくるでしょう！

JS開発がおかしいのはなぜですか？？？

おすすめ