Introducing React ReExt – Sencha Ext JS Components in React! LEARN MORE

企業向けWebシステムで大量のデータをたやすく扱うための方法とは?

July 4, 2019 105 Views
Show

企業システムでは様々な大量のデータ(取引先情報、受発注情報、出荷情報その他)から必要な情報を取り出して使用します。従来の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アプリケーション構築の開発サイクル全体で、どのような点に注意すべきか、陥りがちな落とし穴とその対策についても紹介します。

セミナーの詳細とお申込みはこちらのページをご覧ください。

Show
Start building with Ext JS today

Build 10x web apps faster with 140+ pre-build components and tools.

Latest Content
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s…

JavaScript Design Patterns: A Hands-On Guide with Real-world Examples

As a web developer, you know how popular JavaScript is in the web app development…

Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript…

See More

Recommended Articles

JavaScript Design Patterns: A Hands-On Guide with Real-world Examples

As a web developer, you know how popular JavaScript is in the web app development landscape. It powers thousands of web applications, from simple to…

Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript エコシステムの最新情報について学ぶユニークな機会と言えます。

JS Frameworks: A Guide to Dodging 10 Common Blunders

Ext JS is one of the most popular JS frameworks for creating interactive websites. However, beginners often face challenges when using it. This guide helps…

7 Tips for Optimizing Performance in JavaScript Grids

A JavaScript data grid is a UI element that enables developers to efficiently present data in a tabular format. These grids essentially allow us to…

JS Frameworks Dynamic UIs: A Guide to Elevating User Interfaces

Today, we will explore the beauty of dynamic UIs in web development. We’re here to show you how to turn plain web pages into exciting…

Unlocking JS Frameworks Potential: 6 Hidden Features to Know

Nowadays, learning JavaScript has become an essential task for developers. At the same time, experts are learning new JavaScript technologies to excel in web development.…

View More