1

Design Ideas

Excel is the most commonly used spreadsheet program in our daily office. It can not only meet the calculation needs of report data, but also provide many functions such as drawing, data pivot analysis, BI and Visual Basic for Applications (VBA) macro language programming. After several years of development, Excel has the basic capabilities of all spreadsheets. While meeting various data analysis needs in the fields of statistics, engineering and finance, it also replaced Lotus 1-2-3 as the industry standard for spreadsheets.

The name of Excel is derived from the word "Excellence" in English, which stands for: excellence and excellence, and the point that best reflects its "excellence and excellence" is Excel's formulas and functions. Excel's formula function makes the static form really "live".

If Excel is based on the characteristics of "formulas and functions" and has become a must-have for elites in the workplace to work efficiently, then the pure front-end table control SpreadJS also relies on this feature to become a tool for developers to quickly develop enterprise Web applications .

SpreadJS is a pure front-end table control based on HTML5 developed by Grape City. It is compatible with more than 450 Excel formulas and has the product features of "high performance, cross-platform, and high compatibility with Excel". It is favored by well-known companies such as software, and has been recognized as "China's Excellent Software Product" by the China Software Industry Association. With the help of the component function of SpreadJS, the developer can move Excel to the online web page, so that the application has the ability of online Excel.

Video: https://videos.grapecity.com.cn/SpreadJS/online/SpreadJS \_Introduction.mp4

Before 2021, browser-based web applications can indeed meet most of the needs of enterprises, but with the launch of Web 3.0 and the emergence of emerging concepts such as the Internet of Everything and the Metaverse, the ultimate performance and user experience of applications are gradually replaced. The program function itself, and is expected to become the "standard" of the future Web system.

However, limited by the browser memory itself, the performance bottleneck of front-end components cannot be avoided. To this end, Grape City proposes an "Excel-like full-stack solution" to solve this problem.

SpreadJS + GcExcel Build Class Excel Full Stack Solution

Due to the limitation of front-end resources, when we load an Excel containing a large number of calculation formulas (such as investment management models in the real estate industry, financial actuarial tables in the financial and insurance industry, design drafts in the manufacturing industry, etc.) Responsiveness and even crash issues occur from time to time.

The common features of these Excels are: the number of formulas is more than 10W~20W, and the tables contain a large number of formula functions with complex logic and nested within each other. If you only rely on JS components and browsers to process these documents, it will obviously be stretched. However, if they are executed on the back-end server, it will not affect the user experience, and can significantly optimize the front-end performance and achieve front-end and back-end load balancing. This is the original intention of SpreadJS + GcExcel to build an Excel-like full-stack solution. .

Taking advantage of the performance advantages of GcExcel on the server side and combining it with the pure front-end table control SpreadJS, it can meet the functions of online document data synchronization, online reporting, batch export and printing, as well as Excel-like report template design and server-side high-performance processing. .

Optimization ideas for Excel-like full-stack solutions when processing large Excel documents:

1. Use the features and performance advantages of GcExcel to process Excel in batches on the server side, and load and overall calculate the entire Excel document on the Java or .NET platform.
2. Only use the pure front-end table control SpreadJS to display page results and interact with users.

The scheme architecture diagram is as follows:

According to this design, GcExcel can effectively share some tasks of the original SpreadJS (this part of the task itself will consume a lot of front-end performance), reduce the front-end pressure, and the full-stack structure also effectively avoids top-heavy, making the application more elegant.

This issue mainly introduces the design ideas of full-stack table technology when dealing with complex formula calculation scenarios. In the next issue, we will explain in detail from the code. If you have similar requirements in your project, or want to know more about the application scenarios and cases of Excel-like full-stack solutions, please go to City official website .


葡萄城技术团队
2.7k 声望29.9k 粉丝

葡萄城是专业的软件开发技术和低代码平台提供商,聚焦软件开发技术,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。