This is a speech delivered by Yu Chun, technical director of ant Group’s self-developed language editor, at the language Conference.

Hello everyone, my name is Yu Chun. Next, I would like to share with you the self-developed editor of Yuqu.

Before that, the organizing committee told me to share some advanced technologies in the editor, so I thought about this question carefully, which technologies are advanced in the editor. In my opinion. There is no such thing as advanced technology or backward technology. The purpose of technology is to solve problems, which may be divided into old and new ones. However, The Language Finch team is not a team that particularly pursues new technologies. Therefore, the next part of my sharing will mainly focus on the specific problems we meet and how to find solutions. In terms of the problem itself, each product has different problems, so it is difficult to compare our technology is very advanced. So next, let’s take a look at the problems and technical considerations of our sparrow editor.

Let’s start with this sentence. Text has your heart, ink language sparrow. This was the original slogan of The Sparrow.

We want you to be immersed in a calm and joyful creative flow when you open the Sparrow editor. Whether you want to write a weekly newspaper or a novel, or write a travelogue when you return from a trip. We all want the process to be enjoyable. When you want to insert a flow chart or a data report, or a video, we want to be able to do it all at once in the Speaker editor. This is where the Sparrow editor is going.

Next, I will share these parts

Part 1. Introduction of the finch editor family

Seven brothers

First give you a family photo, this is a family photo of all the language finch editors, we do a ranking according to the time, the eldest, second, third, fourth, five, six, seven.

Document editor

First from the eldest document editor, ability is stronger, people are more honest, and then willing to bear hardships, both inside and outside all rely on him, all dirty work. Where there is content input, there is his presence. We can see that he is responsible for all kinds of comments, including the notes of the Sparrow. Basically, we can say that there would be no family without him.

Directory editor

The second directory editor, which may surprise you, is an editor too? That’s right, it’s a real editor. Because he went out to study in his early years and seldom came home all the year round, no one knew him. University time, in the library did work-study program, in sorting out this piece, but a first-class master. So these years to go home to do housework, home data, documents, by his hand, you sorted out in perfect order.

Worksheets/data sheets

The third worksheet. This guy loves math by nature. Home all water, electricity, gas, all kinds of food and clothing expenses, all income expenses to him, to ensure that you manage no problem. Later, when he found himself too busy, he had seven,

Old seven is our data table, data table and today’s children, born aborigines of the Internet, he likes to collect data, he is also good at collecting data, with this skill, the future will be boundless. So let them take care of the data, Wen!

Mind maps, flow charts and presentations

Old four old five old six, thought map, flow chart and presentation, they are a triplets, born when the life is better, nutrition to keep up with, milk, eggs every day, hard body high heart, right? In the graphics field is really not afraid of who, not today to do this, is tomorrow to put the flat that, it can be said that is the newborn calf is not afraid of tigers, determined to break out a piece of heaven.

Seven editors, seven brothers working together for everyone. So here’s the point

All functions of the Sparrow editor are equally available to all users, whether paid or free, and all functions are freely available to all.

Four versions

Well, there’s a lot of editors to go on. Let’s pick out some stories, starting with the document editor.

In a word, simple but not simple, inclusive, universal, the Language Sparrow document editor has gone through four versions, each of which has left us with some very valuable features.

1.0

Since 1.0, we have been a Markdown editor, as those familiar with Markdown syntax know. We can achieve some clear document structure by typing some very simple characters. Headings, lists, quotes, etc., are great to read. It also makes us realize that the beauty of documents is in structure. The ability to type quickly was available in 1.0 and continues.

2.0

2.0 We have entered the era of rich text, the era of rich text has brought us more rich styles, so that we can play more freely. Rich text editors have also introduced a new editing mode called “WHAT you see is what you get.” What you edit is what you see, eliminating the need for repeated previews, which greatly improves your editing efficiency.

3.0

