Webフロントエンド

Init.js：フルスタックJavaScriptを使用して開発する理由と方法

歴史

だから、あなたとあなたのパートナーは素晴らしいビジネスアイデアを持っています。正しい？

あなたは常にあなたの心にますます多くの新しい可能性を追加しています。

あなたは定期的に潜在的なクライアントに彼らの意見を求めます、そして彼らは皆あなたの考えに夢中です。

さて、人々はそれを必要としています。あなたもこれからお金を稼ぐことができます。そして、人々がまだそれを使用しない唯一の理由は、あなたが自分の考えを実現していないということです。まだ実装されていません。

そして最後に、ある日、あなたは「やろう！」と決めました。そして今、あなたはすでにアプリケーションのビジネスロジックを実装する方法を理解しようとしています。これは製品を前進させるキラー機能です。あなたはそれをどのように行うかについての考えを持っており、あなたはそれができることを知っています。

そして、あなたはこう言います。ワーキング！'プロトタイプが成功しました。残っているのは、それをWebアプリケーションにパッケージ化することだけです。

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

そしてその時だけ、あなたはこれのためにあなたがプログラミング言語を選ぶ必要があることに気づきます。（最新の）プラットフォームを選択する必要があります。いくつかの（最新の）フレームワークを選択する必要があります。ストレージ、データベース、ホスティングをセットアップ（および購入）する必要があります。管理用のインターフェースを提供する必要があります。アクセス制御とコンテンツ管理システムを提供する必要があります。あなたはスリムで機敏になりたいです。短期的にも長期的にも成功するのに役立つテクノロジーを使用したいと考えています。そして、それらを選択することは必ずしも簡単ではありません。

ここに、行う必要のある数十から数十のアーキテクチャ上の決定があります。そして、間違いを犯したくはありません。迅速な開発を可能にし、一定の反復をサポートし、最大の効率、速度、回復力などを実現するテクノロジーが必要です。あなたはスリムで機敏になりたいです。短期的にも長期的にも成功するのに役立つテクノロジーを使用したいと考えています。そして、それらを選択することは必ずしも簡単ではありません。

「私は圧倒されます」とあなたは言います、そしてあなたは圧倒されていると感じます。エネルギーは当初のエネルギーではありません。あなたは自分の考えを集めようとしていますが、仕事が多すぎます。

プロトタイプはゆっくりと色あせて死んでいきます。

文

同様の理由でたくさんのアイデアを捨てた後、私はこの問題の解決策を設計することにしました。このプロジェクトに名前を付けました ' 初期化 ’（またはinit.js）。

主なアイデアは、1つのプロジェクトを使用して任意のプロジェクトを開始し、開発者または技術マネージャーがすべての主要な決定を一度に行い、それらに基づいて適切な開始テンプレートを取得できるようにすることです。多くの人が「すべての問題に1つの解決策を適用することはできない」と言うことを知っています（嫌いな人は嫌いです）。そして、彼らは正しいかもしれません。しかし、全体に合ったソリューションを作成することはできます。私の意見では、Initはこのタスクに対処しました。

この目標を達成するには、いくつかの重要な点を考慮する必要があります。 Initを開発するとき、私は次のことに焦点を合わせました。

コンポーネント

コンポーネントビューは、ソフトウェアコンポーネントを複数のプロジェクトで再利用できるため、システムの重要な特性の1つであり、これがInitの主な目標です。ただし、コンポーネントビューには、代替可能性の副作用があります。これは、「ほぼ」同じソリューションであるさまざまな問題に対処する際の主な味方になります。
開発のしやすさ

どこかにある問題には解決策があり、 Brainf * ck ..。読むことはもちろん、書くこともほぼ不可能です。それはあなたに多くの時間と労力を要します。一般的に、開発を容易にする言語とプラットフォームを使用する必要がありますが、あなた（および後でそれを行う人）にとっては難しくありません。
コミュニティ
これは私のキャリアをほとんど台無しにしました

どちらのプラットフォームを選択する場合でも、その周りに大きなコミュニティがあることを確認してください。最も一般的で非標準的な問題を解決するのに役立つもの。覚えておいてください：jQueryは最高ではないかもしれません速い、掃除、そしてエレガントなライブラリですが、そのおかげで勝者ですコミュニティ。

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

Initの中心にはパラダイムがあります「フルスタックJavaScript」 ’-‘完全なJavaScript ’（一部の人々はそれまたはその一部と呼んでいます「MEANスタック」）。このようなセットを使用すると、Initでは1つの言語のみを使用して、Webアプリケーションを開発するための驚くほど柔軟で完全に機能する環境を作成できます。つまり、Initを使用すると、JavaScriptを使用して、クライアントおよびサーバーソリューションを開発するだけでなく、ビルド、テスト、テンプレート化などを行うことができます。

