Front-end early chat conference, a new starting point for front-end growth, jointly held with the Nuggets. Add wechat Codingdreamer into the conference exclusive push group, win at the new starting line.

The 14th | front-end growth promotion, 8-29 will be broadcast live, 9 lecturer (ant gold suit/tax friends, etc.), point I get on the bus 👉 (registration address) :

The text is as follows

This is the ninth online document, the front end early chat 62, from Alibaba Cainiao’s front-end technology expert – Zhuo Ling sharing a brief edited version of the speech (the full version of the demo, please see the video and PPT) :


To introduce myself

Hello, everyone. I am Zhuo Ling from Alibaba Cainiao. I have years of experience in data development. Currently, I am in charge of cainiao’s related business and application experience direction. I am very glad to be here today and to meet you. Thank you again for your attention.

Today we are going to talk about the latest text block technology. ** So the business of Cainiao is actually a digital technology company combining traditional and Internet. Why is it so? Because the business of Cainiao is actually quite complex and diversified, although there are a lot of systems in cainiao, for example, we have warehouse distribution system, including some middle and back end systems. As a production-oriented company, for example, we have a large number of offline storage and transportation staff. At this time, there are actually a large number of personalized production system requirements, which often need to be supported by the document system.

For example, we have some production scheduling, labor force registration and trouble list collection, etc. At this time, I think the form or document system can play a very good auxiliary role in these large warehouse systems. So today I want to share with you in the field of WebExcel, we are in the rookie business how to explore, how to do some system integration, I hope today’s share can bring you some inspiration.

Why Web

First of all, I want to throw a question, is why do WebExcel, or we have what kind of understanding of WebExcel positioning?

First of all, let’s take a look at these questions:

  • What are the advantages of Excel?
  • Who does Excel use for?
  • What does Excel help the business?

With these questions, I hope that you can have more understanding of documents or WebExcel. Not only can you see an Excel, which may be a magic tool for office, but also can you understand the concept of Excel more thoroughly.

What are the advantages of Excel?

First, Excel is a ** database. ** A cell, for example, can be a visual model of a natural database. At this point you can store or process almost any kind of data in Excel. Second, ** is very fast. ** By inputting some formulas equal to three and so on, can quickly deal with some work on some requirements.

Who are the objects that Excel uses?

In fact, many people, including me, in our fledgling business, such as operation, finance, technology, design, including production management personnel of these businesses, almost every group can use it.

What does Excel bring to the business?

As I mentioned earlier, although cainiao has a number of excellent systems, which are specialized in a certain industry, due to the complexity of the system, many of them are not suitable for some very popular functions, such as labor scheduling. Many need a large number of developers to do some systems, which is not in line with the reality. At this time, can we use some Excel lightweight solutions to do a fast systematic way? For example, customized some rapid data analysis, or some production systems, is very convenient to meet some of the work of personnel, this is how we think in the field of Excel: Excel is not only office, but more about how to empower business. So with this question in mind we thought about WebExcel, here are some cases of newbie business in the web field, you can take a look.

Second, rookie business WebExcel opportunity point

The first case is that Cainiao has many branches, one of which is the central application of a certain branch. Every time to analyze the data, we need to pull the data from the report platform, and then pull the data to the local Excel for analysis. After the analysis, a report is formed, and then the screenshot is sent to other operation students.

The second case isA small second student in a warehouse, the daily work is to obtain data from the business platform, export offline data, and report screenshots to superiors. In fact, some of these cases pull down offline data or some shopping data, form them locally, and then aggregate them for some analysis, and then distribute them to other students for production or operation activities. These are some opportunities of WebExcel in a large number of rookie businesses.

Logistics scenario

To sum up: Cainiao in the business, logistics scenarios can be summarized into such scenarios, such as distribution domain, storage domain and transportation domain. There are some such as some management systems in the background, it is actually some WebExcel opportunities. This allows us to solve a large number of business scenarios with WebExcel.


system