3.0, we completely into the research of time, is also more than everybody nearly two years have been using the editor, we found that we also need to insert some special format of the data in a document, such as a calendar, for example a vote, such as a code block, such a complex data format, we need to be able to meet, we introduced the card model, The card model makes the finch editor more open and connected. With this capability, we can connect to the Internet, for example, you can insert a web page, we can also make some connections within the language, different documents can be introduced to each other, after the original document is edited, the imported document will be automatically updated. Then, 3.0 also brings us another capability, which is multi-user collaboration. Multi-user collaboration makes our Language editor truly realize multi-user simultaneous editing and become a tool for knowledge collaboration.

4.0

Today, we enter the era of 4.0, 4.0 editor has just been released online, you can intuitively feel that our document table can be edited by many people at the same time. After half a year of research and development, we have made a big upgrade in the bottom layer, and have better flexibility and extensibility in the architecture. You know we have a lot of suggestions and questions in the comments section. Although we can’t accept every suggestion, we will show you more wonderful things in the 4.0 era, let’s stay tuned.

Of course, there were some problems when we just launched, and some users said in the discussion forum that some of our interactions had changed. Although these interactive changes are also through some of our thinking, but there is always something missing, we hope that you continue to give us suggestions. I think flowers and eggs will make us better.

Part2. Editor growth story

Next, I will tell you the story of the growth of the Sparrow editor.

As just said, in fact, the finch is in the user to give us continuous ridicule, give us continuous advice in an environment. So let’s take a look at the next three stories.

Story 1. Real-time synergy

Let’s start with the first story: Real-time synergy.

In the first year of our language commercialization, we actually did not have such a capability. We observed from our own work scenes and found that it was rare for multiple people to edit a document at the same time, which was used occasionally and rarely. But at that time, the whole market was very concerned about this function. Without this function, people seemed embarrassed to say hello to others, wasn’t it true? Are we going to spend a lot of money on r&d to implement a low frequency capability? We’ve never been a product that likes to follow suit, but we do reflect. We were thinking about such a function, such a low frequency function, why are people so concerned?

When we thought about it later, there might have been something wrong with the way we looked at things.

That’s frequency and importance. It’s not really equal. Let me give you an example, a mall that probably doesn’t have a lot of fire protection, right? And we hope it stays out of use, because it’s very important. Importance determines whether or not we want to make the feature, while frequency of use only determines how we want to make it and where we want to put it.

When we figure this out, we realize that our previous misgivings and hesitations were actually wrong. As a product that advocates knowledge collaboration, multi-user simultaneous editing will improve user collaboration efficiency at critical moments. So we decided to do real-time collaboration.

How do we design real-time collaboration?

Before we cooperated in real time, the editing of the finch was a lock mode, which meant that while one person was editing, others could not edit at the same time. This is also based on content security considerations, to prevent content and version changes, that lock mode it also has the benefits of lock mode, such as lock mode is relatively simple, more stable, its offline is also more friendly. We wanted these features to continue, so we added a synergy mode.

Collaborative mode is enabled by default under the collaborative knowledge base in a team. If you add a collaborator to your personal knowledge base, collaborative mode will also be enabled by default. The benefit of collaborative mode is that multiple people can edit at the same time, and content is synchronized to multiple editors in real time. However, it also has its disadvantages. For example, the collaborative mode has high requirements on the network. For some users, the network may be slow or often disconnected, or they may set up a proxy, so they may not be able to connect to our collaborative server. At this point, we added a feature called smart switch, which allows you to switch from cooperative mode back to lock mode to make editing more stable. This is the design of the Cooperative part of the Sparrow editor.

Real-time Collaboration has been online for over a year, and we’ve had a lot of problems.

There were a lot of hard questions when we first launched. Things like lost cursors, things like lost content, things like that, you might have encountered from time to time, and a lot of these problems are very difficult to reproduce. Because you probably won’t see it under normal editing, only the very strange scenes will show up. Then, we spent nearly a year to continuously fix bugs, transform the bottom layer, and make interactive tuning, and gradually solve these collaborative problems. In the second half of last year, the real-time coordination function of the finch gradually tended to be stable.

