Latest Ext JS 7.8 is now available. Learn more

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

July 4, 2019 190 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アプリケーション構築の開発サイクル全体で、どのような点に注意すべきか、陥りがちな落とし穴とその対策についても紹介します。

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

Recommended Articles

Decoding the Divide: Enterprise Software Development vs. Standard Software Development

There are two main ways to develop software. These two ways include enterprise software application development and standard software development. Here, enterprise applications development customizes…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Ext JS ClassicとModernツールキットの違いを理解する

Ext JSは、強力なWebアプリケーション/モバイルアプリケーションを構築するためのJavaScriptフレームワークです。フレームワークには、140を超える高性能でフルテスト済のカスタマイズ可能な UIウィジェット/コンポーネントが搭載されています。さらに、すべての最新ブラウザに対応し、クロスプラットフォーム開発をサポートしています。Ext JSは、アプリを構築するための2つのツールキット(Classic ToolkitとModern Toolkit)を提供しています。それぞれのツールキットは、異なるユースケースに対応するように設計されており、独自の機能と利点を提供します。

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8リリース

このたび、Senchaチームは、Sencha Ext JS 7.8のリリースを発表しました。このリリースでは、7.7リリースに続き、Grid、Timefield、Chart、TreePanelなどユーザーの皆さんからの要望に応え、ModernおよびClassicツールキットに数多くの品質強化を行っています。また、Ext JS 7.8には、Classicツールキットの新機能Froalaに加え、CheckBox、Grid、DataViewの改善、Grid、Combo、CheckBox、Chart、Date Field、TreePanel、Storeなどに対する要望の多かった機能、双方のツールキットに対する品質改善が含まれます。

React Apps Development Using ReExt with Ext JS Components

The world is moving fast towards online businesses. Businesses are established online via social media, mobile apps, and websites. In other words, an online presence…

View More