Dillinger.ioを例にしてDevOpsとJsを理解する

私はJavaバックエンド開発者であり、手がフロントエンドに到達することはめったにありません。 これは大きな省略です。 フロントエンドの理解が不足しているため、世界の全体像を見ることができません。 Node.js、Gulp、Webpackなどのファッショナブルなツールをどのように使用し、どのように使用しているのかわかりません。なぜなら、開発者のバックエンドはその多様性と絶え間ない変化に非常に恐ろしいからです。

そして、私の最初の犠牲者はDillinger.ioでした。 これは、Markdownのオープンテキストエディターであり、構文の強調表示と、書き込まれたテキストのPDF、HTML、Dropbox、Github、およびGoogleドライブへのエクスポートが可能です。また、静的WebサイトジェネレーターやWordpressなど、独自の方法を追加することもできます。

機能のセットは控えめに聞こえます。 しかし、それを理解するために、私は数晩を過ごし、テクノロジー動物園全体について読む必要がありました。 そして、このプロジェクトには学ぶべきことがたくさんあります。

テクノロジー

使用されているテクノロジーの控えめなリストがプロジェクトリポジトリにあります ：

• AngularJs-ロジックをHTMLに取り込むことができるフロントエンドフレームワーク（はい、最初）;
• Ace Editor-テキストエディター。
• マーク済み -パーサーおよびコンパイラーMarkdown。
• Twitter Bootstrap- 「ナフは言った。
• Node.js-バックエンドのジェットjs。
• Express -Node.jsのWebフレームワーク。
• Gulp-フロントエンドのストリームアセンブリシステム。
• Keymaster.js-ホットキーを処理するためのライブラリ。
• jQuery-さて、それなしでどこに？

自分から、さらに2つ追加できます。

• Docker-コンテナー（誰もが話している）;
• Docker Compose-コンテナをバッチで起動するためのツール。
• Ansible-構成管理を自動化するためのツール。
• Heroku-クラウドアプリケーションサーバー。
• N |堅牢-Node.Jsでの監視、プロキシ、オーケストレーション、およびアプリケーション管理。
• NGinx -httpおよびプロキシサーバー（このプロジェクト）。
• Npm -Node.jsのパッケージマネージャー。
• Webpack-フロントエンドのJSファイルのコレクター。
• Karma-テストランナー。
• Ejs-テンプレートのエンジン。

このような技術動物園は、控えめに言っても驚いた。 これらのすべてのうち、AngularJs、Bootstrap、およびJqueryのみを使用しました。 もちろん、ほとんどのテクノロジーについて聞いたことがありますが、すべては噂に限定されていました。

インフラ

テクノロジーのリストを見ていたとき、疑問は私を悩ませていました：「私のブラウザーで動作するテキストエディターにバックエンドがあるのはなぜですか？」 さらに、この場合、Node.jsを管理するためにDockerとエンタープライズプラットフォームが必要だった理由は明らかではありませんでした。 しかし、私はアプリケーションの作成者についてより多くを学び、2番目の質問はそれ自体で決定されました。 Joe McCannは、 N | Solid （Node.jsアプリケーションを管理および監視するためのフレームワーク）をリリースした会社であるNodeSourceの共同設立者です。 これは、アプリケーションインフラストラクチャの作成に精通していることを意味し、この分野では多くのことを学ぶ必要があります。

アプリケーションを起動することは可能ですか？

アプリケーションをテストするだけの場合は、簡単なオプションを選択できます。 Node.jsとGulpのみが必要です。 Node.jsは、 Express Webサーバーを持ち上げて構成します。 また、GulpはJsファイルとSassファイルの変更を監視し、ブラウザーが理解できるビューに変換し、ファイルのいずれかが変更された場合にページをリロードします。 READMEには、サーバーのインストールと起動に関するガイドがあります。

Node.jsの設定はapp.jsファイルにあります。 このファイルでは、外部依存関係と内部モジュールが接続され（メインページ、設定、プラグインのルーティング）、Webサーバーも構成されます。 静的ページを提供し、ejsテンプレートをコンパイルし、Cookieをユーザーにバインドし、http応答を圧縮し、ロギングを構成し、動的リクエストのハンドラーを見つけます。