Story 2. Table scrolling

The next story is about table scrolling

The original positioning of the table editor was to maximize 20% of the basic functions of Excel, take advantage of online collaboration, and make 80% of the data processing scenarios thorough. Such a positioning makes it impossible for us to copy all the functions of Excel. Of course, it’s not realistic, after all, I’ve been doing it for 30 years. Since we can’t copy everything, let’s start with the most basic features.

We want to do the best we can with the basic functionality. What is the base experience?

I liken it to air and water, and clean water and fresh air in and of themselves can bring us some pleasant feelings. We want the sparrow editor to be as natural and pleasant as clean water and air. How to make the best of the basic experience? We say that our users will tell us, and we often say that we grow with our users, which some people may not understand very well. That’s actually how our story happened.

Let’s start with one of the most basic features in the table editor, scroll.

When you look at a table, you always have to scroll up and down, or scroll left and right to see which row or column of data you want. We know that table scrolling can be done differently from web product to web product due to the limitations of some of the browser’s rendering capabilities. There’s a kind of scrolling called row-level scrolling, where you scroll row by row. Some well-known products also use row-level scrolling. Let’s take a look at what row-level scrolling looks like.

When you have a little too much content in each line, you’ll notice that it’s jumping during scrolling. Even in extreme scenarios where a line of content is higher than the window, you can’t see the bottom of the line. You can imagine for yourself.

Then let’s look at the pixel-level scrolling of the finch

Pixel-level scrolling is much smoother, and then this is an experience that the whisperers do with scrolling. In order to achieve such a special ability, we actually did a lot of technical optimization. Such as rendering on demand according to the window, such as we need to calculate and cache the height of each row in real time, etc.

After doing the pixel-level scrolling, we thought our scrolling was pretty good, and then another user gave us feedback, saying that your scrolling seemed a little “wobbly” and sent us a video, so we thought about it. What do you mean “shake”? “shake”.

So that’s what it actually looks like, when we did the original scroll, it was horizontal and vertical and it was free to scroll, horizontal and vertical at the same time. (I’ll take an example of a free scrolling friend product.)

If you’re on a touchpad, you’ll notice that when you scroll horizontally, you’ll have a little bit of a vertical offset, so when you’re trying to look at a line of data, you’ll have a little bit of a distraction, and you won’t be able to focus on the line that you’re looking at. So we added the direction constraint,

Then we see the animation above, which is the scrolling effect we have now, and when we scroll horizontally and vertically, it locks in the other direction. This way your overall scroll will be more stable, the visual focus page will be more focused, and the retrieval of data will be more efficient, which is our scroll.

There’s a lot more of this in the Wordsmith table editor.

We’re not going to go through them all today.

Story 3. Read-write separation

The third story is about reading and writing separation. Let’s talk about one of the design reasons for read-write separation. I’m going to give you two scenarios, so you can feel them.

In the first scene, you are writing an article and there are a bunch of people standing behind you reading it. How do you feel? Do you feel that your mind is completely blank and you don’t know what to write, right?

In the second scene, you are reading an article, and you find the cursor is moving, someone is writing, someone is deleting words, and someone is adjusting the format of paragraphs. What is your feeling of reading? Do you feel a little at a loss as to whether the article is finished or not and whether you should read it now?

This is reading and writing, which are two scenes in themselves. If you knead them together, something very strange happens. So we hope that for the author, his writing can be in a calm and immersed creative environment, he can write without concern. And the reader he can trust to read. We then connect the two experiences with a “publish/update” action. This post makes our writers feel more ritualistic, this action tells the writer that your content will be delivered to the reader and read by the reader.

What was the feedback on the use of such a “read-write separation” design?

Let’s take a look, first of all, a part of the user said very good, so I can rest assured that bold write. Some users will say, “Why should I publish it when I write it alone?” What a bother. Yes. The same experience design receives two very different kinds of feedback. What are our feelings, reading and writing should not be separated, our heart is in contradiction, is to insist or compromise? What’s the problem? Then we think about how to improve the problem.