To sum up: the system we require to build can meet the needs of thousands of storehouses or thousands of faces. Excel also represents the digital transformation of a production system, that is, a process from offline to online. Finally, how do we collect some data offline and send it to students? There is a communication process, which is a data flow of communication. In this rookie business system (WebExcel system), we need to have some of these capabilities.


The efficiency of

There are two requirements for people: there are a large number of workers, such as those in storage, such as those who adjust goods. Requirements to be able to quickly get started, the operation can be fast, to meet the previous daily traditional operation mode. Therefore, the transformation of Excel to WebExcel is very suitable for some business products of Cainiao, so we are also trying to do some platform ways to solve some offline business scenarios.

Third, business core pain points

What is the problem that our system, or webExcel architecture as a rookie, is trying to solve? There are three main problems:

  • The first is the efficiency of interpersonal communication, how to better cooperate.
  • The second is the problem of data coordination management between people. ** How to manage the data and how to store the data after the communication between people.
  • The third is the coordination between ** data and business platform. ** How do I put the data back into the backchannel business system after I collect it? For example, in the scheduling system and labor force system, if some data are registered, we can hook up with cainiao’s financial system and return these data to the financial system as part of the settlement system.

This is a good combination of our offline data collection and cainiao business data, which are some pain points of the business. So how do you do that?

“New

Here is a small video, you can have a look, mainly combining the nail robot, nail micro application, the main way to upload, through a process from offline to online. There is a collaborative capability, the precipitation of data, how to turn the collected data into a system, and you can see that through the one-click import of data, through the formatted output, it becomes a system. Later, I will briefly talk about some difficulties in multi-user editing collaboration, including some thoughts on Smart system and form technology. You can see that many of the operating habits are very similar to WebExcel. If through some drag and drop, drop down, address field, personnel field, through the form technology integration into WebExcel, make WebExcel more operational, data can intuitively express the meaning of line to line. This is where the newbie deposited it“NewSystems that will help businesses transition from Excel to WebExcel in the future.

Communication is collaboration, collaboration is creation

In fact, the above can be summed up in 10 words: communication is collaboration, collaboration is creation. **

Communication is collaboration

The meaning of communicator collaboration: in the process of communication, in the way of daily work, we precipitate data, which is a process of communication. For example, if you ask two operation students what activity I am going to do today, could you help me to deposit some data? Our way through some communication at this time, now we are done by nailing the ecological way, just when it comes to nailing of application of nailing is a robot, is a communication from the two aspects, and then help to solve a fast data online offline data of a process, we call the process of communication or cooperation. Of course, communication means collaboration, and multi-person collaboration and data distribution. At this time, offline businesses can be quickly transformed online.


Collaboration is creation

The second collaboration I mentioned is creation. What does creation mean? I precipitate the data into a system, and the future data of this system can be connected to the business platform. Our collaborative creation concept is to solve the business data management and offline data docking, some capabilities of the business platform. With these capabilities, we can better turn these data into business platform inside. So what we have to do is 10 words: communication is collaboration, collaboration is creation. ** This is a rookie thought in Excel.


Nail nail work communication tool

Let’s look at what the main functional architecture looks like.

First on the left: First is an import/access/create process. At this point we can import an offline Excel. Access is some API, or third party system, that means access is business. New is to create a blank, and then you can start from scratch to collect some data. With these capabilities, dingding’s new way of working to carry out two aspects of creation: the first is communication and collaboration, the second is collaborative creation.

The first communication is mainly about creating A distribution function. You can imagine that if you want to collect A piece of data, you may inform students A, B and C to help you do some data collection. For example, during the epidemic period, students may clock in every day, such as health problems. At this time, we can use some distribution capabilities to help students fill in some data better, which is called data collection.

The second is the creation of the system, we are specific to do some business management, how we combine these data management. How some data can be made into a report.

