Rapid Ext JS (beta)
ReExt
企業向けWebシステムで大量のデータをたやすく扱うための方法とは？
July 4, 2019
152 Views
企業システムでは様々な大量のデータ（取引先情報、受発注情報、出荷情報その他）から必要な情報を取り出して使用します。従来のC/S型ネイティブアプリの場合であれば、こうした処理はたやすかったでしょう。
しかし、ブラウザベースのユーザーインターフェイスを前提としたWebシステムの場合では、設計や実装が変わってきます。効率よく大量のデータをWebシステムで扱うには、どのようしたらよいのでしょうか。
かつてのWebシステムで用いられていたアプローチの一つは、JSPやPHP、Springなどで作成したHTMLページのテンプレートでデータの一覧表示を行うページをサーバ側で生成するという方法です。クライアントのブラウザはサーバから配信された完パケ状態のHTML画面を表示することが主な役割でした。この画面にページネーションをつけることでページ単位の画面切り替え機能を提供し、またサーバから取得するデータ量を適度に制限できました。しかし求める情報にたどり着くために複数回のページ切り替えを伴い、そのつど画面全体の再描画が必要になるなど、UXやパフォーマンス上の問題がありました。
これに対して Sencha Ext JS で取れるアプローチでは、JavaScriptで画面を描画するWebアプリケーションを Ext JS フレームワークで作成し、使用するデータを提供するWeb APIを組み合わせて必要な情報を画面の必要な場所に動的に差し込むような実装が行えます。
この方法は、いわゆるデスクトップOSでデータベースを利用するネイティブアプリケーションの実装と同様に、ユーザが画面上で行う操作にあわせて必要なデータだけをAPIから取得でき、利用者の利便性が大きく向上します。
またスマートフォンやタブレットなどのモバイルデバイスではデータ一覧表示の操作に伴って動的にデータの読み込みと表示の更新を行うようなUIにより、ページ単位ではない操作を提供していますが、Sencha Ext JS により、そのようなUIの実装もたやすく実現できます。
2019/7/30に開催するセミナー「大容量データのハンドリング、グリッド、グラフも！Web開発の限界点を知る、Senchaによる企業システム開発」では、企業向けWebアプリケーションのUI実装におけるデータハンドリングについてフォーカスし、最新の Ext JS による解決方法を紹介、検証します。
同時に、Webアプリケーション構築の開発サイクル全体で、どのような点に注意すべきか、陥りがちな落とし穴とその対策についても紹介します。
What's your reaction?
0
0
Latest Content
How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State
Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications.…
April 28, 2024
Ext JS Performance Optimization for Large-scale Applications
Are you facing issues with Ext JS applications’ performance as they scale up? Don’t worry!…
April 23, 2024
Ext JS Dynamic Forms: Hands-On Guide to Create Data Forms
Dynamic forms are changing the online world these days. ExtJS can help you integrate such…
April 23, 2024