It turned out to be a relationship between the two roles of reader and writer, and we added an automatic publishing option,

For those readers and authors in the same role, we turn on the auto-publishing option. For example, in our personal and private knowledge base, we enable it by default. For example, in our desktop, we enter the write mode by default, so that the read/write separation is more friendly. We decide the mode of read/write separation according to whether the two roles are the same.

Okay, so that’s the end of the three user stories.

Part3. Editor firewall

Next I will share with you the skylark editor’s firewall: anti-loss, anti-clutter and anti-jamming.

Before this chapter, I would like to apologize to all users who were lost, stuck, or messed up by the Sparrow editor. It is true that we could not do it at the beginning, which brought trouble to everyone. We also want to thank everyone for accompanying us, helping us to feedback problems, and assisting in troubleshooting problems, so that we can continuously improve products and experience.

The lost

Let’s start with losing

Content is not lost, we see it as a baseline experience. Someone said autosave isn’t enough? Is it really that simple?

Let’s look at some objective factors

First of all, save is a big action, the language is saved in snapshot mode, each time to save the editor to sort out the full text, sent to the server, when the save action and input action happened at the same time, especially when the large document, easy to cause input lag.

Second, too many historical versions can also be maddening, making it hard to follow. So we need caching, and caching has capacity limits.

Third, the network is a very unreliable thing, disconnection, weak network, proxy network are affected.

Finally, user habits are unpredictable. Some editing pages are not closed for half a month after they are opened. We have published several times in the middle.

Let’s take a look at the automatic saving design of the finch,

To deal with all kinds of situations, we employ 5 butlers and a dedicated Courier, but I won’t read you the text here. What are the core tasks of these five butlers? It is to cache and save your content at the most appropriate time. When you leave, we will save it at the first time. Update content as soon as you activate it.

When you are offline, we the Courier will be at the time of your next online, will save your offline editing content the first time to a server, he is very close as a Courier, it saved server-side process, if there are some network problems not succeed, it will not have to delete your offline caching. So as long as you save it in our offline cache and don’t delete it yourself, the content is basically safe.

After such a design there are a lot of naughty users said so how can we lose the content? It’s a curious question. It’s not impossible to lose content unless you open the editor, edit continuously for a second, and then power off. Or you can edit it offline and then manually delete your offline cache. If you do, we can’t protect your content at this point. Of course, we will continue to improve the mechanism here, so that as long as you see the naked eye will not lose.

The disorderly

The next firewall is anti-chaos, what are the common chaos?

The first, most basic, mess is that multiple people are editing on the same version. Then the later saved ones overwrite the previous ones, which is a version distortion. The second is that in your collaborative mode, your network may have some problems, your data is not synchronized to the server, that may cause some version of the data loss. And then there are some bugs, but I won’t go into that.

As I said, we have two models, and each model has a different problem and a different solution. Today we are going to focus on locking mode. Locking mode to prevent clutter, we first design a version number for the document. This version number will follow the document. Then, when you save it once, its version number will be increased by 1, and each time you save it will also carry the baseline version number before you edit it to the server, and the server will determine whether your version number is the latest. If it is not the latest, it will not be saved successfully and a conflict will be prompted.

Every time you open the editor, we’ll go to the server and ask for the latest version, compare it to the baseline version of your local cache, and ask you to edit it based on the latest version.

When you leave, we will also save your content to the server for the first time. And while you’re editing, we’ll check with the server every minute to see if the latest version is available. This kind of polling takes into account some of the disconnection scenarios, you can edit when the network is disconnected and you do not know, and when you are disconnected, your lock permissions have been taken back. Then someone else may have edited the content while you were offline, and the version has gone up. This time our polling will ensure that you are in the editing process even if offline. When you meet others who edit at the same time, you can also get the latest version at the first time you connect to the Internet, so that you can edit based on the latest version every time.