The third one is how to embed or provide integration to third party systems after we have these data. At this time, we can go from the far right, in fact, we can call it two: one is permissions, one is data services. The main solution of permissions includes those permissions for communicating and editing just now, as well as some authoring time editing system editing permissions. This time to create that is to say many people communication edge, the whole line to close this process. Data services mainly for the third party system to provide a data service ability, we can provide some data such as local perspective analysis, evel, intelligent data analysis chart, there are also some share these data by means of service, can let the third party system in the document system of the precipitation of these data, To service to the business system, this is the general function of our new platform.


SMART mode

A transformation of this schema is actually to solve the concept of a heterogeneous table to an isomorphic table. What is a heterogeneous table? Before, A lot of data, for example, I took A piece of data from system A, A piece of data from system B, and A piece of data from offline, A large amount of data scattered in various systems, we call it A heterogeneous process. So what we’re going to do now is we’re going to take this cross-purchase data and turn it into co-purchase data. Here we can see a process of heterogeneity, transformation and isomorphism, that is, some offline data tables are imported, some front-end analysis engines are used, and some forms are processed, and the data is transferred to our Smart system. In this we through some systematic solutions, some precipitation of data, to provide users with a system-level solution. In this way, the heterogeneous table is changed into an isomorphic table, and the offline table is changed into an online process. This is the process that our Smart system will continue to deepen in the future, helping businesses to carry out a digital transformation.


Technical difficulties: multi-player collaboration

I also mentioned a technical difficulty just now, so you can take a look. I have done an edit here and synchronized it to another user. How to do this technology is also shared here. The technical difficulties are actually to solve three problems:

  • The first is that all operations can be coordinated.
  • The second is the timeliness of operational transmission.
  • The third is consistency of operational data.

These three are the most important three difficulties in the rookie document coordination, how to do it? The main difficulty, you can understand as an OP concept. What is op? An operation, such as deleting a piece of data, inserting a piece of data, changing a text, and changing the type of a cell, is called the op of a cell, which is the OP of a table. How to do the table op? For example, if there are two users operating at the same time, the op of a user is that he will maintain an OP locally, and then the OP of all users will be cached locally, so that he will know, I now operate the OP in all of the inside is how a situation. To be specific, it will first initiate an op request for an operation. At this time, we will do some service virtualization operations with the back end through socket, and another way is that we will broadcast to all our users.

For example, let’s say I want to insert a cell. First I send a request telling the back end, at which point the server will pass some permission validation, pass some processing of the op by the server, and then return an ACK. What does Ack mean? Is that you make these requests, there has to be a correct return. It’s not like some other system, like if I do a command, maybe the back end thinks it’s enough to just return 200. At this point I feel it is unreliable and must have the back end return the concept of an ACK correctly. At this time, the ACK may contain some time stamps, why timestamp? And I’ll talk about that in a second, it’s going to return some timestamp, a correct result. After this, the user is deemed to have received the correct action. When the insert is successful, it reports user A’s OP to all op queues. At this point, user B comes in, let’s say he’s just doing something, user A just added A cell, user B just deleted A row. How do you do it at this point? Who started first? When I said time sequence number, that is, ack is a concept of two time orders.

First, user A will also broadcast A piece of data to all users in the document. After all users listen, they will perform A sequence and timestamp comparison. When the user finds that the ack or timestamp he’s going to operate on is less than the time he broadcast, what’s the first thing we do? I’m just going to put all the OP’s of user A in that document and play them once, just like A video. Execute some of user A’s requests to the queue, and then he will put his own OP through some of the server’s requests through the request, and then receive an ACK. If he receives and fails, he tries an op operation again. So it’s going to take all of these pairs of queues, and it’s going to do a queue, and it’s going to do an ACK and it’s going to form a nice layer of links, and then everybody can feel that all the queues are consistent, that the operation data is consistent. All the operation can be coordinated, this is what we are doing the op thinking to some technical difficulties, you can also to our training platform to experience, actually we made a lot of current op some test, its accuracy is very high at present, its transmission mechanism is also very high, because we are now back end these very high performance. I’m just going to show you that. Take a look at one of our multiplayer collaboration technologies, and you can get this picture, and I think it’ll be available later, so you can take a closer look at it.


