Webフロントエンド

Init.js：完全なJavaScriptスタックの理由と方法のガイド

物語

それで、あなたとあなたのパートナーはビジネスのためにこの素晴らしいアイデアを持っていましたね？

システムに精神的に機能を追加しました。

あなたはしばしば潜在的な顧客に彼らがどう思うか尋ねます、そして彼らは皆それを愛しています。

ラズベリーパイウェブサーバーのセットアップ

さて、人々はこれを望んでいます。儲かるお金さえあります。そして、彼らがそれを持てない唯一の理由は、あなたがまだそれを実装していないからです。

それで、あなたはついにある日座って、「これをやろう！」と言います。だからあなたはあなたのアプリケーションのビジネスロジックを実装する方法を理解しようとしています、それは製品を前進させるキラー機能です：あなたはそれを行う方法のアイデアを持っていてあなたはあなたを知っています できる 行う。

「やった！それはうまくいきます！」とあなたは言います。概念実証は成功です！不足しているのは、Webアプリケーションにパッケージ化することだけです。

「わかりました、ウェブサイトを作成しましょう」とあなたは言います。

そして、あなたは真実に気づきます。プログラミング言語を選択する必要があります。（最新の）プラットフォームを選択する必要があります。いくつかの（最新の）フレームワークを選択する必要があります。ストレージ、データベース、およびホスティングプロバイダーを購入（および構成）する必要があります。管理インターフェースが必要です。許可システムが必要です。コンテンツマネージャーが必要です。

あなたはそれを軽くしたい、あなたは機敏になりたい。短期的および長期的に成功するのに役立つテクノロジーを使用したいと考えています。そして、それらは必ずしも簡単に選択できるとは限りません。

数十から数十のアーキテクチャ上の決定を行う必要があります。そして、正しい決定を下したいと考えています。迅速な開発、一定の反復、最大の効率、速度、堅牢性などを可能にするテクノロジーを使用したいと考えています。あなたはそれを軽くしたい、あなたは機敏になりたい。短期的および長期的に成功するのに役立つテクノロジーを使用したいと考えています。そして、それらは必ずしも簡単に選択できるとは限りません。

「私は圧倒されます」とあなたは言います、本当に圧倒されたと感じます。あなたのエネルギーはもはや同じではありません。ピースをまとめようとしますが、それは大変な作業です。

概念実証はゆっくりと乾き、死んでいきます。

提案

数え切れないほどのアイデアを自分で捨てた後、私は解決策を構築することにしました。私はそれをプロジェクトと呼んでいます初期化 ’（ou、init.js）。

アイデアの中心的な部分は、それらすべてを開始する単一のプロジェクトを用意し、開発者または技術的創設者がこれらすべての重要な決定を一度に行えるようにし、 テンプレート これらの決定に基づく適切な初期基準。私は、中傷者が言うことを知っています：「解決策はすべての種類の問題に適用できるわけではありません」（嫌いな人は嫌いです）。そして、彼らは正しいことができます。しかし、私たちは適切なソリューションを作成するために最善を尽くすことができ、Initは近づいていると思います。

この目標をよりよく達成するには、いくつかのアイデアを念頭に置く必要があります。 Initを開発している間、私は次のことを考慮しました。

コンポーネント

コンポーネント化は、さまざまなプロジェクトでソフトウェアコンポーネントを再利用できるため、あらゆるシステムの重要な機能です。これがInitの主な目的です。しかし、コンポーネント化には副産物である「互換性」も伴います。これは、「ほぼ」同じソリューションでいくつかの異なる問題に取り組む上での最善の味方です。
開発のしやすさ

どんな問題でも、誰かが書かれたより良い解決策を持っていますか Brainf * ck 。しかし、このソリューションを（Brainfuckで）実装することは、読むことはもちろん、書くことも事実上不可能です。それはあなたに時間と途方もない努力を要します。一般に、開発を容易にする言語とプラットフォームを使用する必要がありますが、自分（または後で作業する可能性のある人）にとってはそれほど難しくありません。
コミュニティ

どちらのプラットフォームを選択する場合でも、大規模なコミュニティがあり、最も一般的で異常な問題を解決できるコミュニティがあることを確認してください。注意：jQueryはライブラリではない可能性がありますもっと早く、クリーナー、またはよりエレガントです-しかし、それは単にそのために勝者ですコミュニティ。

これらの目標を念頭に置いて、Initを作成するときに私がどのように決定したかを示します。

