, グレープシティは、プロフェッショナルな開発ツール、ソリューション、サービスを開発者に提供し、開発者を支援します。
データプレゼンテーションの基本的な方法として、フォームはあらゆる種類のソフトウェアシステムで重要な役割を果たしています。モバイルインターネットの時代には、組織の "フォーム "を介して最も複雑なデータであっても、ユーザーに明確に提示することができ、表示、フィルタリング、および修正するために、複数の次元からユーザーをサポートします。ドキュメント、レポート、伝票、または請求書を扱うかどうか、フォームは、特に、より効率的な離散データストレージのため、より多くのスタイルの情報を格納するために添付することができます。
現在、企業は情報技術、フロントエンド、バックエンド、ミドルオフィス、クラウドを変革しようとし始めており、これらのコンセプトは徐々に有名になり、フォームはほとんどすべてのBエンド製品のインタラクティブなコンポーネントとして広く歓迎されています。
しかし、そうであっても、テーブルは、多くの場合、スタイルの複雑さ、面倒な操作やその他の要因のため、ユーザーエクスペリエンスの問題の数によって引き起こされる、特にWebプロジェクトでは、テーブルの技術は、多くの場合、フロントエンドのパフォーマンスの制約によって制限されます。
では、開発者がフロントエンド・フォーム技術のマンネリ化を打破し、主要技術を軌道に乗せるための方法はあるのでしょうか？
2020年6月30日、グレープシティは世界有数のソフトウェア開発技術プロバイダーとして、オンラインブランド戦略会議「Empowerment - Smart Change」を開催しました。会議では、グレープシティが正式に「開発者に力を与える」というビジネスミッションを発表し、フロントエンドのフォーム開発などの技術的なトピックを共有しました。
開発者向けフロントエンド・フォーム
C/Sアプリケーションでは、フォームベースのコンポーネントはより多くのリソースをサポートし、より直接的にメモリを制御することができます。しかし、組織がB/Sへの転換を遂げるとき、フロントエンド・フォームは多くの課題に直面します。
例えば、マルチブラウザの違い、ブラウザのサンドボックス機構、限られたメモリアクセス、低いクライアント側のパフォーマンス。フロントエンド開発環境の反論と不均一な品質では、すべてのこれらの問題は、アプリケーションの開発で、多くの時間と繰り返しコーディングを消費し、コアビジネスに集中することはできません。時間と労力がかかり、ソフトウェア開発コストを悪化させるだけでなく、外部環境の変化がシステムの安定性に影響を与え、メンテナンスコストが高騰する可能性もあります。
要約すると、フロントエンド・フォームの開発には、パフォーマンス、メモリ消費、信頼性という3つの主要な技術的困難があります。
このような技術的な困難に対処するため、グレープシティは長年にわたるフォーム開発技術の経験を結集し、システムのパフォーマンスと信頼性を向上させ、メモリ消費量を削減する純粋なフロントエンドのフォームコントロールであるSpreadJSを導入しました。
グレープバイン SpreadJS フォーム制御技術
SpreadJSは、フロントエンドのフォーム開発における技術的な3大難点であるパフォーマンス、メモリ消費、信頼性のそれぞれについて対策を提案しています：
- SpreadJSは、デュアルキャッシュのcanvas描画エンジンをベースに、非常に高い処理性能を実現しています。
- 行パターンに基づく疎行列ストレージ戦略、SpreadJSがメモリ消費を大幅に削減
- SpreadJSは、コンピュートエンジン技術に基づく安定した信頼性の高いアプリケーションを実現します。
デュアルキャッシュキャンバス描画エンジンによるパフォーマンス向上
エンタープライズアプリケーションでは、データが唯一のバックボーンであり、データキャリアの形態として、多くの場合、"スピット "ラグ、UIインターフェイス "偽死"、インターフェイスの操作がスムーズではありません。
これらの問題の核心は、ブラウザのレンダリングエンジンの根本原理にあります。インターフェイス要素が増えると、ブラウザのレンダリング時間が大幅に増加し、メモリ消費量が増えます。
例えば、最新のアプリケーションでは、より良いユーザーエクスペリエンスを追求するために、UIを繰り返し最適化する必要があり、インターフェイスのUI要素を頻繁に変更すると、ブラウザの再描画が何度も発生します。このプロセスにおいて、UI要素の作成と変更は内部のゴミ収集メカニズムを活性化させ、データ処理の効率に影響を与えます。
また、フロントエンド開発環境の多様化、各種高DPIデバイス、携帯電話、タブレットPC、4Kディスプレイ、企業向け大型スクリーンなど、企業向けアプリケーションシステムの処理負担が増大しています。
大量のデータを表示するために使用されることの多いテーブルでは、パフォーマンスが非常に重要です。つまり、テーブルをベースに開発されたアプリケーションは、最小限のリソース消費で高速なレンダリングとリフレッシュの要件を満たす必要があります。
そのために、SpreadJS の純粋なフロントエンド・フォーム・コントロールは、Canvas 描画モデルとダブルキャッシュ・キャンバス技術を導入しています。
キャンバスがモデルを描画
従来のフォームコンポーネントは、table や div に関係なく DOM を使用してフォームデータを表示するため、複雑な UI では多くの DOM レンダリングが必要になります。そのため、更新やスクロールなどの操作を行う際に、DOM の破棄と生成を繰り返す必要があり、うっかりすると無効な計算が大量に増えてしまいます。
この問題を解決するために、フロントエンドフレームワークのReactとVue3は仮想DOMを使用し、SpreadJSはより高度なアプローチであるHTML5 Canvas描画を使用しています。
キャンバスの描画を使用して、SpreadJSだけでなく、キャンバスを描画する過程で、DOM要素の作成と破棄を繰り返す必要はありませんが、また、多くの制限のUI上のDOM要素のレンダリングを破る。SpreadJSは、描画ロジックを介して線形、特殊なグラフィックスなどのUI要素の豊富な様々な描画することができますだけでなく、UIインタフェースの問題を解決するために、より正確なレンダリングを実現するためにブラウザの違いによるスタイルエラーの問題を解決します。
しかし、レンダリングに使用するキャンバスが 1 つしかない場合、ボディ レイヤーであれ、装飾レイヤーであれ、描画のたびにすべての要素を描画ロジックで描画する必要があり、明らかに非効率です。
デュアル・キャッシュ・キャンバス・テクノロジー
このため、SpreadJSでもデュアルキャッシュキャンバスの仕組みを導入し、変更が容易でないメインレイヤーはキャッシュキャンバスに描画し、描画動作が発生した場合は、キャッシュキャンバスのメインレイヤーだけをイメージクローンによってメインキャンバスに直接描画し、装飾レイヤー要素を追加描画することで、全体の描画パフォーマンスを大幅に最適化することができます。
SpreadJSのダブルキャッシュキャンバスの技術的特徴：
- 油絵のようなレイヤリング
SpreadJSの描画エンジンは油絵の原理に基づいており、ボディレイヤーと装飾レイヤーに分かれています。 ボディレイヤーは、背景、セル、テーブルラインなどの永続的で変更不可能な要素を描画します。装飾レイヤーは、選択ボックスやドラッグ＆ドロップボックス、ホバー効果など、常に変化する要素をレンダリングします。
- キャッシュキャンバスの利用
テーブルのスクロールのような動的な描画が発生した場合、SpreadJS はメインキャンバスを空にし、動作コンテキストに基づいてキャッシュされたキャンバスからキャンバスのオフセットを行い、オフセットされたレイヤーをメインキャンバスに直接描画し、残りの部分をメインキャンバスに描画することで、テーブルのスクロール処理全体をよりスムーズに行います。
メモリ消費を大幅に削減する行モードベースの疎行列ストレージ戦略
明言はされていませんが、ブラウザは1つのスレッドにメモリ制限をかけるのが業界の常識で、例えば64ビットのクロームではタブページあたり4G以上のメモリを消費することはできません。
シングルページのアプリケーションが未成熟だった10年ほど前であれば、この制限は問題にならなかったでしょう。というのも、当時はまだ、バックエンドの処理性能をいかに向上させるかに関心があり、フロントエンドは静的なウェブページ表現に過ぎなかったからです。
フロントエンドエンジニアリングの急速な発展に伴い、様々なフロントエンドエンジニアリングの足場が成熟し、WebComponentの標準化が議題となり、企業はC/SアプリケーションからB/Sアプリケーションへの転換を始めています。このため、フロントエンド開発者は、複雑なビジネスデータのシングルスレッド処理という課題に直面する必要があります。ここでの複雑さは、大量のデータだけでなく、データ状態の処理にもあります。データのフロントエンドとバックエンドの相互作用をいかに効率的に解決するか、データの変更やデータのロールバックにいかに迅速に対応するか。
このような理由から、SpreadJSはスパースマトリックスという実績のある別の解決策を考案しました。
シートの場合、従来の保存方法は2次元配列やオブジェクトの配列のような配列です。エクセルのようなスプレッドシートでは、セルの内容は断片化されています。つまり、シートには空のセルが多数存在し、これらの空のセルも同じようにメモリ領域を占有します。
スプレッドシートのような緩やかな文書構造の場合、SpreadJSは疎行列の保存モデル（Sparse Array）を使用してデータを保存します。
従来の連鎖ストレージや配列ストレージと比較して、スパース行列ストレージは行インデックスに基づいてデータディクショナリを構築し、疎にレイアウトされた表データでは、スパース行列は空のデータのために追加のメモリ領域を開くことなく、空でないデータのみを格納します。
この特別なストレージ戦略は、メモリ消費を節約するだけでなく、データの断片化を容易にします。SpreadJSでは、データレイヤー全体からデータの一部をフレーム化して、いつでもシリアライズまたはデシリアライズすることができます。
この機能により、開発者はいつでもストレージ構造全体のどのレベルでもノードを交換またはリストアすることができ、効率的なデータのロールバックとデータ復旧が可能になります。
安定した信頼性の高いアプリケーションのための複雑な論理演算をサポートするコンピューティング・エンジン
数式は、Excelスプレッドシートのクラスの重要な関数であり、科学、金融、金融、製造業などでのアプリケーションのその広い範囲SpreadJSは数式関数の450以上の種類をサポートしていますが、また、カスタム数式や非同期数式関数を提供しています。
表面的には単純に見えるエクセルの数式は、構文解析、構文解析、演算、実行など、高レベルのプログラミング言語の特徴をすべて備えています。
ユーザーがフォームに数式を設定すると、計算エンジンは、解析を通じて、計算エンジンは、ツリー構造のメモリに格納されます "SUM（A1：B1、3/E1、C1）+ 2*"のような数式は、メディア式に解析されますツリー構造は、式ツリーと呼ばれています。式ツリーの生成は、計算依存関係のチェーンのその後の構築の鍵となります。
式が式ツリーにパースされると、計算エンジンは、算術コンテキストに基づいて、その式の算術従属 チェーンを構築します。依存関係の連鎖の目的は、オンデマンドの計算を可能にすることで、テーブルのコンテンツが変更されると、影響を受ける式ツリーだけが計算され、その計算は依存関係の連鎖に基づいて行われます。
上図に示すように、これは SpreadJS の計算エンジンがどのように計算依存連鎖を構築するかを示す簡単なフローチャートです。 式ツリーは計算ストレージモデルから対応するルートノードとルートノード識別子を見つけ、その後式ツリー全体を走査して他の依存関係識別子を見つけ、依存関係を構築します。
依存関係の連鎖全体のいずれかのノードが変更されると、依存関係の連鎖に沿って、SpreadJSは、依存するノードを検索し、再計算し、このプロセスは、依存関係の連鎖には、ダーティな値操作としても知られている計算を再計算されませんノードはありません。
このメカニズムを使用することで、SpreadJSはフォーム全体の速度を大幅に向上させ、より良いエクスペリエンスとより正確な結果をユーザーに提供します。
SpreadJSは、描画エンジン、ストレージ戦略、計算エンジンに加えて、タッチサポート、リッチテキストサポート、フロントエンドExcelインポート/エクスポート、JSONストレージなど、より多くの技術的な詳細を実装しています。
SpreadJSは、さまざまな業界の企業情報システムの開発に広く使用されています。
現在、SpreadJSは、フォームやドキュメントの共同編集、データレポーティング、Excelライクなレポートデザインなどのビジネスシーンに対応するため、各業界の情報システム開発で幅広く利用されており、華為技術（Huawei）、蘇寧ebay、天虹基金、遠雄軟件などの各分野のリーディングカンパニーが、Excelと親和性の高い機能やレイアウトを持つソフトウェアシステムを構築し、その情報システムの提供を加速するのに役立っています。
ファーウェイの調査・設計プラットフォームのシステム構築を例に挙げてみましょう：
SpreadJSをベースに開発された調査・設計プラットフォームは、ファーウェイのグローバルビジネスの計画、調査、設計タスクを担います。 ファーウェイは、SpreadJSのクロスプラットフォームアプリケーション組み込みの特性を活用することで、設計テンプレートとしてExcelを使用していた原型をオンラインレポートにアップグレードし、テンプレートの不統一、材料データの不統一、ファイル管理の困難といった問題を解決し、Excelのデータと計算機能を保持しました。また、エクセルのデータ計算機能を保持し、すべてのテンプレートとデータをサーバーに保存・管理できるようにしました。
グレープシティの協同組合顧客の一部
SpreadJSの製品やアプリケーションの詳細については、Grapevineのウェブサイトをご覧ください。
概要
1980年の創業以来、グレープシティは、技術分野の開発、開発者のニーズの徹底的な理解、製品の詳細の究極の追求、研磨の数十年後、高度に再現されたExcelの機能と純粋なフロントエンドフォームコントロールSpreadJSの経験を開始し、オンラインオフィスのシナリオとフロントエンドフォームシステムの開発ニーズに完全に一致することができますに焦点を当てています。
今後もグレープシティは、「開発者に力を与える」という使命を堅持し、革新的な精神ですべての開発者を支援し、力を与え、開発者の可能性を刺激し、顧客の成功を支援し、共に真新しい未来を創造していきます。