Product construction technology architecture

The second one is a Smart system, or an interpretation of the whole idea of how we do Smart systems. What is one of our technical architectures for this system? First let’s look at our base. The basic thing that you might be interested in is what is the engine behind this?

We now have two engines: a table engine and a form engine. Engines today is about the form, form engine is now outside a commercial open source engine, in the future we will just stay behind classmate also is talking about, do nailing and language, they are doing some form at the bottom of the engine construction, and the future we hope to be able to use form engine is unified, ali an underlying form engine, And then on top of that we’re going to do a little bit of engine building up, and you can see in this we’re doing a Smart system concept primarily online. Smart system is divided into three states: design state, operation state and data state.

The first is design state and we’re trying to figure out how to structure a data.

The second is how to make a running data. Design state how to automatically parse fields, table parsing, model generation, which we also do some form engine into some, such as whether to fill in, what is the field type, will carry out some extensions. What do we do when we give it to someone else? For example, model rendering, field verification and permission verification, which includes some abilities in communication and writing, can help businesses better do data transfer, communication and sharing in Smart system.

The third is data state. After having these data, HOW do I do the precipitation of data ability. More we want to have these data, in our own system precipitation of a set of data analysis ability, external data integration, open to the outside world.

Smart system refers to how to put up the data in A collaborative, such as do some access control, collaborative editing, data distribution, tables, collaboration, and some data distribution technology, said just now I put the data distribution to A classmate, the classmate B, C classmate how to distribute, and some access control. With these two systems, we call it as a technical capability architecture of our entire platform, office Collaboration plus Smart system. Just now, we come back to the above 10 words: communication is collaboration, collaboration is the creation of such a process.

The outermost is capability integration. ** just mentioned how third-party systems use some of our data, including how to integrate with Dingdingecology. We mainly use dingdingecology’s organizational structure, permissions and development ecology. There is still some work to be done in the future. For example, our financial system can pass some approvals, from A to B, from B to C, and we can choose some customized work ways to better serve our group. This is A process from offline to online, which is A technical framework for our product construction.

Communication is collaboration, collaboration is creation

So look down the new rookie of the case is mainly to solve three aspects of the problem.

  • What was the previous development perspective in terms of code development? We need some codes, or technical students to do some research and development. At this time, there will be a problem of slow response speed and high delivery cost. Now we want to solve the business oriented products without codes. In recent years, including this year, ali’s thinking of no code is in hot progress, whether we can also solve some business systems through such a scheme of no code. What’s our slogan? As long as you know how to use Excel and don’t know how to program, you can get started quickly. This is our original intention. Here we want to build this inter-system capability through workflow, cross-order operations, data analysis, and architectural permissions.
  • In terms of work efficiency, we want to solve the business system of the novice to reduce some repetitive work. For example, every day, the staff guide the data down and then distribute it. At this time, the work content is very repetitive and the efficiency is very low. Can we have a very good message notification or working mode? Combined with Dingding, we are easy to learn, have notification ability, account permissions are very safe, and interaction is very simple, which is from the aspect of energy efficiency of employees.
  • In terms of data assets, the offline data was exported and distributed before the system was unmaintained, but what should we do when a student might quit? Maybe this part of the data will be lost, or a year later, I forgot that there is such a data, can we combine these data with the system, connected to some of our current business systems. At this time we have to try to think, is how to use some of our technical means to do a series of systems. Let data no longer become an island, this is also gesin to solve three problems, that is, our rookie document system is WebExcel system to solve three problems. From code development, to productivity, to a management of data assets.

Interconnecting service data analysis in multiple ways