Initは、その核となる部分で「パラダイム」を利用しています。フルスタックJavaScript ’パラダイム（一部の人々はそれ、またはそのサブセットを参照します。 MEANスタック）。このようなスタックを使用する場合、Initは単一の言語を使用しながら、Webアプリケーションを開発するための非常に柔軟で機能豊富な環境を作成できます。つまり、JavaScriptをクライアントとサーバーの開発だけでなく、ビルド、テスト、テンプレートの作成などにも使用できます。

しかし、少し速度を落とし、自問してみましょう。JavaScriptを使用するのは本当に良い考えですか？

JavaScriptを選んだ理由

私は1998年からWeb開発者です。そこに戻ってPerlを使用しましたサーバー側でのほとんどの開発では、それでもクライアント側でJavaScriptを使用していました。それ以来、ウェブサーバーのテクノロジーは大きく変化しました：いくつか例を挙げると、言語やPHP、ASP、JSP、.NET、Ruby、Pythonなどのテクノロジーが次々と登場しています。開発者は、クライアント環境とサーバー環境に2つの異なる言語を使用することが事態を複雑にしていることに気付き始めました。単一の言語で統合する最初の試みは、サーバー上にクライアントコンポーネントを作成し、JavaScript用にコンパイルすることを目的としていました。これは期待どおりに機能せず、ほとんどのプロジェクトが失敗しました（例：ASPMVCの置き換え ASP.NETWebフォーム、です GWT 間違いなく近い将来に置き換えられますポリマー）。しかし、それは素晴らしいアイデアでした。クライアントとサーバーで単一の言語を使用できるため、コンポーネントとリソースを再利用できます（これがキーワードです。 リソース ）。

答えは簡単でした。サーバーではなくJavaScriptを配置してください。

JavaScriptは実際には[JavaScriptサーバー側で生まれました]（http://www.infoworld.com/d/application-development/javascript-conquers-the-server-969）Netscape Enterprise Serverでしたが、言語の準備ができていませんでした当時。何年にもわたる試行錯誤の末、 Node.js ついに登場し、JavaScriptをサーバーに配置するだけでなく、プログラミングのアイデアを促進しましたノンブロッキング、「フレッド」（I / O）読み取りの書き方を永遠に変えるここに詳細を知るために）。

一言で言えば、ノンブロッキングプログラミングは、時間のかかるタスクを脇に置き、一般にこれらのタスクが完了したときに何をすべきかを指定し、これが発生しない間にプロセッサが他の要求を処理できるようにすることを目的としています。

しかし、これらのアイデアは新しいものではありませんでした。それでは、なぜNode.jsでそれほど人気が出たのでしょうか。シンプルなノンブロッキングプログラミングは、いくつかの方法で実現できます。おそらく最も簡単なのは、コールバックとイベントループ。ほとんどの言語では、これは簡単な作業ではありません。「コールバック」は他の言語では一般的な機能ですが、イベントループはそうではなく、外部ライブラリ（例：Python、ツイスター）。しかしJavaScriptでは、コールバックそれらはイベントループのように言語に組み込まれており、JavaScriptに触れたほとんどすべてのプログラマーはそれらに精通しています（または少なくともそれらを使用していてもイベントループが何であるかを本当に理解していない）。突然、Earthのすべてのスタートアップは、クライアント側とサーバー側の両方で開発者（つまり、リソース）を再利用できるようになりました。求人問題：「Pythonで達人を探しています」。

突然、地球上のすべてのスタートアップがクライアント側とサーバー側の両方で開発者（つまりリソース）を再利用し、求人の問題を解決することができました。「Pythonの第一人者を探しています」。

だから今私たちは持っています信じられないほど高速なプラットフォーム（ノンブロッキングプログラミングのおかげで）信じられないほど使いやすいプログラミング言語で（JavaScriptのおかげで）。しかし、これで十分ですか？持続しますか？ JavaScriptは将来重要な位置を占めると確信しています。理由をお話ししましょう。

関数型プログラミング

JavaScriptは最初のプログラミング言語でした関数型プログラミングパラダイムをもたらすために大衆向け（もちろん、Lispが最初に来ましたが、ほとんどのプログラマーはLispを使用して実稼働環境用のアプリケーションを構築したことはありません）。 LispとSelf、 Javascriptの主な影響、革新的なアイデアがいっぱいです。これらのアイデアは、私たちの心を解放して、新しい技術、パターン、パラダイムを探求することができます。そして、それらはすべてJavaScriptを使用します。を見てみましょうモナド、教会番号、または（より実際の例では）関数コレクションの行う Underscore.js 、行とコード行を節約できます。
動的オブジェクトとプロトタイプの継承

