The front end early chat conference, and nuggets jointly held. Add Codingdreamer into the conference technology group, win at the new starting line.

27th session | special front-end Flutter, understand the Web rendering engine | | UI framework performance optimization, 6-5 live in the afternoon, six lecturer (jingdong/help/full idle fish, etc.), the point I get on the bus 👉 (registration address) :

All the previous period has the full recording, the beginning of the annual ticket to unlock all at one time

The text is as follows

This article is the 15th session – front-end early talk report special, is also the early talk 106, from the independent development – alone book share.

1. Opening Remarks

Good afternoon, front end colleagues. Today by me to share how to from 0 to 1 set up external data analysis report “, and I tell you, I this is the book alone, not alone the cloud, so I need to correct, thank you very much for our flower little sister, and our Micky help to our business support vigorously, very professional, also thank our front early chat, Can provide such a platform, so that we can exchange and learn together, and I also want to thank our Scott, the founder of our front-end early chat, for his professional advice and help on this topic, thank you very much Scott.

Second, personal introduction

Now let’s take a look at my personal introduction. Hua Hua has already mentioned that I have been working in the front-end field and data field for a long time. Besides, I am an in-depth user of Excel and have a lot of use of Excel, so I made LuckySheet, an online spreadsheet. At the same time, BabylongJS is the initiator of a 3D engine Chinese, you can learn about it.

Third, the evolution of statements

Anyway, when it comes to making a data analysis report, let’s talk about the history of report evolution. I remember when I was working in the report industry, the functions carried by the report were not so many, the amount of data was not so large, maybe hundreds or thousands of data is almost the same, and users are more in the report for query and download. Query data, downloaded to the local, and then use Excel to further the analysis of the complex, and with the popularity of our big data, and our enterprise data driven decision-making inside such a development, more and more users have not voluntarily report is just a simple query, it may have to take some analysis function, is it? The amount of data on display is getting bigger and bigger. For example, it is not a rare thing to require data display of 5,000, tens of thousands or even 100,000. Therefore, in this context, we would like to introduce our protagonist today, namely LuckySheet.

Four, LuckySheet

LuckySheet is an online spreadsheet based on the Web. It can help you quickly build our data analysis report in the front end. It has four features.

  • First of all, it is open source and based on the MIT protocol, so it has no problem in commercial applications.
  • Second, it is very simple to configure. With one line of code, a fully functional table is generated.
  • Third, the function is also very powerful. As you know, online SpreadJS, vine SpreadJS, and ONLYOFFICE are very powerful, but they are available for a fee, and open source versions of ONLYOFFICE are available only for personal use, and ONLYOFFICE is available for a fee. Open source handsonTable, X Spreadsheet, etc. In the field of open source, LuckySheet is a new force, probably in June or July about open source, but it is actually very long, probably from 2015 to 2016 started, so the number of years is actually very long, what is it called? The old new army, right? There’s a saying, it’s very powerful, and you can take a look at it as we go along.
  • And its efficiency is very high, relatively efficient. It’s okay to display millions and hundreds of thousands of levels of data, as long as your computer can handle it.

Share the outline

According to LuckySheet, an online spreadsheet, there are four sections to share today.

The first one mainly introduces the functions and architecture, so that you can better evaluate whether it can be used in your data analysis report project. Moreover, from the perspective of our second, third and fourth, we introduce some dry products of LuckySheet, and what difficult problems we encountered in the process of making LuckySheet. How do we think, and then how to solve, and in the second, third and fourth plate I try to use 3 points, 3 steps, 3 axe to very simple to talk about the principle, convenient you just like building their own wheels, right? Develop an online spreadsheet by yourself, you can make a reference, so from these four aspects, to make an exchange and share with you.

Function and architecture