Next, I would like to talk about a way of data docking. The above points mainly solve a problem of office work or collaboration. In fact, I think the last connection of the data, which I think is by far the most important, we’ll talk about it a little bit more. The first one is how we can service data to business systems. We put forward three concepts, and there are three ways:

  • The first one is a connection mode of service interface. Through the service interface mode, I provide an interface and AN API to enable data to be processed and analyzed and shared.
  • The second is to have a third party system embedded so that we can provide an SDK-enabled concept of a front and back end. The front-end form provides an SDK, and the back-end can also provide an SDK, so that the third-party system can easily enjoy the business system, and the form system or the document system can be embedded in the third-party system to help him solve some business problems.
  • Third, we may directly provide some data source docking process in the future. For example, if some students want to do some private deployment, at this time, some data can be directly connected to the past, this is one of the three ways of connection process, here you can also see how to connect.

The SMART system connects to the service platform

The main thing we offer so far is first two pieces: oneData services, one isThe SDK as a service. At present and in the future can be slowly provided to everyone, or to the rookie business system inside. The first solution to the data service, that is, we need to provide some field model mapping, configuration listening (I add data, delete, I can open these capabilities). The second is the opening of data service, that is, the SDK of API. Just now, I mentioned the SDK of the front and back ends. I can enjoy the table by finding an SDK for the front end, and I can enjoy the adding, deleting, modifying and checking of the back end by adding an SDK. Integrate the new Smart system into the business platform. From the perspective of business, it is a process of how to transfer offline to online, and how to send data back to the business platform from our system.

Embrace WebExcel

So having said that, let me summarize or give you a glimpse of the future. As mentioned just now, our goal is to form offline data, or some heterogeneous data, into a process of co-purchase or online transformation through a new grid platform. In this process, we need to solve these five categories of problems, that is, to upgrade our communication skills.

At present, our future is to fully embrace peripheral Excel. Literally speaking, we are mainly the future development direction, which may be the following 5, you can have a look.

  • Nailing. In fact, nailing should be more terminal, such as PC side, H5 side of course, the basic need to do behind, there are some such as micro applications, create collection, view reports, these capabilities will be in nailing inside to do a new way of working. We wanted to break the concept of pinning down a bottleneck in browser access before, say, we built a system.
  • As a service. Servitization is how to better integrate data into the third-party system. On the one hand, for example, some services of our system, and some small and beautiful things, such as import and export, right? You may also do a lot of import and export concepts in your daily work. Can you do all these small and beautiful things through some template drawing and servitization?
  • The business. We can first of all, the main or joint business, what we do must be to service business, so what we do in the future still can pass to some business associations, such as some business data management, business data, data to come in, can you get data from the business system, make heterogeneous with purchasing, And some business data analytics,
  • Platform. I talked about how we’re going to be a platform, or we want to be a platform in the future, open it up so that people can enjoy WebExcel and try to do some business in addition to office.
  • Intelligent. There are a lot of points, such as intelligent analytical data, the future, for example, we do some enterprise, such as invoices, templated quickly, actually can do, this time our future will further explore towards many some intelligent, this is our new future grid, including novice fully embrace WebExcel a thinking here, Will further accelerate a development like WebExcel in one of the five major directions.

User experience – Good book recommendations

Finally, I would like to recommend a book, because I am in charge of some business related to rookie, and also some experience application direction, which is to do some experience growth. Today I recommend to you is a book on growth, called “Silicon Valley growth Hackers Actual Notes”, this book you can go to have a look. The main reason is that since we as the front end, in fact, many are standing in the user’s most front end, this is ali big man said. What is the front end? It means standing in the front of the user, not that you make a system, make an interface, I think this is not called the front. So how do you understand the user experience, the driving rationale is how do you identify the north star of user growth, how do you drive user growth for your business and your product? The main idea of this book is to do anything do user growth, you will have a very clear polestar indicators, such as I take our rookie here below we actually doing the north star is a system of user growth, we will go to do some apart, for example our newbie here actually has a post, novice station you should’ve heard, This year, for example, the scale of our expansion station is one of our north star indicators, how to do it, how to disintegrate, I hope to have some ideas of experience, how to help the business to achieve rapid growth, so if you are interested in this book, you can think about it, ok?