クラスレスオブジェクト指向プログラミング（および無限のクラス階層なし）は、迅速な開発（オブジェクトの作成、メソッドの追加、およびそれらの使用）を可能にしますが、さらに重要なことに、プログラマーがクラスではなくオブジェクトインスタンスを変更できるようにすることで、メンテナンスタスク中のリファクタリング時間を短縮します。このスピードと柔軟性は、迅速な開発への道を開きます。
JavaScriptはインターネットです

JavaScriptはインターネット用に設計、最初からここにいて、そして消えない。それを破壊するすべての試みは失敗しました：例えば、の落下を参照してください Javaアプレット、VBScriptを MicrosoftのTypeScript （JavaScript用にコンパイルされます）、そしてモバイルとHTML5市場の手によるFlashの死。何百万ものWebページを壊さずにJavaScriptを置き換えることは不可能なので、私たちの目標はJavaScriptを改善することです。そして、その仕事に勝る人は誰もいない技術委員会39 ECMAに。

さて、JavaScriptの代替手段は毎日生まれています。 CoffeeScript 、 TypeScript そしてとして JavaScript用にコンパイルする何百万もの言語。これらの代替案は、開発の段階で役立つ可能性があります（ソースマップ経由）が、2つの理由から、長期的にはJavaScriptを置き換えることができません。コミュニティが大きくなることはなく、最高の機能がECMAスクリプト（つまりJavaScript）に採用されることです。 JavaScriptはアセンブリ言語ではありません。理解できるソースコードを備えた高級プログラミング言語なので、理解する必要があります。

今ありがとうエスプリマプロジェクト、独自のツールを作成して、プログラムのソースコードを操作、変更、スタイルの変更、コンポーネント、インストルメント、および想像できるあらゆる種類のものを追加し、プログラムの抽象構文木（英語）を操作することができます。 DOMツリーで作業していました。

エンドツーエンドのJavaScript：Node.jsとMongoDB

したがって、これらがJavaScriptを使用する理由です。ここで、Node.jsとMongoDBを使用する理由としてJavaScriptを使用します。

Node.js

Node.jsは、高速でスケーラブルなネットワークアプリケーションを構築するためのプラットフォームです。これは、Node.jsのWebサイトが言っていることとほぼ同じです。ただし、Node.jsはこれよりも重要です。これは、I / OにアクセスできるJavaScriptアプリケーションに適したランタイム環境です。 Node.jsを使用してメインサーバーアプリケーションを作成する予定がない場合でも、Node.js上に構築されたツールを使用して開発プロセスを改善できます。例えば： Mocha.js ユニットテスト用、 Grunt.js 自動化されたビルドタスク、またはブラケット編集用全文コードの。

したがって、サーバーまたはクライアント用のJavaScriptアプリケーションを作成する場合は、Node.jsを毎日使用する必要があるため、Node.jsに精通している必要があります。興味深いものがいくつかあります代替案、しかしそれらのどれもNode.js.コミュニティの10％にさえ到達しません。
ノードjsを使用したRESTAPI
MongoDB

MongoDB それはデータベースです NoSQL JavaScriptをクエリ言語として使用するドキュメントに基づいているため、エンドツーエンドのJavaScriptでプラットフォームを完成させることができます。

MongoDBはスキーマのないデータベースこれにより、オブジェクトを柔軟な方法で永続化できるため、変化する要件により迅速に適応できます。その上、それは非常にスケーラブルです map-reduceに基づく、ビッグデータアプリケーションに適しています。 MongoDBは非常に柔軟性があるため、スキーマフリーデータベースとして、リレーショナルストレージとして使用できます（ただし、サポートされていません）。トランザクション）、または応答をキャッシュするためのKey-Valueストアとしても使用できます。

Express.jsによるサーバーのコンポーネント化

サーバー側のコンポーネント化は決して簡単ではありません。しかし、 Express.js （およびConnect.js）は「ミドルウェア」のアイデアをもたらしました。私の意見では、ミドルウェアはサーバー上のコンポーネントを定義するための最良の方法です。既知の標準と比較したい場合は、パイプやフィルターに非常に近いです。

基本的な考え方は、コンポーネントがパイプライン（パイプ）の一部であるということです。パイプラインは要求（インバウンド）を処理し、応答（アウトバウンド）を生成しますが、そのコンポーネントは応答全体を担当しません。代わりに、彼は必要なものを変更して、それをパイプラインの次の部分に委任します。パイプラインの最後の部分が処理を終了すると、応答が顧客に返送されます。

これらの「パイプラインの一部」（パイプの一部）を「ミドルウェア」と呼びます。明らかに、2種類のミドルウェアを作成できます。