First let’s take a look at the architecture. We’ll start with a demo of what LuckySheet can do. This is a 10-second video we made. Support for complex cell displays, inline styles, Alt + Enter line breaks, 385 formulas (very comprehensive), data validation, tables, our sparkLine minigraphs, showing images in cells, screen remarks, and our own pivot table, You can operate according to data like Excel, there are charts based on ECharts, and you can insert pictures, and finally you can verify data, support check boxes, support our drop-down list, support date, ID card, mobile phone number and so on, and you can set it arbitrarily. This is a summary of the overall features of LuckySheet, you can go to experience.

Here is a summary of the function of the system.

  • First of all, the bottom most core thing is computing, no matter what kind of application, no matter what kind of function, no matter what kind of operation is needed to calculate, right? Computation is at our core, and here is a list of simple features, including positioning, formulas, overflow calculation, matrix calculation, and dynamic arrays all come from computation.
  • The second part is rendering. Our inline styles, conditional formatting, are all rendered by the rendering engine and then painted on the canvas to make this presentation.
  • The third is operation. When many users see LuckySheet for the first time, they think it is very powerful and good. Why? Because we have done the details very carefully, according to our level to achieve perfect, operation is almost the same as Excel, user experience is also very careful.
  • The fourth is our integrated application. Above our computing, rendering, and manipulation layers, we do complex application development, like the charts, Pivottables, imports and exports you just saw. LuckySheet has its own import and export, which will be introduced to you next. Of course, the import function has been completed. Now the export function is still under development, and it will be released to you for verification later.

This is an integral feature of LuckySheet.

Four steps of calculation, rendering, operation and comprehensive application, there are a lot of our front-end colleagues, including our back-end there are a lot of friends will ask us in the group, now language finch, graphite document and Tencent document so hot, how do they do this data preservation, do collaborative office, how to do it? How to save data? So I just want to mention to you that we did a save-in-front architecture, and just to show you, this is a save-in-front collaboration application.

  • The database
    • ** Relational database MySQL ** for user information, and some tables of the original data for storage.
    • The non-relational MongoDB database can also be used with PostgreSql. This is just an example, because LuckySheet is jSON-based, it is very easy to store in our MongoDB non-relational database.
    • Memory database Redis. We can have a cache of our data, a service that has these three data.
  • Background services
    • **Ajax ** is used to host general interface requests, as well as our batch save. Let’s say I want to save the entire table, so I use Ajax to save a lot of data.
    • The second WebSocket. You can see the language sparrow, as well as our Jinshan document, Tencent document, each step of the operation will have a save action, is the use of WebSocket operation. For each modification of a cell, the corresponding information of the cell will be sent back to the background, and the background is saved to the database, which is such a process. Therefore, LuckySheet also has such a built-in function, it will send a WebSocket request to the background for each operation, you only need to configure the address to receive the request, and then to the database, so that a collaborative saving function has been made.
    • The third collaborative service. When we edit a table together, each of us can see his own checkbox, which column he is editing, and which cell he is editing. LuckySheet also has an application for this. While editing, it will provide an interface, highlighting is your interface with several people editing at the same time will have such a prompt.
    • The fourth is a service analysis operation that we think is quite innovative. GoogleSheet also has this service, of course, which is an Excel function, and you can imagine that it can call background services, return the results and display them in a table, including some of our complex clustering algorithms, classification algorithms, text analysis algorithms, all of which can be used in background services and return them to the foreground. And a more useful, such as in the spreadsheet I enter the date and the stock code, I use formula quote, in the background to get the price of the day, you can return to our front desk, on the stock price of such a display, including in the interface can be a variety of drag and drop, show the stock’s closing and opening price is ok.
  • Front-end applications. This is one of our big ones. As I mentioned earlier, LuckySheet is not based on the three frameworks that we are currently using, because it started in 2015 when jQuery was very popular, so the architectural stack was HTML, CSS, and jQuery. Almost written in native apps, not based on the big three frameworks, and there is no problem with the big three frameworks now. On the right is our LuckySheet architecture, rendering, computing, integrated application and data preservation, thus forming a LuckySheet front-end and back-end service architecture.

