⛅️ 🏵️ 🏏 1C Webクライアントについて 💆🏼 🕠 ✊🏾

1Cの優れた機能の1つ：エンタープライズテクノロジーは、マネージドフォームテクノロジーを使用して開発されたアプリケーションソリューションを、Windows、Linux、MacOS Xのシン（実行可能）クライアント、および5つのブラウザー（Chrome、アプリケーションのソースコードを変更せずに、Internet Explorer、Firefox、Safari、Edge、およびこれらすべて。さらに、外部では、シンクライアントとブラウザーのアプリケーションは機能し、ほとんど同じように見えます。

10の違いを見つけます（カット2の写真の下）：

Linuxシンクライアントウィンドウ：

Webクライアント（Chromeブラウザー）の同じウィンドウ：

なぜWebクライアントを作成したのですか？やや気前よく言えば、このタスクは時間の経過とともに設定されました。長い間、インターネットを介した作業がビジネスアプリケーションの前提条件になっています。最初に、シンクライアント用にインターネット経由で作業する機能を追加しました（競合他社の中には、途中で停止したものもありますが、反対に、シンクライアントを拒否し、Webクライアントの実装に限定しました）。ユーザーに最適なクライアントオプションを選択する機会を提供することにしました。

シンクライアントにインターネット経由で作業する機能を追加することは、クライアントとサーバーの対話のアーキテクチャが完全に変更された大規模なプロジェクトでした。 Webクライアントの作成は、ゼロから始まるまったく新しいプロジェクトです。

問題の声明

したがって、プロジェクトの要件：Webクライアントは、シンクライアントと同じことを行う必要があります。

ユーザーインターフェイスを表示する
1Cで記述されたクライアントコードを実行する

1Cのユーザーインターフェイスは、ビジュアルエディターで記述されていますが、宣言的に、ピクセルごとの要素の配置はありません。約30種類のインターフェイス要素が使用されます-ボタン、入力フィールド（テキスト、デジタル、日付/時刻）、リスト、テーブル、チャートなど。

1Cのクライアントコードには、サーバー呼び出し、ローカルリソース（ファイルなど）の操作、印刷などが含まれます。

シンクライアント（Web経由で作業している場合）とWebクライアントの両方が、同じWebサービスのセットを使用して1Cアプリケーションサーバーと通信します。もちろん、クライアントの実装は異なります。シンクライアントはC ++で記述され、WebクライアントはJavaScriptで記述されています。

ちょっとした歴史

Webクライアント作成プロジェクトは2006年に開始され、5人のチームが参加しました（平均）。プロジェクトの特定の段階で、開発者は特定の機能（スプレッドシートドキュメント、図など）の実装に関与しました。原則として、これらはシンクライアントでこの機能を実行した開発者と同じでした。つまり開発者は、以前にC ++で作成したJavaScriptコンポーネントを書き直しました。

当初から、2つの言語間の概念的な違いが大きいため、C ++シンクライアントコードからJavaScript Webクライアントへの自動（少なくとも部分的な）変換のアイデアを拒否しました。 WebクライアントはJavaScriptでゼロから作成されました。

プロジェクトの最初の反復では、Webクライアントは埋め込み1C言語のクライアントコードをJavaScriptに直接変換しました。シンクライアントの動作は異なります-組み込みの1C言語のコードがバイトコードにコンパイルされ、このバイトコードがクライアントで解釈されます。その後、Webクライアントは同じことを始めました。まず、生産性が向上し、次に、シンクライアントとWebクライアントのアーキテクチャを統合できました。

1Cの最初のバージョン：Webクライアントをサポートするエンタープライズプラットフォームは2009年にリリースされました。当時のWebクライアントは、Internet ExplorerとFirefoxの2つのブラウザーをサポートしていました。最初の計画にはOperaのサポートが含まれていましたが、Operaのアプリケーション終了ハンドラーでの克服できない問題のために（アプリケーションが閉じていることを100％確実に追跡できず、この時点で1Cアプリケーションサーバーから切断手順を実行しました）これらの計画は放棄されなければなりませんでした。

プロジェクト構造

合計で、1C：Enterpriseプラットフォームには、JavaScriptで記述された4つのプロジェクトがあります。

WebToolsは、他のプロジェクトで使用される共有ライブラリです（ここにはGoogle Closure Libraryが含まれています）。
書式設定されたドキュメントコントロール（シンクライアントとWebクライアントの両方でJavaScriptで実装）
スケジューラ制御（シンクライアントとWebクライアントの両方でJavaScriptで実装）
Webクライアント

各プロジェクトの構造は、Javaプロジェクト（または.NETプロジェクト-より近い）の構造に似ています。名前空間があり、各名前空間は個別のフォルダーにあります。フォルダー内には、名前空間ファイルとクラスがあります。 Webクライアントプロジェクトには約1000個のファイルがあります。

構造的に、Webクライアントは大きく次のサブシステムに分けられます。