Gulpのスクリプトは/ gulpフォルダーにあります。 ここではタスクが主な関心事です。単に名前で、Gulpがこのプロジェクトで使用される理由を理解できます：watch、build、webpack、sass、browserSync。 またはロシア語：監視するファイルをGulpに指示します。 それらのいずれかが更新されると、 Webpackを使用して、依存関係とJsコードの断片からスクリプトをコンパイルし、SassをCssに変換します。 次に、ブラウザにbrowserSyncを使用してページを更新するように要求します。

また、これらのファイルでは、コード実行のさまざまなプロファイル（開発モードと実動モード）を見つけることができますが、開発モードではより多くのデバッグ情報（縮小ファイル、ログなどのマッピング）があります。

アプリケーションをサーバーに転送する方法は？

しかし、アプリケーションのローカルでの開発とテストが完了したら、それをサーバーに転送するという疑問が生じます。 もちろん、最も簡単なオプションは、すべてを実行し、必要なユーティリティをすべてリモートコンピューターにインストールし、ローカルマシンと同じように構成されていることを確認し、アプリケーションを実行して、何も変わらないと信じることです。 ただし、環境が正しく構成され、何も変わらないことを確認するには、何らかの方法でアプリケーションを分離する必要があります。 主に2つの方法があります。仮想マシンとコンテナです。 そして、もちろん、JS =で書いた場合、流行に敏感なテクノロジーをすべて収集しないのは罪です。そして、Dockerに対する選択は明らかです。

コンテナーのDocker構成には、超自然的なものは何もありません。 Node.Jsおよび必要なすべてのユーティリティがインストールされているイメージは、ベースコンテナとして使用されます。 スクリプトには、依存関係のインストールとサーバーの起動に関する指示が含まれており、ポート80が指定されており、環境変数が示されています。

しかし、なぜDockerなのでしょうか？

このプロジェクトでDockerを使用する理由は、ファッションだけではありません。 既に述べたように、プロジェクトの作成者は、Node.Js上のアプリケーション用のエンタープライズプラットフォームであるN | Solidの作成に何らかの形で関与しています。 最後の段落では言及しませんでしたが、N |ソリッド画像は基本画像として使用されるだけであり、これがどのような利点をもたらすかはまだ明確ではありません。 しかし、ルートにはさらに2つの疑わしいファイルがあります： nsolid.ymlとdocker -compose.ymlです。

これら2つのファイルは、 Docker Composeユーティリティを構成するために必要です。 このアプリケーションをクラスターモードで起動し、N | Solidプラットフォームを構成する方法について説明します。 すべてのコンテナが1つのネットワークで上昇し、その結果、8つのコンテナが開始されます。

• N |ソリッドサービスレジストリ（インフラストラクチャに参加しているアプリケーションを登録）、
• N |ソリッドプロキシ（Service Registryに基づき、アプリケーション間でリクエストを分散します）、
• N |ソリッドコンソール（アプリケーション管理ツール）、
• 4 Dillingerコンテナ（ステートレス、サービスレジストリに登録されており、要求を受け入れる準備ができている）、
• NGinx（Node.JSではなくWebサーバー）。

リポジトリはNGinxの設定を忘れませんでした 。 プロキシとして使用されます。 Express.jsのようなNGinxは、データを圧縮し、静的ファイルを送信します。 彼は静的ファイルへの要求を個別に処理し、クラスターノード間で他の要求をプロキシします。 リポジトリには2つのプロキシ実装（N | Solid ProxyとNGinx）があり、デフォルトでNGinxが使用されていることがわかります。 静的ファイルは、Express.jsサーバー経由またはNGinxの使用という2つの方法で送信することもできます。 これらの方法は両方とも使用されます。1つ目はローカル開発の場合、2つ目はアプリケーションをクラスターモードで実行し、NGinxをサーバーとして使用する場合です。

Service Registry、Proxy、およびConsoleの機能はこの構成では使用されないため、単に目を閉じて、図のプロキシ要求のみを検討します。 そして、一般に、私はこのプロジェクトでN | Solidの重要性を感じていませんでした。ほとんどの機能はNGinxを使用して再作成できます。おそらく管理の利便性に関するものですが、彼の手には届きませんでした。