Nested formula calculation & coloring

Let’s take a look at the features of LuckySheet. Here is the calculation and coloring of a formula. It can be seen that the formula we support is very complex and nested layer by layer. If your machine allows you to nest 100 layers of IF or any formula, there is no problem. And it is the inside of the cell and text can be staining, red text rendering into green, with the same to Excel, rendering, the reference cell will be highlighted to constituencies, districts can continue to operate, such as drag and drop, the parameters of the company will with the change, agree with the operation of the Excel almost.

Import Render & formula import

On the right is an Excel, a beautiful table. Import into LuckySheet through the Import function of LuckySheet, which generates the format on the left. Almost the two sides look exactly the same, which is why LuckySheet has done a very detailed job, making a match with Excel, the basic rendered style is exactly the same, and the formula can also be completely rendered. Sum F7:F41 is a rendering of the formula.

This is an Excel, you can have a look, just like we talked about in the picture, go into our Demo, import the Excel, you can see if it’s exactly the same, and it supports formulas, this is LuckySheet import function. Export function is under development, import now supports very complex formats, including rotation, line breaks and inline styles can be fully supported, can be trusted to use.

PivotTable

This PivotTable feature, which we didn’t find in Grape City, including ONLYOFFICE, is probably the first plugin to embed this feature in a spreadsheet, which allows you to do an analysis of the data without having to download it. Tens of thousands of data query after you do an aggregation on the web page, I can probably know it’s such a data statistics, don’t need to download again, the function and we had a data analysis for OLAP functions have the same effect, then I will be with you for further introduction, this is our function and architecture of the show.

7. Core algorithm

So now we’re going to talk about the core algorithms, and with that out of the way, you might want to build your own online spreadsheet. I don’t want the wheels I already have, my own writing is even better, I want to make my own wheels, OK, no problem, we can help you here. First of all, let’s talk about LuckySheet’s core algorithm: formula parsing and formula linkage update.

Basic idea of formula analysis

What is formula analysis? At the top we have a simple formula SUM(A1:B3, E5)+1. This is a very simple formula calculated in Excel and LuckySheet. The blue is the name of the formula SUM, the green is the parameter, and the +1 is the arithmetic operation, which is actually a pseudo-code. How to convert the pseudo-code into such a formula that JavaScript can recognize is worth discussing. In fact, this is different from our Java language, Python language, How does our JavaScript get parsed into C? There is a similar logic to how to run at the bottom.

Here’s an idea. The first step is to generate pseudocode into our abstract syntax tree. The abstract syntax tree is such a tree structure that represents the full parsing state of the formula: +1 and SUM. SUM is followed by two cell arguments, and once you generate such an abstract syntax tree, you can see that the last line generates our executable JavaScript code. The reason WHY I’m showing it as _.SUM is because Lodash, which you may have used, has a SUM function, which means that we actually have to define the SUM function behind the scenes. LuckySheet supports 385 functions, In fact, we are a function one by one it has been implemented in the background, as long as we reference the corresponding string to the function is OK.

In SUM, we have converted the cell information into a two-dimensional array, since A1 through B3 are two-dimensional arrays, and the second E5 is a cell that refers to a number, so the problem that SUM solves is that no matter how many parameters are passed in (whether it’s a two-dimensional array or a one-dimensional array or a number), Add all the numbers together, get a number, and then add +1. Then we use our Eval function (which we all have in JavaScript) to get the result.

thinking

This is a basic idea of our formula parsing, just a relatively simple formula, this complex formula generated our abstract syntax tree, very complex. You can think about it, you can see how to do it, and I’m going to refine it for you, is how to generate an abstract syntax tree, and we’re going to plan the problem to how to generate an abstract syntax tree.

Key points of formula analysis

Two key points: the first is lexical analysis and the second is grammatical analysis. These are actually two general steps in the deep abstract syntax tree.