仲介業者 ：要求と応答を処理するが、応答自体に対して完全な責任を負わない人は、次のミドルウェアに委任します。
決勝：最終的な答えに全責任を負う者。要求と応答を処理および変更しますが、次のミドルウェアに委任する必要はありません。実際には、アーキテクチャの柔軟性を考慮して（つまり、後でミドルウェアを追加する）、そのミドルウェアが存在しない場合でも（この場合、答えはクライアントに直接送られます）、とにかく次のミドルウェアに委任することをお勧めします。

具体的な例として、サーバー上の「ユーザーの管理」コンポーネントについて考えてみます。ミドルウェアに関しては、エンドポイントと中間体の両方があります。エンディングには、ユーザーの作成やユーザーの一覧表示などの機能があります。ただし、このようなアクションを実行する前に、認証用の仲介者が必要です（認証されていないリクエストがユーザーに入力されて作成されることを望まないため）。これらの認証仲介者が作成されたら、以前に認証されていない機能を認証された機能にしたい場所にプラグインするだけです。

シングルページアプリケーション

Initプロジェクトは作成に焦点を当てていますシングルページアプリケーション（SPA：シングルページアプリケーション）。ほとんどのWeb開発者は、SPAを使おうと誘惑されてきました。私はいくつか（ほとんどがプロプライエタリ）を構築しましたが、それらは単にWebアプリケーションの未来であると確信を持って言えます。 SPAをモバイル接続を介して従来のWebアプリケーションと比較したことがありますか？応答時間の違いは数十秒のオーダーです。

SPAをモバイル接続を介して従来のWebアプリケーションと比較したことがありますか？応答時間の違いは数十秒のオーダーです。

SPAはWebの未来です。では、なぜレガシーな方法で製品を構築するのでしょうか。私が聞く一般的な議論は、人々がSEO（検索エンジン最適化、検索エンジン最適化）に関心を持っているということです。しかし、あなたが物事を正しく扱うならば、これは問題ではないはずです：グーグル自体はとても良いチュートリアルそれを行う方法について、いくつかの良いコメントがありますここにまた。

MV * Backbone.js、Marionette.js、TwitterBootstrapを使用したクライアント側

多くのことが言われていますフレームワークMVC *パラSPA 。難しい選択ですが、トップ3は Backbone.js 、 Ember.js 、です Angular.js 。

3つすべてが高く評価されています。しかし、どれがあなたに最適ですか？

残念ながら、私はAngular.jsの使用経験が非常に限られていることを認める必要があるため、この説明から除外します。現在、Ember.jsとBackbone.jsは、同じ問題を攻撃する2つの異なる方法を表しています。

Backbone.js ミニマリストでシンプルで、シンプルなSPAを作成するのに十分です。一方、Ember.jsは、SPAを作成するための完全でプロフェッショナルなフレームワークです。より多くのアトラクションがありますが、学習曲線も長くなります。

アプリケーションのサイズによっては、使用されている機能と使用可能な機能の比率を分析するのと同じくらい簡単に決定できるため、良いアイデアが得られます。

Initの場合、ほとんどのシナリオをカバーしたかったので、SPAを簡単に作成するためにBackbone.jsを選択し、コンポーネント化のためにBackbone.Marionette.Viewを選択しました。このように、各コンポーネントは単純なアプリケーションであり、最終的なアプリケーションは必要に応じて複雑にすることができます。

スタイルも課題ですが、フレームワークを利用することもできます。 CSSの場合、これ以上のことはありません。 Twitterブートストラップ、すぐに使用できるスタイルの完全なセットを提供し、カスタマイズが簡単。

ブートストラップは言語を使用して作成されましたもっと少なくそしてそれはフリーソフトウェアなので、必要に応じて変更することができます。それはである多数のユーザーインターフェースコントロールが付属しています BootstrapWebサイトに詳しく記載されています。 PEはまだ、ありますカスタマイズモデルこれにより、独自のブートストラップを作成できます。彼は間違いなくその仕事にふさわしい人です。

ベストプラクティス：Grunt.js、Mocha.js、Chai.js、RequireJS、CoverJS

最後に、いくつかのベストプラクティスを定義し、Initがそれらの実装と保守にどのように役立つかを確認する必要があります。私たちのソリューションは、Node.jsに基づいたいくつかのツールを中心としています。

Mocha.js です Chai.js ：

これらのツールを使用すると、適用することで開発プロセスを改善できます。 TDD または BDD 、ユニットテストを整理するためのインフラストラクチャとそれらを自動的に実行するためのエグゼキュータを提供します。