しかし、少し立ち止まって自問してみましょう。JavaScriptを使用するのはとても良い考えですか？

JavaScriptを選んだ理由

私は1998年からWeb開発者として働いています。一方私たちは主にPerlを使用しましたサーバー側の開発用ですが、それでもクライアント側用のJavaScriptがありました。それ以来、Webサーバーテクノロジーは大きく変化しました：PHP、AP、JSP、.NET、Ruby、Pythonなどの言語とテクノロジーのいくつかの波を経験しました。開発者は、サーバー側とクライアント側で2つの異なる言語を使用すると、事態が困難になることに気付き始めました。当初、2つの部分を1つの言語で結合しようとすると、サーバー上にクライアント側のコンポーネントが作成され、JavaScriptにコンパイルされました。結果は期待を下回り、これらのプロジェクトのほとんどは失敗しました（たとえば、ASP MVCは、 ASP.NETWebフォームそして GWT どうやら、近い将来に置き換えられるでしょうポリマー 'オーム）。しかし、本質的には素晴らしいアイデアでした。クライアントとサーバーに1つの言語を使用して、コンポーネントとリソースを再利用できるようにすることです（これがキーワードです。 リソース ）。

答えは簡単でした。JavaScriptをサーバーに移動します。

実際には JavaScriptはサーバーサイドで生まれました Netscape Enterprise Serverにありますが、その時点では言語の準備ができていませんでした。何年にもわたって試みて失敗した後、それは現れました Node.js これはJavaScriptをサーバーにもたらしただけでなく、アイデアを前進させましたノンブロッキングプログラミング「fread」（I / O）の書き方を永遠に変える（これについてもっと読むここに）。

一言で言えば、ノンブロッキングプログラミングは、時間のかかるタスクを横にシフトすることを目的としています。これは通常、タスクが完了したときに何が起こるかを定義することによって行われ、プロセッサがこの時間中に他の要求を処理できるようにします。

しかし、これらのアイデアは新しいものではありませんでした。Node.jsの登場でなぜそれほど人気が出たのでしょうか。単純なノンブロッキングプログラミングは、いくつかの方法で実現されます。おそらく最も簡単なのは、コールバックとイベントループ-イベントループ ..。ほとんどの言語では、これは簡単な作業ではありません：コールバックがかなり一般的な関数である場合、イベントループはそうではなく、ある時点で外部ライブラリ（例：Python、ツイスター）。しかしJavaScriptではコールバックそれらはイベントループと同じように言語の一部であり、JavaScriptを試したことのあるすべてのプログラマーはそれらに精通しています（または少なくともそれらを使用していてもイベントループが何であるかを完全に理解していませんでした）。

突然、Earthのスタートアップは、決定することで、クライアント側とサーバー側の両方で開発者（読み取り：リソース）を再利用できます。人員配置の問題、「Pythonの第一人者が必要です。」

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

関数型プログラミング

JavaScriptは最初のプログラミング言語でしたパラダイムをもたらした大衆向けの関数型プログラミング（もちろん、Lispが最初でしたが、ほとんどのプログラマーはLispで完全に完成した製品を作成したことはありません）。 LispとSelf、主要言語、影響を受けたJavaScript 革新的なアイデアがいっぱいです。これらのアイデアは、新しい技術、デザインパターン、およびパラダイムを探求するために私たちの心を解放することができます。それらはすべてJavaScriptに切り替えました。を見てみましょうモナド、教会の数、または（より実用的な例）収集機能 Underscore.js これにより、不要なコードを何行も節約できます。
動的計画法とプロトタイプの継承

クラスなし（および無限のクラス階層なし）のオブジェクト指向プログラミングでは、開発をスピードアップできます（オブジェクトの作成、メソッドの追加、およびそれらの使用）が、さらに重要なことに、後続のサポートでリファクタリング時間を短縮し、プログラマーが完成したオブジェクトを変更できるようにしますクラスを変更する代わりに。このスピードと柔軟性は、急速な発展のための条件を作り出します。
JavaScriptはインターネットです

JavaScriptはインターネット用に設計彼は最初からここにいて、彼はどこにも行かない ..。彼を破壊するすべての試みは失敗しました：例えば、秋を見てください Javaアプレット、VBScript'aの置き換え MicrosoftのTypeScript （JavaScriptにコンパイルされます）、モバイル市場とHTML5の手によるFlashの死。何百万ものWebページを破壊せずにJavaScriptを置き換えることは不可能であるため、言語を改善することが私たちの目標であるはずです。そして、このタスクに適しているのは誰もいない技術委員会39 ECMAから。

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

プロジェクトのおかげで Expressプロジェクトソースコードを操作するための独自のツールを作成できます。コードの変更、スタイルの変更、コンポーネント、ツールの追加など、プログラムの抽象構文ツリーをDOMツリーのように操作することを想像できます。。