How do you parse it first? We need to split our string, split letter by letter, read word by word, according to the keyword, what are the keywords? If you look at the formula, the key words are: parentheses, commas, double quotation marks, curly braces, and single quotation marks. According to these keywords, to identify our Token. Token is the name of the formula, that is, the name of the function, and the name of the parameters in the function, as well as the constant and operator addition, subtraction, multiplication, division and mod. There is such a Token generation, and the lexical analysis stage is to generate such tokens.

The second step, parsing, is to assemble a syntax tree, because lexical analysis only recognizes the Token, but does not assemble it into a syntax tree, so the second step is to generate an abstract syntax tree through parsing. The Token is passed in first. The point to be noticed here is to avoid the influence of parentheses, because in daily calculation, parentheses have a great influence on the calculation order, so we need to convert the infix expression into the suffix expression.

What is an infix expression? For example, 1+(2+3)×4-5 is an infix expression, and the infix expression is the state of such an expression that we learn from everyday mathematics. It requires parentheses. Basically, it is difficult for the machine to calculate according to this expression. We need to convert the infix expression into our suffix expression, which is called the technical term inverse Polish. You can see that the form 1, 2, 3 + 4 x + 5 -, this form may be strange, but the machine is very comfortable to read, think of it as a stack: on and off the stack to calculate, will be very convenient, so these two steps constitute the key to generate the formula analysis, if you are interested in digging in depth. I may not go into too much depth here, because I can’t go into too much depth, and I don’t have much time. You can also contact me for private communication, and the formula analysis part is over.

Formula chain update

Imagine that the data of a cell in Excel is updated. Does the cell associated with it need to be updated if it has a formula? Because it refers to my cell. It can be seen that cell B1 in the figure, if cell B1 is updated, it will affect formula 2, Formula 3, Formula 4 and formula 5. Why? Formula 2 and 3 directly refer to B1, but Formula 4 refers to Formula 2 and formula 5 refers to Formula 3, so there is such an update relationship of company chain.

We need to find out formula 2, formula 3, formula 4 and formula 5 through B1 and specify their order. Formula 3 should be calculated in advance and reported to Formula 2. After formula 2 is calculated, formula 4 and then formula 5 should be calculated in such a sequence. If I do not follow this order, for example, I first updated Formula 4, but if I updated formula 2, it would be wrong to determine whether the calculated value of Formula 4 is correct. Therefore, such an algorithm is necessary to determine such an updated relationship, which is a three-board axe for our company’s chain update.

Key points of chain calculation

Formula storage format is specified. For example, if there are 1000 cells, there are 3 formulas, and these 3 formulas are scattered in the 1000 cells, and these 3 formulas also need to be stored in the global, why? Because for the convenience of accessing this formula every time, I don’t need to go through the 1000 cells every time to get these three formulas for a calculation, so I also need to save a copy of the global. The nice thing about having a global is that I can specify the order in which I insert the formula, so when I do the calculation, I have the order, and when I update the formula, the order is still correct.

The second step is to build the formula tree. So this is the last in, first out, out of the stack, in the stack, which you’re probably familiar with, what does it do? Generate a parent-child relationship between functions, do you also use me, you reference me, you are my son. If my child has a reference to a child, it’s a grandchild, so it’s going to be this tree, this parse tree, and we’re going to keep going.

The third step is to use depth-first traversal of the tree to handle multiple calls. Imagine, at the root of our tree, is there no node referring to it? It computs first, and then it feeds the data up to the next level, so that the data up to the next level is guaranteed to be accurate, so it’s going to go through the tree with a depth-first algorithm, and then it’s going to continue, and that’s the whole point of chain computing, and that’s the end of the algorithm.

Our two very important points are: the analysis of formulas and the chain calculation of formulas.

Eight, rendering

Rendering is also very important, and we’ll talk about rendering after computing. Rendering is also very special in LuckySheet. In order to display a large amount of data, it adopts a lazy loading feature. Instead of loading the whole data all at once, it shows the whole data. So all I’m showing you is these 100 lines, as many as you can see.

