2021 Annual Summary | Review of Grape City Software Development Technology (Part 1)

2021 Annual Summary | Review of Grape City Software Development Technology (Part 1)

With the various wonderful competitions of the Winter Olympics, the prelude to 2022 is gradually being opened.

This year, the cloud native field is surging, the container is widely used, and k8s can be called a hot topic; this year, the big data technology system 1.0 has basically taken shape, and the business value of the data platform is gradually after the technology revival and frenzy period. Appearance, bringing a lot of investment and entrepreneurial opportunities; this year, the troika of Vue, React, and Angular is still leading the front-end, the overall technology has gradually stabilized, and the future can be expected; this year, the Metaverse is booming, .net The launch of 6 is also talked about by everyone.

And for Grape City, this year is also a year that never stops developing "empowering developers" and keeps exploring.

In 2021, we will still uphold the mission of "Empowering Developers", be ingenious and patient in making technology, and share with sincerity and perseverance.

Next, let the grapes take you to see - the 2021 of the grape city.

Please check your "front-end form"

You may not have heard of SpreadJS, but you must have heard of online collaborative office.

As a pure front-end Excel-like table control, online collaboration has always been our strength. In the past year's sharing, we have shared many technical insider of Grape City in pure front-end spreadsheets, including double-cache canvas and oil painting layered canvas drawing , formula engine 's underlying logic series, using The sparse matrix performs space-time replacement to improve the performance, and the calculation and processing of the financial professional data IRR/NPV , you can check it yourself if you are interested.

Now we have some new guys to introduce to you.

TableSheet

In order to make the front-end table not only have the formula calculation ability like Excel, but also have the high performance of the traditional table control, we hope to combine the traditional high-performance structured table (Grid) with the formula calculation engine (CalcEngine).

In order to realize such a design, we first proposed the concept of a data management container (DataManager), which completely implemented the relational data engine that was only available in the backend in the frontend, thus realizing the situation of a large amount of data (millions of rows). , Second-level loading, sorting, filtering, and all these operations are completely implemented in the front-end browser through JavaScript code.

• The data management container (DataManager) not only undertakes the functions of data storage and indexing, but also implements functions such as multi-data table relationships, views, and CRUD.
• The TableSheet is responsible for presenting the data, views, and relationships organized in the data management container (DataManager) on the web page through the "Canvas canvas" of SpreadJS itself.

Through the combination of the above functions, it can provide users with more stable support in the analysis, merging, and processing scenarios of large amounts of data, reduce the excessive dependence of the traditional table system on the background, and can complete more data operations on the front end. , thereby freeing up valuable backend and bandwidth resources.

Other highlights

We have also made some optimizations on the performance and compatibility of the front-end computing engine:

• Compatibility: It supports Microsoft's latest XLOOKUP/XMATCH series functions, and adds compatibility to the just-released LAMBDA function in the new version
• In terms of functions: built-in support for more than 450 standard Excel functions, and support for custom functions and asynchronous function expansion capabilities
• In terms of performance: the analysis and calculation of tens of thousands of formulas can be completed in seconds

At the same time, with the continuous updating of popular front-end frameworks, support for Vue3 and Angular 13 is now implemented.

In addition to the optimization of front-end performance, the back-end GcExcel can now support the .NET 6 platform; in order to make printing more convenient, a print driver is integrated, directly connected to a physical printer, and the content is directly output and printed.

Learning Dao must be fierce, and always adhere to the original intention. We have never stopped exploring the technology in the field of forms. It is ingenuity and innovation.

Make complex reports less complex reports

The complexity of complex reports is understood by students who have done reports. In 2021, we will not stop the deep cultivation in the field of reporting.

.Net platform

The first thing that must be mentioned is the Blazor Viewer.

Blazor is a framework for building interactive client-side Web UI based on .NET platform and ASP.NET Core technology. Developers can build interactive web UIs using C# instead of JavaScript. This makes it easier for developers to write client and server code in C#.

To make report viewing easier, a new report viewer component, Blazor Viewer, is now available. It provides the application with full functions of report rendering, display, interaction, printing and exporting, which is convenient for us to build Web applications more efficiently.

Key features include:

• Server-side rendering of user interfaces with .NET code
• Handle user interaction with .NET code on the server side
• Provides C# API for developers to open reports, process events and customize report display interface

At the same time, with the upgrade of .Net 6 and the launch of VS2022 in 2021, they will also be upgraded and compatible.

JavaScript platform

In the past version, the npm package adopted by ARJS used the module specification of CommonJS, AMD, etc. However, in the process of using these specifications, there will be some problems. For example, CommonsJS is more suitable for the server. The module is read from the local disk on the server, and the loading speed is very fast; but if it is on the client, there may be a "suspended death" situation when loading the module.

In order to solve this problem, we adopt the modular syntax supported by ES6 itself in the npm package of the report control.

The npm package exposes native ES modules, which can be leveraged to provide great performance for the development and building of our applications.

Now as long as the browser supports the modularization of ES6, the project project does not need to spend time and energy to compile and package, the project project volume is smaller, and the compilation performance will be faster.

At the same time, the framework support is more abundant, Vite.js, Vue 3, Angular 13 and other front-end frameworks are now fully supported.

In addition to the above two points, in order to ensure that the report performance is suitable for the generation of larger-scale data reports, we have been working on optimizing the report engine to improve the report performance. Based on the limitations of the platform and development language, we have refined and optimized the key nodes of each report generation. The variable data structure is used for storage, which greatly improves the performance of the entire report.

For performance improvement, it is difficult to optimize the "1+1" operation in JavaScript, but it is possible to optimize memory allocation and reduce the number of comparison operations to 2, so we use a variable storage method of the form:

{ Type: 'float' | 'string' | 'boolean' | 'int16' | 'int32' … Value: object }

When variables are used for result display, data engine interactive calculation is performed, so when executing expressions such as "1+1", only three memory allocations and four conversions need to be performed, and the number of conditional operators such as switch and if is not calculated, so that Reduce time and memory consumption.

In actual tests, we also found that this method can effectively improve report performance, and truly realize the incremental cache loading mechanism for large data volumes.

At the same time, in order to further break through the report function limitation, silent printing is realized for the report control . Interested students can check the previous article: https://www.cnblogs.com/powertoolsteam/p/15502771.html

Although complex bid reports are complicated, we are still working hard to make complex bid reports less complicated and become a practical development tool that can be used by everyone.

Summarize

The development and integration of technology is faster than we imagine. Under the coercion of countless keywords such as metaverse, AI, front-end, cloud, data, operation and maintenance, computer network technology is constantly growing and evolving.

And we have never stopped moving forward, from front-end spreadsheet technology, BI data analysis, to complex report processing and solution and low-code that is in the limelight, based on the present and looking forward to the future.

This time, starting from the control with the longest history in Grape City, we will introduce the technical highlights and breakthroughs of this year. In the next part, we will continue to take you back to the new fields of Grape City in the past year. Pointable technology upgrades.