さらなる自動化

しかし、自動化はそこで終わりません=）ルートにはさらに2つの興味深いファイルがあります： deploy.ymlとdillinger.serviceです。 また、インフラストラクチャの作成にも関連付けられています。

最初のものはAnsibleのスクリプトです。 Debianでのアプリケーションのインストールを自動化します。 具体的には、追加のカブを接続し、rsyncとdockerをインストールし、Dillingerイメージをインストールし、このイメージでDebianサービスを作成して実行します。

2番目のファイルでは、このサービスについて説明しています。 彼は、Dillingerがdockerに依存していること、複数のユーザーがサービスを利用できること、およびサービスを開始する前に毎回新しいバージョンのイメージをダウンロードする必要があることを説明しています。

確かに、このスクリプトはクラスター全体ではなく1つのディリンジャーイメージのみを生成しますが、思考の流れは明確であり、クラスター全体を実行するようにこのスクリプトを改良できます。

フロントエンド

AngularJsの最初のバージョンの重要なアプローチの1つは、両面バインディングです。 ロジックの一部をHTMLで直接記述することができ、この機能はこのプロジェクトで積極的に使用されています。 コードはJSファイルとejsテンプレートの間でぼやけていることが判明しましたが、プロジェクトは小さく、全体像を念頭に置くことができます。

パターン

Ejsテンプレートエンジンを使用してHTMLを記述しました。 その結果、ファイルは小さくて読みやすいことが判明しました。 すべてのテンプレートは、 / viewフォルダーで表示できます。 ただし、行のすべてのファイルの読み取りを開始すると、通常のHTMLにはないタグ、たとえば、ファイル/ views / dropdowns / settingsのswitchタグが表示されます 。 これはAngularJsを使用して記述されたディレクティブであり、いくつかのロジックが関連付けられています。これは角度を使用する良い方法です。この場合、コードはより読みやすく、理解しやすくなりました。 ただし、ディレクティブを頻繁に使用する場合は、各サイトで独自のドメイン固有言語（DSL）を学習する必要があります。 しかし、コードの出現により、テンプレートは読みにくくなります。たとえば、 / views / sidebar.ejsファイルでは、このコンテキストでのドキュメントの意味と、残りのドキュメントのみを削除できない理由を理解する必要があります。

テンプレートには、開発モードと本番モード用のスクリプトも分離されています。/views/footer.ejsファイルでは、非同期スクリプトの読み込みとGoogleアナリティクスが有効になっています。

Angularjs

すでにAngularJsに触れており、このプロジェクトでどのように、なぜ使用されているのかをさらに詳しく理解するときが来ました。 誰かがAngularJsに慣れていない場合は、これがSpring for Javaなどのフレームワーク全体であることを言及する価値があります。 つまり、補助関数だけでなく、それとともに使用する必要があるプログラミング手法も含まれています：依存性注入（角度コンポーネントを作成するときの依存関係の説明）、モジュール性（変数の可視性を分離できるプログラミングパターン）、双方向バインダー（変数が変更されると、画面上のコンポーネントが変更され、画面上のコンポーネントが変更されると（テキスト入力、チェックボックス選択など）、変数の状態が変更されます。 詳細については、 こちらをご覧ください （ネタバレをご覧ください）。

アプリケーションコードは、 / public / jsフォルダーにあります。 ファイル/public/js/app.jsには、依存関係、 Angularのメインモジュール、ダウンロードに関するロゴと署名付きの起動画面が記述されています。

サービス

すべてのメインアプリケーションロジックは、 / public / js / servicesフォルダーにあります。

関数debounce （同じコマンドを折りたたんでコードを1回だけ実行できる単純なクエリフィルター）について説明します。 デバウンスはjsのプログラミングパターンです。たとえば、何も考えずにテキストを変更するときに保存機能を呼び出し、（キーを押すたびに）頻繁に動作しないことを確認するために使用されます。 現在、この関数は非常に単純に機能し、最後の関数呼び出しの少し後にコマンドを呼び出します。 ユーザーがテキストを印刷して誤ってタブを閉じたりページをリロードしたりすると、彼の貴重な作業がすべて消えてしまう可能性があります（このバグに陥ったことがあります）。