rendering

We chose Canvas as the Canvas for rendering. Why Canvas? Because it’s very efficient, it can keep in sync with a style like Excel, unlike DOM which is a little bit harder to control, Canvas is a little bit easier, that’s why it’s chosen. You can imagine that if we choose Canvas, does it mean that we lack interaction with users? If the user selects a cell, how do I know he selects a cell? Because it’s not a DOM, it selects a Canvas, and I don’t know exactly where, so our rendering is also computationally based, which means the user clicks on a position on the screen, and we take the position of your scrollbar, the offset of your scrollbar, plus the offset of your position in the point on the screen, Also consider deciding which cells are in your point and which cells render exactly the same position for you, also based on calculation.

We’re using binary search here. Two-point search is also a relatively simple algorithm, the Internet has been very common, but it is very efficient. A million lines of data to locate a cell, to locate the cell you click, can be over in a dozen budget times, very efficient, so our rendering is based on Canvas lazy loading and calculation.

Word wrap

Since the rendering is talked about here, is it necessary to talk about the rendering action of a certain cell? Because cell is a basic unit that constitutes the table, so here we focus on the rendering of cell.

The measureText method is used to measure the width and height of a cell. The measureText method is used to measure the width and height of a cell. I found a penny on the side of the road and gave it to the policeman. We found in this sentence is not beyond the first word, not beyond the second word, has always been to “give” beyond, we back to “hand over” the width is within the cell, so the “police’s uncle” this character in a line to display, the calculated results, it is our simple a word wrap a design, Line wrapping can be performed automatically based on user input.

Text rotation

You can see that our text has height and width, so the next thing I want to talk about is our text rotation. The text rotation is like this: For example, I found a penny on the side of the road. Originally, it did not select the task, it was a horizontal and horizontal action, but we rotated the alpha Angle up to get a slanting text style. After getting this style, you can see, what is the key point of rendering it? We want high precise calculation of its wide, wide high after rotation, we met a hole here, then we calculate the blue area wide, high, because we may not consider so much at that time, there is no accurate calculate the text of the width is high, so has led to the deviation of its location, not so accurate, tell its height, judge shows that there are problems.

Later, we found that the height of a text is very limited compared to its width, which is an important factor affecting our width and height. The correct width and height of the entire rotation should be determined according to our beta region, so we directly give a formula: The width of the rotation is equal to the width of the rotation times the cosine of a plus the height of the rotation times the sine of a, and that gives you an accurate calculation of the width and height.

Text rotation + line feed

Next comes a complex introduction to such a rendering. Imagine what would happen if the text was rotated with a line break. The earliest Excel is a people feel very common action, rotating and newlines generates a style, but I do not know to have people to consider how to do, how to do a format, so we spent a lot of cost to do this thing, because pit very much, consider the steps about 18 kinds of results, We wrote them one by one, which was very troublesome, and I’m only going to explain a relatively simple case here.

First, look at the height of the rotation on the left. After the rotation, it exceeds the height of our cell. It has exceeded the height of our cell since “road”, so we need to perform a line break calculation on it to produce the result on the right. “I am in the road” line, “border inspection to a” line, “penny” regenerated into a line, get such a result, how to get such a result? You can imagine, it’s rotated a, a is rotated by an Angle, let’s restore it, don’t rotate A, so look at the middle “I found a penny on the side of the road”, it’s a normal rendering from top to bottom.

We find that the process is like a rotates and gets the result on the right-hand side, what’s the key point here? How do we get our offsets, from edges to fractions, what’s the relationship between them, and how do we compute that? So we’re going to give the formula directly here, and we’re going to set the height “I’m on the road” to H1, “Border check one” to H2, and “Penny” to H3. How much is the edge offset? It’s the height H1 divided by our tangent of a, which is offset. How is the penny offset? It takes H1 plus H2 divided by tangent of a to get offset, so you get a structure like this and you rotate by this Angle, and you get a final result, and that’s our line feed plus rotation operation, which may seem abstract, but it’s pretty dry stuff, so you can take a look at it.