マネージドクライアントアプリケーションインターフェイス
- 一般的なアプリケーションインターフェイス（システムメニュー、パネル）
- 約30のコントロール（ボタン、さまざまなタイプの入力フィールド-テキスト、デジタル、日付/時刻など、テーブル、リスト、チャートなど）を含む管理フォームのインターフェイス
クライアントの開発者が利用できるオブジェクトモデル（合計400種類以上：管理されたインターフェイスのオブジェクトモデル、データ構成設定、条件付き設計など）
1C通訳
ブラウザ拡張（JavaScriptでサポートされていない機能に使用）
- 暗号化を使用する
- ファイルを操作する
- シンクライアントとWebクライアントの両方で使用できる外部コンポーネントのテクノロジー

開発機能

JavaScriptで上記のすべてを実装するのは簡単な作業ではありません。おそらく1C Webクライアントは、JavaScriptで記述された最大のクライアント側アプリケーションの1つであり、約450,000行です。 Webクライアントコードでは、このような大規模プロジェクトでの作業を簡素化するオブジェクト指向のアプローチを積極的に使用しています。

クライアントコードのサイズを最小化するために、まず独自の難読化ツールを使用し、プラットフォームバージョン8.3.6（2014年10月）からGoogle Closure Compilerの使用を開始しました。数字で使用した場合の効果は、難読化後のWebクライアントフレームワークのサイズです。

自分の難読化ツール-1556 kb
Google Closure Compiler-1073 kb

Google Closure Compilerを使用することで、当社の難読化ツールと比較してWebクライアントのパフォーマンスが30％向上しました。さらに、アプリケーションが消費するメモリ量は15〜25％減少しました（ブラウザによって異なります）。

Google Closure Compilerはオブジェクト指向コードで非常にうまく機能するため、Webクライアントの効率は可能な限り高くなります。 Closure Compilerは私たちのためにいくつかの良いことをします：

プロジェクトのビルド段階での静的型チェック（JSDocアノテーションでコードをカバーしている場合）。結果は静的型付けであり、C ++での型付けに非常に近いレベルです。これにより、プロジェクトのコンパイル段階でかなりの割合のエラーをキャッチできます。
難読化によるコードサイズの削減
たとえば、次のような実行可能コードの最適化の数：
- インラインルックアップ関数。 JavaScriptで関数を呼び出すことは非常に高価な操作であり、一般的に使用される小さなメソッドをインラインで置換すると、コードが大幅に高速化されます。
- コンパイル段階での定数のカウント。式が定数に依存する場合、定数の実際の値がそれに代入されます

Webクライアントの開発環境として、WebStormを使用します。

コード分析には、静的コードアナライザーを統合するSonarQubeを使用します。アナライザーの助けを借りて、JavaScriptでソースコードの品質の低下を監視し、それを防止しようとします。

どのタスクを解決しましたか/解決しました

プロジェクトの実装中に、解決しなければならないいくつかの興味深いタスクに直面しました。

サーバーとウィンドウ間での通信

ソースコードを難読化すると、システムに干渉する場合があります。 Webクライアントの実行可能コードの外部のコードは、難読化のために、実行可能コードが期待するものとは異なる関数名とパラメーター名を持っている場合があります。私たちの外部コードは次のとおりです。

データ構造としてサーバーから送信されるコード
別のアプリケーションウィンドウのコード

サーバーと対話する際の難読化を避けるために、@ exposeタグを使用します。

/**
 * @constructor
 * @extends {Base.SrvObject}
 */
Srv.Core.GenericException = function ()
{
    /**
     * @type {string}
     * @expose
     */
    this.descr;

    /**
     * @type {Srv.Core.GenericException}
     * @expose
     */
    this.inner;

    /**
     * @type {string}
     * @expose
     */
    this.clsid;

    /**
     * @type {boolean}
     * @expose
     */
    this.encoded;
}

(, ).

/**
 *    DropDownWindow
 *
 * @interface
 * @struct
 */
WebUI.IDropDownWindowExp = function(){}

/**
 *    1   
 *
 * @param {boolean} isForward
 * @param {boolean} checkOnly
 * @return {boolean}
 * @expose
 */
WebUI.IDropDownWindowExp.prototype.moveMarker = function (isForward, checkOnly){}

/**
 *      
 *
 * @param {boolean} isFirst
 * @param {boolean} checkOnly
 * @return {boolean}
 * @expose
 */
WebUI.IDropDownWindowExp.prototype.moveMarkerTo = function (isFirst, checkOnly){}

/**
 * @return {boolean}
 * @expose
 */
WebUI.IDropDownWindowExp.prototype.selectValue = function (){}

We used Virtual DOM before it became mainstream)

, UI, , DOM . Virtual DOM UI. DOM , , DOM-.

-

- , (CSS ..). , ( ) , CSS.

( Java C++), , Selenium.

– , , -. , «1», -. — . - . - , – . .

25 . (, ) . .

Selenium ; , - – Selenium , , .. . , .

( Selenium) . «1:». ( ) . – .

; Dynatrace AJAX Edition DynaTrace. , . ( ) – , . JavaScript, DOM .. / – , .

, Google Closure Compiler - inline- (, ). , .

, , JavaScript, :

. – , ( , JavaScript Chrome Firefox), — , . , 3 – Windows, Linux MacOS. 1: 1. - .

Safari NPAPI, Internet Explorer — ActiveX. Microsoft Edge , - .

- – . - , , -.

— , , . , – . - . ( ) , - ( ). .

1C Webクライアントについて