また、 ドキュメントストレージサービスとユーザーもいます 。 ブラウザのローカルメモリに情報を保存し、初期化中に読み取ります。 奇妙なことに、ドキュメントサービスはドキュメント、つまり、入力したドキュメントのテキスト、名前、およびその他のメタデータを保存します。 そして、ユーザーサービスは設定を保存します。

また、このフォルダーには、 wordscountとnotification serviceの 2つのサービスがあります 。 最初のサービスではすべてが明確で、簡単です。 2番目のサービスのコードの量は恐ろしい場合がありますが、すべてが非常に単純です。これは、ユーザーにポップアップウィンドウを表示できる機能を説明しています。 コードの主要部分は、通知の相対位置を計算し、それらを順番に表示し、ウィンドウのクローズを処理します。 htmlファイルは通知テンプレートとして使用され、ロゴとメッセージがその中に表示されます。

コントローラー

コントローラを使用すると、さらに簡単になります。 これらは、ejsテンプレートで説明されているイベントを処理します。 たとえば、 ユーザーコントローラーはドロップダウンメニューのボタンのクリックを処理し、 ドキュメントコントローラーは左側のメニューのイベントを処理し、新しいファイルを作成して自動保存します。

また、 ファイルエクスポートコントローラーもあり、メインページのフォームを使用してファイルをアップロードします。 そして、Markdownをレンダリングするためのコアプラグインでサーバーに送られます。
コントローラーは、テキストエディター自体も構成します。 残念なことに、テキストエディタ自体についてはほとんど書かれていません。 主な機能はAce Editorに委任され、私が見つけたのはテーマとテキストエディターの構成を 2回だけ でした （コードの重複のため、バグもあるかもしれません）。

指令

ejsテンプレートについて説明したときに、すでにディレクティブについて言及しました。 ディレクティブは、独自のロジックを持つ任意のhtml要素または属性です。 プロジェクトにはそれらの多くがありますが、詳細については説明しません。非常にシンプルで、興味のある人は/ public / js / componentsフォルダーやプロジェクトの他のコーナーでそれらを探すことができます。

バックエンド

バックエンドについてはあまり説明しません。 このプロジェクトで彼に会えて驚いた。 プロジェクトのバックエンドはプラグインとして実装され、 / pluginsフォルダーにあります。 その中には、MarkdownをPDF、Html、Markdownにレンダリングするコアプラグインがあります。 また、外部サービスと統合するための4つのプラグインは、それらをフロントエンドの対応するプラグインと併せて読むのが理にかなっています。 これらは、承認を処理し、フォームをレンダリングし、ユーザーから追加情報を収集する単なるアダプターです。 だから、アマチュアのために読んで、誰かがそれを面白いと思ったら、私は止めません。

このプロジェクトについてはおそらく十分でしょう。 今日、インフラストラクチャ、フロントエンド、バックエンドを含むNode.js上の単純なアプリケーションのアーキテクチャを見つけました。 あなたが何か新しいことを学び、このプロジェクトがどのように機能するかが明らかになり、おそらくあなた自身をより良くするためのより明確なビジョンが現れたことを願っています。 重要なトピックをカバーすることを忘れたり、何かに気づかなかったり、書いたりして、それを修正させていただきます。

残念ながら、現在のバージョンのテキストエディターのフレームワーク内では、Martin Broderのすべてのアイデアが実装されているわけではありませんが、オープンソースコミュニティのための作業があります。 このプロジェクトを理解したとき、私はいくつかの問題を書き、1つのバグを修正し、同じことをするように促しました。 少なくともあなた自身のためにそれをしてください;あなたは確かに他の何か面白いものを見つけるでしょう。 どれだけの仕事があなたを待っているかを見てください。

記事の執筆以来、多くのことが変わった可能性があります。 執筆時点の最後のコミット： c3782a8dc0b91e5a6ae2c2ecd528daa1f42b3a9a