Thank you

Finally, this is a TWO-DIMENSIONAL code group, and this two-dimensional code group in fact, on the one hand, if you are interested in the new system or reference business, you can apply to join the group, and then carry out more learning and communication. If it wants to join the rookie to join us, in fact, it can also contact me through this group, and then communicate with you for further communication, today I will share here.

QA

Why use websocket instead of long polling? So what are the pros and cons of both?

There may be some more communication between long polling and the back end, doing some long polling schemes. In fact, we now want to do more light through some socket to do a communication of many people, this time in fact, we may be more with more people, this time we through the socket scheme, certainly for the back end of the long polling scheme, its performance may be better. So this can go all the specific test data, that is to say both based on the backend certainly some performance with some client performance there may be some differences, but we also do some of the technical evaluation, overall the socket a capability is in being superior to some long polling scheme, and now we are think in this way can have a look at all the op, Based on the client side of a socket a communication, this time it is certainly more efficient than long polling efficiency will be a bit higher. For example, after I do a broadcast, after everyone passes a link through the socket, its cost is very low. Because in a mid-tier socket service, just do a monitor, a broadcast and a distribution, unlike long polling, because of all the many operations in the document system, it is large-scale and batch. As you can see, for example, mySQL, which is stored in the back of our side, actually has a very large storage capacity. At this time, if we do it through a long poll, in fact, its performance is very large. So also based on this thinking, we want to use a lightweight socket scheme to do, is such a solution.

Will socket have a heavy burden on the server? Are some IP long link calls and long polling also applicable?

What we are doing now is that different machines do different things, and we will guarantee to do some machine clusters. For example, there are 4 machines, 2 machines may be dedicated to do socket communication services, responsible for some of the capacity of this piece, and several machines are dedicated to do some storage, so we first at this level, We are doing a division of the different responsibilities of some machines on the cluster capacity division. As I mentioned earlier, socket mainly does some listening and distribution. From an architectural level, it is much clearer. I’ll listen in and do some distribution. Long polling is just a way of saying it’s over there all the time. I know of course we have done some tests and the long polling performance is a bit weaker than the socket capability. And when we tested it, it looked like an average machine might have some problems with 40 or 50 people accessing it. At this time we also want to do some communication through some Websocket lightweight solutions. In the future, we will use more technologies and better extensions. In fact, its scalability is actually better than the long polling scheme.

I would like to ask Zhu Ling: besides webSocket, which technology stacks are used for pinning documents, and why are they used?

We look from the front and back end together, the back end will do some socket server, do some data storage, do some structured concepts of data, of course, there are some data analysis, the back end will have data communication, data storage and data query ability, this is the server side. The front end, which was also demonstrated by the system, is how to do data fusion on the nail end. The second is to do office coordination. There are also some performance aspects of a table, how to do some large-scale data storage, performance optimization, do a snapshot concept, what is a snapshot? That is to say, 50 op are formed into a snapshot. For example, when I take 50 steps and a new user comes in, it does not mean that I take the 50 steps and play them step by step again. At this time, the performance will be very poor. This is when users come in and quickly form some ability between multiple people to collaborate. So generalization, nailing the table is also not to say that we actually the research, the bottom is through some basic controls, of course I’m in the group is in a dominant WebExcel SDK construction, so we this a front-end technology direction mainly is at the bottom of the SDK an ability, now this time I said just now, We use the external open source SDK to carry out some business or capability packaging of SDK. The second just said our socket communication, how to do some technical series, how to do this piece of communication coordination. The third one is the performance of our table. The performance aspect is a study, how to make these capabilities quickly and through some quality of high performance, that is, what offline Excel can do, whether online Excel can do, how to do it, this is also a research direction, this is also a technology stack. As mentioned on the back end, socket and OLAP analysis, these capabilities we will concatenate, mainly these technical capabilities.

This article is formatted using 👉 MDnice