最初から最後までのJavaScript：Node.jsとMongoDB

したがって、これらがJavaScriptを選択した理由です。ここで、Node.jsとMongoDBを使用するように説得しようと思います。

Node.js

Node.jsは、高速でスケーラブルなネットワークアプリケーションを構築するためのプラットフォームです。公式サイトで説明されているようなものです。しかし、Node.jsは単なるプラットフォームではありません。これは、I / OアクセスでJavaScriptアプリケーションを実行するための推奨環境です。 Node.jsでメインサーバーアプリケーションを作成する予定がない場合でも、Node.js上に構築されたツールを使用して開発プロセスを改善できます。例えば、 Mocha.js ユニットテストの場合、 Grunt.js 自動組み立て用、さらにはブラケットフルテキストコード編集用。

したがって、JavaScriptでサーバーまたはクライアントアプリケーションを作成することを計画している場合は、Node.jsに慣れておく必要があります。これは、毎日必要になるためです。興味深いものがいくつかあります代替案、しかし、それらのどれもNode.jsコミュニティの10％さえ持っていません。
MongoDB

MongoDB それはドキュメント指向です NoSQL クエリ言語としてJavaScriptを使用するデータベース。これにより、JavaScriptプラットフォームでループを閉じることができます。しかし、それがMongoDBを使用する主な理由ではありません。

MongoDB テーブルスキーマの説明は必要ありませんそのため、オブジェクトを簡単に保存できるため、要件の変化にすばやく適応できます。さらに、MongoDBは優れていますはかりそして map-reduceを使用しますビッグデータアプリケーションに適しています。 MongoDBは非常に柔軟性があるため、スキーマやリレーショナルストレージなしでドキュメントデータベースとして使用できます（ただし、トランザクション）、またはキャッシュ用のKey-Valueストアですらあります。

Express.jsを使用したサーバー側コンポーネントビュー

サーバー側のコンポーネントビューは難しい作業です。しかし、 Express.js （そして Connect.js ）「ミドルウェア」のアイデアが生まれました。私の意見では、ミドルウェアはサーバーコンポーネントの最良の定義です。よく知られているデザインパターンと比較したい場合、これはパイプラインやフィルターのようなものです。

基本的な考え方は、コンポーネントがパイプラインの一部であるということです。パイプラインは要求（入力）を処理し、応答（出力）を生成しますが、コンポーネントは応答全体に対して責任を負いません。むしろ、必要なものだけを変更してから、パイプラインの次の要素にタスクを渡します。パイプラインの最後の要素が処理を終了すると、応答がクライアントに返送されます。

これらを「パイプラインアイテム」を「中間層」と呼びます。明らかに、次の2種類の中間レイヤーを作成できます。

調停人 ：リクエストとレスポンスを処理する要素ですが、リクエスト自体に対して完全な責任を負わないため、リクエストを次のレイヤーに委任します。
有限要素 ：最終的な答えに完全に責任がある要素。それらは要求と応答を処理および変更しますが、それらを次のレイヤーに委任するべきではありません。実際には、次のレイヤーに委任する機能は、このレイヤーが存在しない場合（この場合、応答がクライアントに直接送信される場合）でも、アーキテクチャの柔軟性（たとえば、別のレイヤーを追加するため）のために引き続き優先されます。

例として、ユーザー管理用のサーバーコンポーネントを想像してみてください。中間層に関しては、有限要素と中間層の両方があります。リーフアイテムは、ユーザーを作成してユーザーを一覧表示できる必要があります。ただし、最初に、認証仲介者が必要です（認証されていないリクエストでユーザーを作成できないようにするため）。認証ブローカーを作成したら、以前に開いていた機能を認証済みの機能に変換したい場所に簡単に埋め込むことができます。

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

Initプロジェクトは作成に焦点を当てていますシングルページアプリケーション（SPA） ..。ほとんどのWeb開発者は、シングルページアプリケーションの構築に挑戦したいと思っています。私はいくつか（主に自分用に）作成しましたが、それらはWebアプリケーションの未来であると自信を持って言えます。 SPAをモバイル接続の通常のWebアプリケーションと比較したことがありますか？応答の違いは数十秒です。

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

シングルページアプリはインターネットの未来ですが、なぜレガシー形式で製品を構築するのでしょうか。私が聞く一般的な議論はSEOの難しさです。しかし、すべてを正しく実装すれば問題にはなりません。Google自体が提案しています。とても良い指導それを行う方法、そしてここにいくつかの良いコメントがあります。

クライアント側MV *、Backbone.js、Marionette.js、およびTwitterBootstrapを使用

多くのことが言われていますシングルページアプリケーション用のMVC *フレームワーク ..。難しい選択ですが、3つのお気に入りは Backbone.js 、 Ember.js そして Angular.js 。

