翻訳者から：一部の場所では、著者の意見は部分的または完全に私の意見と一致していませんが、疑問が提起されています。 著者のブログのコメントを読むことをお勧めします。
ほとんどの場合、フルスタックのWeb開発を行います。 定期的にPythonまたはRubyでバックエンドを記述しますが、C＃で作業することもあります。 また、C ++およびNode.jsでコンソールユーティリティを作成します。 私はクロージャーが好きです。私は何年も前にPerlとPHPで書いたときにウェブに出会い、私はJavaでのプログラミングに専念した最初の数年間の専門的な開発をしました。
私が最初にJavascriptに出会ったとき、それは主に現在の時刻をページに追加するために使用されました。 みんなが自分のページを盛り上げたいと思ったのは90年代で、ユーザーがそれがどれだけクールかを評価できるようになりました 。現在の曜日が動的に表示されます 。 そしてしばらくすると、Javascriptがさらに多くのことができるようになり、完全に動的なHTML-DHTMLが得られました！
最近、私はさまざまなフレームワークを使用してかなり大きなSPAを開発しており、急いでいたときにjQueryヌードルが多くの汚いコードからあちこちに残っていました。
10日前、私は自分用に小さなSPAを作ることにしました。小さなユーティリティ、潜在的なペットプロジェクトです。 2つか3つの日の仕事。 過去6か月間、私はC＃でデスクトッププロジェクトに取り組んでいます。 それは、ワークフローを管理するためのかなり退屈なプログラムでした。Webサービスのバックエンドとフロントのwinformsです。
小さなWebアプリケーションを作成するというアイデアが浮かんだとたんに、私は聞いたことのあるいくつかのファッショナブルなチップを試して、ツールキットを更新して、楽しんでみることにしました。 複雑なことは何もないようです。
結局のところ、この単純なアプリケーションのコードを書くことができなかったのは、「研究のre迷」に陥ったからです。
私はすでに5回開始し、ドロップしました。 問題は、 選択が必要なツールの選択肢と圧倒的な豊富さでした。
誰が書きたい
MyNotReallyClass.prototype.getCarrots = function () {}
ES6がほぼここにあり、サポートされるクラスがほとんどある場合
誰が10を入れたいですか
<script src=”library-12.js”></script>
ページの上部に、バンドルにコードをパックするためのユーティリティがたくさんありますか？
そして誰が書きたいですか
$('.carrots').innerHTML(myJson.some.property[3])
コードの構造化に役立つ非常に多くのフレームワークがある場合 Node.jsで記述されたユーティリティを使用してクライアントコードがコンパイルされるという事実を無視したいのは誰ですか？
そこで、これらすべての新しいことに完全に没頭すること、忘れていたものを思い出すことなどを決めました。 そして、あなたは何を知っている-私はいくつかのHTMLフォームよりもさらに取得しませんでした。
「自分のための」単純なプロジェクトであり、基本的には楽しかったので、「ゼロトレランスモード」に調整しました（翻訳者のメモ：手はそのような素晴らしいフレーズを翻訳するために上昇しませんでした）。 何かがいらいらし始めるとすぐに、私はそれを投げて、他に何も邪魔されないものを探しました。
ここに、私が現代のJavascriptからこれらすべての新しいピースを試したときに直面しなければならなかったことのいくつかの例を示します。
手始めに、Typescriptを試してみました。 私は最近主にC＃で働いていたので、言語が静的に型付けされているときのクールさを思い出しました。コードに自信を与え、リファクタリングが容易になり、優れたオートコンプリートを備えたIDEがコードの半分を記述します。あなたはクラスで賢いです。
主な機能のために、2つのライブラリが必要でした。 それらは
.d.ts
書かれていなかったので、半日かけて
.d.ts
ファイルを
.d.ts
、それらのライブラリのラッパーを作成しました。 最も生産的なレッスンではありませんが、大丈夫です。
手始めに、 Mochaでいくつかのテストを書きたいと思いました。 地獄へようこそ。 プロジェクトに複数の
.tsconfig.json
ファイルを
.tsconfig.json
方法を探していましたが、WebStormはこれをサポートしていなかったため、コンパイラはテストとコードを混合し続けました。 私はマナコードのサンプルStackOverflowを読み始めました。 このGulp設定を使用します。 テストする前にコードをコンパイルする必要がありますが、待って、Typescriptテストを書いていますか？ 次に、このGulpプラグインを使用します。ただし、 watchifyではうまく機能しません 。 翌日、コンパイルされ、接着されたファイル、
src
、
dest
、および
test
フォルダーの混乱があり、理解できないタスクを引き起こしました。 バックグラウンドで何が起きているのか理解できなくなりました。 どこで、どこに依存関係がコンパイルされているのか、そのファイルを使用するために
require
または
import
または
reference
を書く
require
ますか？ はい、それはすべて行きました 。
1つの非常に小さなプロジェクトで、 Reactに短いながらも楽しい知り合いがいたので、今すぐ試してみることにしました。 クイックスタートのためにGulpの設定をいくつかスクレイプしました。 しかし、ここで問題はReact自体にあることが判明しました。 私はいつもきれいなモデルを作成しようとしていますが、Reactはモデルを
state
と
properties
と混合するのが好きなので、自分のアプローチを再考する必要がありました。 私のアプリケーションは非常にシンプルですが、多くのフォームを使用しており、今では公式ドキュメントで読んだものを推測します：
フレームワークを初めて調べる場合は、ほとんどのアプリケーションでReactLink
必要ないため、慎重に使用する必要があることに注意してください。
Reactは、親から子への単方向データストリームを実装します。 これは、フォンノイマンモデルから得られます。 「一方向のデータバインディング」として想像できます。
素晴らしいですが、フォーム、特に複雑なフォームは、実際には
two-way binding
が実際に必要です。 また、プラグインとミックスインを使用しないReactは、多くのデータを入力するために使用しようとするとうまく機能しません。 すべてが正常に機能するように、すべての入力に対してデコレーターを作成する必要があります。 すぐにそれはいらいらし始めます。 ミックスインといえば、ES6のクラスを使用していますが、Reactはそれらをサポートしていません。 はい、それはすべて行きました 。
だから、
two-way binding
が必要ですよね？ Knockoutはこれに最適であり、以前に対処しました。 繰り返しになりますが、ES6クラスを使用しようとしていますが、コンテキストバインディングは混乱を招くコードです。 また、クラスがないと、コードはさらに速く混乱します。 JavascriptはHTMLを妨害し、Reactの後はすべて恐ろしく見えます。 ここでは、Javascriptのレイアウトがありますが、少なくとも理にかなっていますが、コードを構造化し、ロジック要素を相互に分離しておくのに役立ちます。
（少し苦痛です。何を選んでも、コンパイル、リンク、テストのためにいくつかの
watch
タスクをバックグラウンドで維持する必要がある
watch
です。エディターで何かを書いて、
Cmd+S
、
Cmd+Tab
ブラウザーに
Cmd+R
でページを更新しましたが、変更が表示されません。何が起こったと思いますか？コンパイラーが動作するよりも速くこれらの操作をすべて実行したか、変更に気付かず、エラーをスローしました。）
そのため、コードの最初の行を書く前に、すべてを追加する方法（パッケージマネージャー、アセンブリ、テストなど）を選択する必要があり、各オプションは、多かれ少なかれ標準化された代替ソリューションの領域への扉を開きます。多かれ少なかれ補完するか、互いに交換します。
どのようなjavascriptが必要ですか？ トランスポーターが必要ですか？ そして、どの言語から？ うなり声？ むかつく？ バウアー？ ヨマン？ Browserify？ Webpack？ バベル？ Common.js？ あれ？ 角度？ エンバー？ リンティング？ 今何を言っているの？ 私は何かを台無しにしていますか？ はい、それはすべて行きましたか？ はい、それはすべて行きました。
まだここにいるなら、今日のWebアプリケーションの作成は、非常に複雑なインタラクティブクエスト（オリジナルのインタラクティブフィクション）（a la Zork）をプレイするようなものです。 最近の過去に戻ってプログラムを書きましょう。
. . C > get C language ,
そして今、2016年に戻って：
web- > make web app ? "Unity" "GameMaker", web > make web app web-? "NW.js" , , "Electron" > make web app . "Javascript", "Coffescript", "Typescript", "Clojurescript", "Dart", "asm.js". 127 ? > get javascript : "ES5" "ES6" > get ES6 . "Babel", "Traceur" , , . ? " aka " > get Babel . "Grunt" , "Gulp" . "Babelify" , "Webpack" . "Browserify" "Require.js". " " > "Yeoman" , "npm", "project.json" , "Gruntfile", ".jshintrc", ".babelrc" "tsconfig.json". "Broccoli" "Jasmine" . > " ", "npm install node-jsx" " " > .
更新する
この投稿は、 Hacker Newsへの関心を呼び起こしました。 いくつかのコメントは私には少し皮肉に見える：
私はいつもきれいなモデルを作ろうとしていますが、Reactはモデルをstate
とproperties
と混合するのが好きなので、アプローチを再考する必要がありました...
Redux
Gulp設定...
Webpack
一般的に、利用可能なツールの数に起因する私の「研究のre迷」についてのコミュニティとの会話は、検索の最初に見逃したいくつかのテクノロジーに時間を費やすためのヒントになりました。 良い仕事、Javascript！