thinking

Let’s think again, for example, we carried out the text rotation, and carried out the newline, and we also added in-line style, that is, we each word size, thickness and italic, italic degree is not the same, what will cause the result? You can think about how this thing is generated, and you can communicate with me after you are interested.

MeasureText method

Here’s a little bit about some of the more interesting methods we’ve come across for rendering, just to refine it. Look at measureText, a method that measures the height and width of text. It has two more important properties, actualBoundingBoxAscent and actualBoundingBoxDescent, These two properties determine the height of the text. This property was not available before Chrome 51, when calculating height was a pain. It was added after Chrome 51. At that time, we used THE DOM method to measure the height of the text before rendering, which was not as efficient as it and had problems. It was a compatibility processing.

So let’s go back to these two properties, and these two properties are really interesting, and it’s rendering with the textBaseLine property, and you can see that the baseLine line is the red line.

  • By default this line is rendered near the bottom of the Abcdef letter, but GJP as you see them have tails and are well beyond the baseLine They add up to the height of the text.
  • If Top, since the baseLine is rendered along Top, Ascent is 0 and Descent is the overall height.
  • If it’s Bottom, align the Bottom. Descent becomes zero, and Asent is the whole height.

This method is very interesting, but very efficient for calculating height.

Clip method

The second one is our clip method, the Canvas method is very effective, it can confine the content to a certain part of the rendering. Imagine that the cells will affect each other when drawing, but once you use the clip method, you can precisely limit the cell to the range that it wants to render. If you use the clip method, it will not affect the next cell.

Rendering performance optimization

Although we introduced the measureText method, it actually has an impact on performance. When the LuckySheet Canvas is updated, it will render the page dozens of times for every scroll, resulting in a scrolling effect. MeasureText is not used much and cannot be used repeatedly. After repeated use will cause a great waste of performance, will cause lag.

Second suggestion on the cell delay the release of information, that is to say, for the first time in scroll to a cache of cell and text, namely to a cache size, width and high position, the process of rolling, first not release it, etc. The user may stop rolling, we in the release, it also ensures the efficiency of ascension.

The third is deep copy using Web Workers. So if you think about it, if you have a million cells, when you do undo and redo, sometimes you use deep Copy, and when we do deep Copy, we compare a lot of deep Copy methods that don’t work, they’re slow. Even the highest one is slow, because one million cells are too many, so we use Web Worker to carry out deep copy and make it run in the background. Basically, users can operate smoothly in the foreground, thus avoiding such a perception.

The fourth is to avoid using putImagingData. DrawImage is much better than putImagingData, so be careful to avoid using putImagingData. These are some suggestions for you from the rendering side, and the rendering side is then covered.

Pivottables

If you want to do data analysis, you can’t avoid the introduction of our Pivottables. It seems that we are the first one to have such a function in spreadsheets, and It seems that GoogleSheet has one, but I haven’t seen any other documents, so we have made this one, and we still have some experience.

What is a PivotTable

First we need to know what a PivotTable is. Let me introduce you, because a lot of us in the front end, are in the IT industry, there may be some misunderstanding of the product, there may be some misunderstanding of the product, just like the black box, I will open the black box for you to know what pivottables are. It is the user interface to operate, statistical analysis of data such a function. As you can see, the one on the left is the raw data and contains 4 columns, which are actually 4 fields: Students, subjects, gender and grade, if we are in a pivot table, select the student and score, score for Alex how much is the total sum will be students, Joy, how much is the total score and Tim how much is the total score, get such a result, and make a good analysis, how do you do that?

Process operation