But what if there are save conflicts or newer versions? We will make a backup of the cached version of your offline edit to the history so that you can manually synchronize the offline content to the latest version of the document later.

The card

Finally, how to prevent card, there are two common cards:

One is a flow card, where we have popovers that stop you from going any further, and those are called stuck cards. There is a card is the card, the performance is not good, and then edit not smooth.

Both have some solutions of their own.

Performance card needless to say, is constantly to optimize performance, and then we will do some performance monitoring.

We have a lot of measures for the process card, for example, our mode intelligent switch, when you can not connect to our collaborative server, we do not want to put you stuck, we will downgrade you to lock mode to edit.

We made a lot of updates to the lock mode and it was all anti-card design. We were originally the lock people, so different people could not edit at the same time. However, we found that this was not enough. Some people had multiple browsers open at the same time, and multiple Windows would jam each other, so we started to upgrade to the lock side, which might lock itself and need to cut to the edit side with permissions, or wait for 1 minute. We think it’s bad, and then we add a non-self-lock. Not since the lock is not enough, because the user is unable to avoid cut continuously back and forth between the two pages, we should not only solve the problem of the lock, to solve the problem of content synchronization, we then unlock automatically when I leave, and keep your content in a timely manner, when you activate an editor, to get the latest updates at the same time. Such a lock mode is constantly upgraded to let us in lock mode, as much as possible to reduce the stuck situation.

Speaking of cards, we also have some tiered reminder designs in terms of flow smoothness. To take a simple example, we have auto save and manual save. Auto save we won’t prompt. Because we want you to automatically save it in the immersed editing process is behind the natural occurrence, and manual saving will prompt you to save it successfully, which is also based on an interactive real-time feedback consideration, also save, some need to be completed silently, some need to respond in time.

In addition, if there are exceptions that we can handle, we will put them in the upper right corner as a message alert, which will tell you that there is a small situation, but we have dealt with it for you, you can continue to edit without worry. If we think the problem is particularly serious, we’ll prompt a pop-up and let you decide what to do next.

These are some of the designs that the bird does in preventing loss, chaos and jamming.

Part4. Editor’s poem and Distance

The last party is to share the poem and distance of the editor.

tower

Let’s start with this model of the tower,

This is one of my favorite models: the DIKW model. It reveals a model of the evolution of knowledge, from data to information to knowledge to human intelligence. At the bottom is our huge amount of data. In the data, we can extract and observe some useful information. Information is more concentrated than data, and then different information, different dimensions of information, after some organization, some thinking, some reasoning, we can find some rules of it, and form our knowledge. The application of knowledge forms wisdom. In this model of knowledge formation, I think the editor is more like a ladder. He assumes the role of this ladder in every link, sublimating data into information, sublimating information into knowledge, is a tool. An editor is a tool that facilitates knowledge formation. We will continue to increase the capabilities of the Finch editor in each link, so that the Finch editor can live up to its mission.

The tree

Let’s share another tree, which we can call the tree of knowledge.

Here’s an interesting question: What does knowledge look like? What do you think knowledge looks like? Some say knowledge may be reticulated, and some say it is treelike. What does that look like? Actually see what you think about this question, depends on your observation Angle, from the editor’s point of view, it is more like a tree, we hope that the knowledge of knowledge creation from scratch, it is actually a process of growing, we want it to have, have the trunk, branches and leaves, like this in the process of creation, including the late study, you will be able to more better grasp its structure. This is from the perspective of creation and learning, so there must be other perspectives, I think the responsibility of the Sparrow editor is to allow knowledge to grow freely and become what it should be. From ancient times to the present, human beings write the text on the turtle shell, to write on bamboo sticks, and then write on paper, input into the computer, the network, the form of knowledge has also undergone constant changes, from graphics to text, to pictures, to sound, video. What is the best form of knowledge? The editor of the sparrow is also constantly exploring, hoping to present her knowledge to everyone in the best way.

That’s my sharing. Thank you.

Ali people are here to deposit knowledge