有る数千人 JavaScriptのユニットテストのためのフレームワークの。では、なぜMocha.jsを使用するのでしょうか。簡単な答え：それは柔軟で完全です。

長い答え：それは2つの重要な特徴（インターフェース、レポーター）と重要な欠如を持っています：アサーション。説明させてください。
- インターフェイス ：スイートや単体テストなどのTDDの概念に精通している場合もあれば、「説明する」と「すべきである」というBDDの動作仕様のアイデアを好む場合もあります。 Mocha.jsを使用すると、両方のアプローチを使用できます。
- 記者：テストを実行すると結果レポートが生成され、複数のレポーターを使用してこれらの結果をフォーマットできます。たとえば、継続的インテグレーションサーバーに電力を供給する必要がある場合は、それを実行するレポーターを見つけることができます。
- アサーションのライブラリの欠如 ：問題になるどころか、Mocha.jsは、選択したアサーションライブラリを使用できるように設計されており、さらに柔軟性があります。有る豊富なオプション、しかし、これはChai.jsがフィールドに入るところです。
Chai.jsは、3つの主要なアサーションスタイルから選択できる柔軟なアサーションライブラリです。
- 主張する ：従来のTDDイオンアサーションのクラシックスタイル。例：
  assert.equal(variavel, 'valor');
- 期待する ：チェーン可能なアサーションスタイル。BDDで最も一般的に使用されます。例：
  expect(variavel).to.equal ('valor');
- すべき ：BDDでも使用されますが、動作仕様「it（“ should do some ..”）」で繰り返し聞こえるはずなので、Expectの方が好きです。例：
  variavel.should.equal ('valor');
Chai.jsはMocha.jsと完全に一致します。これらの3つのライブラリだけを使用して、TDD、BDD、または考えられる任意のスタイルでテストを記述できます。
Grunt.js ：

Grunt.jsを使用すると、単純なコピーアンドペーストやファイルの連結から、テンプレートの事前コンパイル、スタイル言語のコンパイル（SASSとLESS）、単体テスト（mocha.jsを使用）、リンティング、コードまで、ビルドタスクを自動化できます。ミニファイ（たとえば、 UglifyJS またはクロージャーコンパイラ）。独自の自動化されたタスクをGruntに追加するか、 Gruntレジストリ、、何百ものプラグインが利用可能です（覚えておいてください：背後にある大きなコミュニティでツールを使用することは報われます）。グラントもできますファイルを監視する変更されたときにアクションをトリガーします。
開発者がアプリを作成するために使用するツールのグループを最もよく表す用語は次のうちどれですか？
RequireJS ：

RequireJSは、モジュールをロードする別の方法のように聞こえるかもしれません。 AMD 、しかし私はそれがそれ以上のものであることをあなたに保証することができます。その理由を理解するには、最初にモジュールの名前空間（たとえば、demo.views.hello）のアイデアに言及する必要があります。これにより、各モジュールを独自の名前空間でラップすることにより、グローバル名前空間の汚染を回避できます。問題は、これらのモジュールが再利用できないことです。「インスタンス」の名前空間を変更すると、すべての「インスタンス」の名前空間が変更されます。これとは対照的に、RequireJSでは最初から再利用可能なモジュールを定義できます。さらに、それはあなたが採用するのに役立ちます依存性注入ためにモジュールがグローバル変数にアクセスすることは避けてください。）
CoverJS ：

コードカバレッジテストを評価するためのメトリックです。名前が示すように、これは、現在のテストスイートでカバーされているコードの量を示しています。 CoverJSは、ステートメントをインストルメント化することにより、テストのコードカバレッジを測定します（次のようなコード行の代わりに） JSCoverage ）コード内で、インストルメント化されたバージョンのコードを生成します。サーバーにフィードするレポートを生成することもできます継続的インテグレーション。

ブランチを使用して機能を選択する

Initを開始したとき、ユーザーがプロジェクトで必要になる可能性のあるさまざまな機能をアクティブ化および非アクティブ化する方法が必要でした。この機能を実装するためにgitのブランチシステムを使用するという根本的な一歩を踏み出すことにしました。

基本的に、各ブランチは、ユーザーが含めることができる1つまたは複数の機能を表します。プロジェクトを最初から開始する場合は、必要な最小限のブランチから開始し、目的のブランチとマージして他のテクノロジーを追加します。たとえば、Backbone.jsとMarionette.jsを使用してプロジェクトを開始するとします。さて、Backbone.jsブランチから始めて、それをMarionetteブランチとマージし、追加する機能の各部分を続行することができます。