In Excel, in LuckySheet, if the raw data has four fields, it is put aside as four optional fields, just like the functional area on the right, we put the student in the row, we put the score in the sum of values, So it produces a view or table of such a summary of the student’s points.

The columns and rows represent latitude, and the values represent indicators

What happens if we take it a step further and we put subjects in the column? You see our line or student (third), but we’ve increased our column by column, the form opens, the subjects had appeared in the column header a lot, to generate the format, so it is to choose the subjects, students, grades after the creation of such an outcome, you can think about it, how to produce such a format, How do you generate such a format?

Train of thought

To refine this, remember that we chose three fields, and actually the score has no effect on the total. We only have two fields, student and subject, which have a combined effect on the summary. There are several combinations: green, blue, orange and yellow 4 combinations, students plus subjects is a combination, Alex English 108 points, Joy English 96 points, forming such a combination.

The blue student represents the total score of Alex, the orange represents the total score of our subjects in English is 296, and we get such a summary information. Finally, the yellow is the total data of the whole table, and all the columns and columns add up to 1687. So you see that it generates a combination of four kinds of statistics, which we can think of as dimensions, which is a common term in data analysis today.

Multidimensional data cube

As dimensions, the important concept is how to know how many statistics the table will generate, and we have now chosen two dimensions to generate four statistics. If I have 3 dimensions, how much should I produce, and if I have 4 dimensions, how much should I produce? So we give the answer directly here, for example, if we chose the four dimensions of student, class, gender and subject, we get 2 to the NTH power to produce 16 combinations. As long as the data in these 16 combinations are summarized and then combined, we can generate such a way of presenting data in our PivotTable. As for how to present data, our front end personnel are very good at it, I won’t go into this part. The content of this piece belongs to such a knowledge point of our multidimensional data cube. In data analysis, such a concept will be involved in many cases, including the popular Kirin in our market, which uses such a data combination and dimensional combination algorithm.

Share summary

The above is a few blocks of content we share, here to share a summary, you have to do a good data analysis report, the first to solve the four levels of computing, rendering, operation and complex application problems. You can make a good data analysis report, of course you can also directly use LuckySheet to make, now we have 2k such a number of likes on Github, also hope to move you rich hands, give us a like.

communication

You can also enter our official communication group, add our small series of wechat to continue the discussion, you can scan the code.

Good book recommendations

Finally, I would like to recommend a book. After so much rational thinking, we should change our minds and think about liberal arts. Reading books on literature and history will give you a psychological baptism. This book “The Mirror of Wisdom” is also a familiar book, why is it good? I will not expand here, look at the words on the right, the rise and fall of the past life, the current gains and losses, the focus is on gains and losses. What is this gain and loss? Win will lose, lose to win, you have to insist, just like our work now, adhere to their own work, adhere to go on the road in our front, become a god, make big money, fortune, is such a logic, so give this book to you. Finally, thanks again to Scott, thank you for the early chat platform, today I share here.

QA

What are the key points of grammatical analysis and lexical analysis?

The key point of grammatical analysis and lexical analysis is the key words that I talked about earlier. What is the key character of our pseudocode? As we have now such a formula in the Excel, it is the key word parenthesis, comma, single and double quotes, as long as give our keywords to identify good, can through the keyword segmentation, our Token (id), including the name of our formula, parameters, some operators to identify, Such words are a key point of lexical analysis.

Then when it comes to parsing, the lexical side has the tokens ready. You cook the dish, this material is ready for you, grammar analysis is cooking, combining the tokens, to generate a tree. Is me just when it comes to the generation of a postfix expression of such a way, to carry out the assembly again, then generate a tree, was combination we such an abstract syntax tree structure, created such an abstract syntax tree, very good to resolve our formula, of course you also can directly read our source code, and then take a look. Ok, thank you.

Don’t forget 6-5 PM live oh, click me on the bus 👉 (registration address) :

All the previous period has the full recording, the beginning of the annual ticket to unlock all at one time

Look forward to more posts. Give it a thumbs up