Disclaimer: The article is derived from my leisure and elegance, without any advertising intention
I have always disdain to use front-end frameworks, at most using some ui components, but the ag-grid framework is too easy to use. This article introduces some philosophical thoughts of aggrid and my experience of using it, and records some past events by the way.
CompetenceX: The first website I developed
During my junior year internship at Bosch Siemens, I developed the first decent H5 website in my life for the company: CompetenceX (Competence Matrix Management System, hereinafter referred to as Competence Matrix or C9X ). The website itself does not have much technical content. It is based on aggrid and mongodb plus a simple mathematical model, but it has become my enlightenment project in the field of web development, which has provided me with a lot of fuel on my job search.
The ability matrix is a platform used to evaluate the competitiveness and professional skills of employees. Like all demanders, my boss gave this vague demand at the time. At this time, a mature developer should of course use his own technology to guide or even change the needs of users, but in any case, the first thing to do is to establish a basic data object model, such as an ER diagram.
In order to cope with possible changes in future requirements, I designed a more general symmetric relationship model, hoping to save me a little time in the future. For this reason, I also bought the "MongoDB Application Design Pattern" to study The relationship between collections and relationships in mongodb. . (I realized only after many years that there is no need to consider such a long term in the internship period of several months. It is the most practical to press the code, draw water and deliver the goods according to the requirements.) The ER diagram of the ability matrix is as follows:
There are only two entities in the figure: person and project, and the remaining two virtual entities are the parent classes of person and project. The most important relationship is the work between the two main entities. The work relationship also has attributes: there is a many-to-many relationship between the two entities, so another data table is needed to store it. The screenshot of mongodb compass is as follows, where human and skill are two entity sets, and unit is a work relationship set.
But today I am not here to introduce the capability matrix project, but to pave the way for aggrid. As far as I know, the former company is still using my C9X. After 4 major versions and countless small version iterations, the mature and stable C9X is completely dependent on the powerful driving engine Ag-Grid behind it to survive.
Ag-Grid: a web framework comparable to Excel
How to display the perfect collection relationship model on the front-end? The best way is to draw a table. After more than a month of frame selection, I finally chose to use aggrid to reconstruct the entire system in the 2.X version of the capability matrix. (At that time, I was searching for a form framework that uses JavaScript to implement Excel functions on the Internet. On the recommendation of an enthusiastic crowd who did not want to be named, I came to the homepage and said "The Best JavaScript Grid in the World" without shame. The official website of aggrid, but later on the face and found that they are really the highest reputation framework in the industry)
The version number of aggrid has reached 22.X. Among its many functions and features, the most powerful and shining one is the statistical graph function it just released this year. Note that the statistical chart was launched this year by aggrid, and this year aggrid has just become the first heavyweight framework that can merge tables and charts at the same time, and the value of the chart does not lose to frameworks such as echarts and chart.js. In the past, it was often necessary to combine table frameworks and chart frameworks to meet certain big data systems, but now aggrid has undertaken 2 heavyweight application modules alone, which is what I think is cool.
Unified chart language
Both tables and various statistical graphs are unified in data, and they are all two-dimensional lists (also called lists of lists). A table can be transformed into a bar chart, line chart, radar chart, and pie chart without loss. . . So the table can be regarded as a special kind of chart. The famous front-end framework ag-grid was born on this theory.
In short, a table is a chart, and a chart is a table . They are consistent in data, but they are different in form. However, the application frameworks on the market are either pure tables or pure charts, until I met aggrid that can combine the two.
Virtual DOM
AgGrid also incorporates virtual DOM to improve UI performance. DOM is a very rubbish technology, which is well known in the world, but due to some compatibility reasons, DOM has not been optimized.
For example, when using the "table", "tr" and "td" tags, load 1000 records with 20 columns into the browser, and the page will end up with many rendered DOM elements. This will greatly reduce web page speed. This will result in a very poor user experience or a browser crash due to insufficient browser memory.
To solve this problem, aggrid only presents what can be seen on the screen. For example, if you load 1,000 records and 20 columns into the grid, but the user can only see 50 records and 10 columns (because the rest are not scrolled into view), the grid only presents the user’s 50 rows and 10 columns can actually be seen.
In short, one of the implementations of DOM virtualization is that the number of DOM elements is equal to the number of visible elements on the current screen, rather than the number of elements on the entire page .
AgGrid influence
The Ag in AgGrid is taken from "Agnostic", which is literally translated as " agnostic ". Although I don't understand what it means, the official explanation is: aggrid zero-dependency framework is called "agnostic framework" (( lll￢ω￢)).
In addition, AgGrid is also one of the two platinum sponsors of webpack. As an open source project, webpack's survival basically depends on water drops, oh yeah, it depends on loving donations. The hundreds of corporate sponsors of webpack are divided into bronze members, silver members, gold members, and platinum members according to the number of donations. For what purpose, AgGrid promises to donate $2,500 to webpack every month, second only to trivago Platinum Member.
AgGrid is not an open source company, but the so-called "not open source" of the JavaScript framework is just a copyright warning. The charged enterprise version can also be used directly. I don't know where he got so much money to subsidize webpack.
Componentization and modularization
Components and modules are the same concept in a broad sense, but different concepts in a narrow sense.
Usually components and modules refer to the same concept, which is a design pattern of "separation" and "isolation" . It's just that the component is the front-end concept, and the module is the back-end concept, so the component generally refers to the front-end UI component, and the module generally refers to the back-end functional module. But if the components and modules are brought to the front end to speak, there will be a sharp difference between them. Whether there must be a difference depends on whether the UI and the function are completely separated. Of course, this is a long way to go.
As a front-end design trend, AgGrid began to use WebComponents as early as 2017, but because the entire aggrid is a UI element, the effect and response of componentization are not significant; however, AgGrid has introduced modularization from the 22.X version (2019) Concept, so that users can load functional modules on demand, so that the frame size can be greatly reduced (enterprise full version 2m+)
It seems that the idea of splitting is everywhere, and the entire enterprise could be split into several modules as shown in the figure above. Oh, yes, there is also a "free" community version of AgGrid. It is not recommended to use it, because the really valuable function modules include charts, sidebars, row and column filters, search engine, Excel import and export, right-click menu, index, etc. The functions are all in the enterprise version, and there are only a few uncompetitive basic table functions for the community version (as shown in the figure below). You might as well use other open source table frameworks in the community version.
So the correct usage of AgGrid is to pull all the modules of the enterprise (including all modules of the community) from the official website or GitHub, and then assemble the ones you need into the application (see the official website for the tutorial). However, the generated application is only for our internal communication and use, and cannot be resold, otherwise it will violate the copyright agreement of AgGrid.
AgGrid design pattern
This topic itself should be a separate blog to talk about, but if space is limited, just chat casually. When using AgGrid, don't think of it as a table. Think of it as a relational database. Use the idea of relational algebra to operate it , and you will find that both tables and statistical graphs have the same logic.
Design focus object
The focus object is a custom object that I often use, usually mounted on window.app, but in front of the heavyweight framework of aggrid, it can also be mounted on the <ag-grid></ag-grid> element. The idea of focus comes from the classic operation habit: first select the object and then operate the object . The attribute of focus in my C9X project includes the current focus object: people, classification of people, skills, classification of skills, relationship between people and skills (unit), focused row, focused column. When the mouse right-clicks on a cell, the focus object will be refreshed automatically, and corresponding operations can be performed on the current object in the right-click menu. This is the philosophy of focus.
(To be continued)
Reference
https://jimmy.blog.csdn.net/article/details/89436682
https://cloud.tencent.com/developer/article/1372443
https://jimmy.blog.csdn.net/article/details/103249146
https://cloud.tencent.com/developer/article/1547110