それらはすべて非常に良いと考えられています。しかし、どちらがあなたに最適でしょう？

残念ながら、私はAngular.jsの経験がほとんどないことを認めなければならないので、彼をこの議論から除外します。したがって、Ember.jsとBackbone.jsは、同じ問題を解決するための2つの異なるパスです。

Backbone.js は最小限でシンプルであり、シンプルなSPAを作成するために必要な最小限の機能を提供します。一方、Ember.jsは、シングルページアプリケーションを構築するための完全でプロフェッショナルなフレームワークです。より多くの機能がありますが、学習曲線も急です。

c ++いつnewを使用するか

アプリケーションのサイズに応じて、ソリューションは、使用されている機能と使用可能な機能の関係を分析するのと同じくらい簡単です。それはあなたに良いヒントを与えるでしょう。

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

スタイリングも大きな課題ですが、ここでもフレームワークを頼りにすることができます。 CSSにとってこれ以上良いものはありません Twitterブートストラップ、それは使用のためだけでなく、箱から出してすぐに使えるスタイルのフルセットを持っています便利な変更。

ブートストラップは言語を使用して構築されましたもっと少なくブートストラップはオープンソースであるため、必要に応じて変更できます。それはUI要素の束が付属しています Bootstrapサイトの優れたドキュメント ..。また、変更のモデル独自の要素を簡単に作成できます。間違いなく、これは私たちのタスクにとって最良の選択です。

ベストプラクティス：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つの主要なスタイルのいずれかを使用できる柔軟なアサーションライブラリです。
- ステートメント （assert）：古い学校のTDDからの古典的なスタイルのアサーション。例：
  assert.equal(variable, 'value');
- 期待（期待）：BDDで最も一般的に使用されるチェーンアサーションのスタイル。例えば：
  expect(variable).to.equal('value');
- しなければならない （should）：BDDでも使用されますが、「should」は「彼（「何かをしなければならない」）」の動作の仕様のように聞こえるので、「待機」を好みます。例えば：
  c orp vs s corp
  variable.should.equal(“value”);
Chai.jsはMocha.jsとうまく連携します。これらの2つのライブラリを使用して、TDD、BDD、または想像できる他のスタイルで単体テストを作成できます。
Grunt.js ：

GGrunt.jsを使用すると、単純なコピー貼り付けやファイルの接着から、テンプレートのプリコンパイル、スタイルのメタ言語のコンパイル（SASSとLESS）、単体テスト（mocha.jsを使用）、コードの解析と縮小まで、ビルドを自動化できます。（たとえば、 UglifyJS またはクロージャーコンパイラ）。独自の自動化されたタスクをGruntに追加したり、何百もの中から必要なソリューションを見つけることができます既存のプラグイン（ここでも、優れたコミュニティの背後にあるツールを使用することが私たちの手に渡ります）。グラントもできますモニターファイル変更されたときにアクションをトリガーします。
RequireJS ：

RequireJSは、モジュールを一緒にロードする別の方法のように見えるかもしれません AMD 、しかし、RequireJSはもっと多くのことができることを保証できます。理由を理解するには、まず、モジュールスコープ（例：demo.views.hello）のアイデアに言及する必要があります。これは、各モジュールを独自のスコープで非表示にすることで、グローバルスコープをクリーンに保つのに役立ちます。問題は、これらのモジュールを再利用できないことです。インスタンスの1つの名前空間を変更すると、すべてのインスタンスが影響を受けます。次に、RequireJSを使用すると、最初に再利用するモジュールを作成できます。（それはまたあなたが使用するのに役立ちます依存性注入（依存性注入）からモジュールがグローバル変数にアクセスしませんでした。
CoverJS ：

コードカバレッジテストスコアの尺度です。名前が示すように、ライブラリは現在のテストコレクションのコードカバレッジに関する情報を提供します。 CoverJSは、（次のようなコード行ではなく）命令を指示することにより、テストによってコードカバレッジを測定します。 JSCoverage ）そして、コードのインストルメント化されたバージョンを生成します。サーバーのレポートを生成することもできます継続的インテグレーションサーバ。

ブランチを使用して機能を切り替える

Initの作業を開始し、プロジェクトで必要になる可能性のあるさまざまな機能をオンまたはオフにする方法が必要でした。私は根本的なアプローチを取りました：このタスクを達成するためにgitブランチを使用します。

大まかに言えば、各ブランチは、ユーザーが含めることができるコンポーネントまたは機能を表します。プロジェクトを最初から構築する場合は、最小限のブランチから始めて、必要なブランチに他のマージテクノロジーを追加します。たとえば、Backbone.jsとMarionette.jsを使用してプロジェクトを開始する必要があるとします。 Backbone.jsブランチから始めて、それをMarionette.jsブランチにマージし、将来必要なすべての機能を追加することができます。