preface

The main lecturers of this front-end early chat are Zhu Ling (novice), Ye Zhai (Dingding), Ben Jie (Dingding) and Yu Chun (Yuque), who have their own research and opinions in the field of Web documents, so let’s understand what this front-end early chat said with me.

Front knowledge

What is isomorphism, isomorphism

Simply put, heterogeneous tables are used for layout, such as those listed in the following table; Isomorphism table is mainly concerned with the display and processing of data.

Isomorphism table Heterogeneous table
Strict organization of ranks Font size Settings
Add or delete rows Center left and right vertically
Add or delete columns Border style
Defining column types Merged cell
screening The background color
The sorting Nonstrict row and column
grouping
The aggregation
The joint

The OP (Operation)

OT (Operation Transform)

Yu Chun (Finch) — Heterogeneous table

Why do spreadsheets (improvements? Since the research?

  1. Why make a cloud knowledge base

    What is knowledge? The realm is now divided into data layers, information layers, knowledge layers, and wisdom layers. Data layer is a large amount of massive data; When collected, analyzed and refined, it becomes useful information; Then when information is combined with information, information will sublimate more important knowledge; After knowledge is used, will precipitate for their own wisdom.

  1. Why choose self-research

The current model selection can not meet the needs of the business, so it is necessary to improve the technology, or to develop in the direction of self-research

99% of the products in life are worth reinventing

Considerations before self-study:

  • reliability

  • scalability

  • Cost efficiency

Considerations in self-research:

  • Experience – Switch identity to user orientation

  • The model – The model should be mastered by yourself

  • Business – Technology must serve the business

  • maintenance

  • Research and development

  • Performance – Performance is tuned to cover most users

Two, how to research

Considerations for technology selection

The MVC architecture:

  1. View

    Tabular data rendering

    Toolbar and related panels

    Collect the event

  2. Model

    Command manipulates the Model, which is represented in the View

  3. Control

    Handle event –> Command

How to design and select the model

Considerations for technology selection (heterogeneity was finally selected) :

  • Isomorphism (heavy data) : Data processing, with emphasis on presentation of data

  • Heterogeneous (retypesetting) : Information is structured and cells are merged

How to achieve multi-person collaboration

How can conflict be resolved when multiple people collaborate?

  • You can use time drops to mark the sequence.

Synchronous OP: good consistency, but a large amount of performance problems, the more OP delay, delay more OP, will form an uncontrollable cycle.

Synchronization Command: indicates the operation of coarse particles. Good performance, incomplete consistency.

How many cells to support

First, technical considerations:

  1. Degree of support for competitive products:
  • Lark Docs 500,000 cells
  • Tencent document 200,000 cells
  • Google Docs 5 million cells

  1. Browser limitations:

    • The upper limit of localstorage is 5M

    Assuming a cell can store 20 to 200 characters, 1000 to 10000 rows x25 columns can be stored

  2. How to break through limits:

Compress the data. There are a lot of schemes for data compression now, and in the case of the finch, it works like this:

  1. Map an Array to a Map. Sparse array storage will waste a lot of space, using Map to Map can greatly save space.
  2. KV index compression. Index keys. For example, if a large number of keys are the same value, you can compress keys to save space.
  3. Compression. Use gzip compression.

Final result: Compressed to 10-20 times, the speaker supports 2.5 million cells.

Copy and paste the broken repair

If the table is copied in a normal format, there is no problem with any commercially available Web table, but if the table has a special format, special parsing of the format is required. For example: lack of head, tail, waist.

Deep practice with each of the different replication outcomes is required to eventually cover all cases.

As well as
  • Multiple attachments online preview
  • Pixel-level scrolling (virtual scrolling)
  • Import and export
  • Cell protection
  • Reading and writing separation
  • Important conditional formats
  • The formula
  • Multiple drop-down options can be selected
  • Easy to manipulate diagrams

Burn ling (novice) — isomorphic table

Why do spreadsheets (improvements? Since the research?

  • When different departments communicate and analyze data, they need to pull data from the report system first
  • Reports need to be exported and reported to the manager
  • .

Without a convenient human-computer interaction report system, these functions are its headache. But it also brings a lot of problems, such as:

  1. The efficiency of communication between people
  2. Data coordination management between people
  3. Data and business platform collaboration issues

Traditional report production process:

  1. First, the front-end and back-end interfaces are agreed to determine the API.
  2. Front-end write static pages, interface calls.
  3. The backend writes SQL, wraps a specialized interface, and registers with the gateway.
  4. The front and back end are coordinated, and then released online

Then we found a problem:

Whether it is a simple report or a complex report, our engineers need to follow the above process to display a report. On this basis, can do some higher-order functions, such as visualization and so on. All these things are regular and tedious. And it takes a lot of time to make a report. As a time-sensitive report, the longer you wait, the less useful it becomes. Therefore, it is urgent to develop a concise and efficient report system.

E-form:

  • All data can be easily edited online, and sharing has become much easier, simply by giving access to and sharing links.

  • Data extraction becomes more simple, the data analysis table can be directly generated in the Web, also can be exported in the local computer to open, greatly saving the development time.

Ii. How to research and development

Research and development goal: communication is collaboration, collaboration is creation

Technical selection (isomorphism table? Heterogeneous table?

Rookie’s choice is isomorphism table, purpose:

  1. Solve offline business data quickly online
  2. Solve business data management and offline data docking business platform

Technology access

With dingpin access, through the integration with dingpin, so that communication collaboration, collaborative creation.

conclusion

  1. Problems solved:

    • Research and development of the code
    • Duplication of effort
    • No maintenance

  2. Innovation:

  • No code or low code products

    Make the operation as graphical and visual as possible to reduce the difficulty of use

    1. There is no code workflow
    2. Across the operation
    3. Multidimensional data analysis
    4. Architecture and permission control

  • Intelligent ROBOT

    Depending on the communication service with the nail, the nail robot can be used to achieve the following functions

    1. Easy to learn
    2. To notify the
    3. Account security
    4. Interaction is simple

  • Connected business service

    Multiple service interfaces are provided to quickly connect various services, eliminating data islands.

Ye Zhai (Dingding) — isomorphic table

The overall structure of Dingding

Development of guidelines

The desktop technology is very mature, so you can learn from the desktop technology in terms of technology and architecture.

Performance optimization

Question:

  1. Large amount of data

    An isomorphic table supports up to 100,000 rows of data. If you render them at the same time, you need millions of divs, which is a large performance overhead.

Solution:

  1. Virtual rolling

    Use javascript to control elements and maintain scroll offsets. At present, Github also has many open source frameworks, so it is up to the team to do technical research on whether to develop their own or existing solutions.

  2. Use Worker to calculate

    Javascript is known to be single-threaded, and if you write all your computational code in the UI layer, the page will freeze. It can be isolated by using the Worker, but there are a lot of pits to tread inside.

  3. The data section

    When requesting data, it does not request all data, but only requests data within a range, so as to avoid massive data transmission with Worker, which may cause performance problems.

Improved user experience

  1. From selection to editing, and sensitive keyboard responses
  2. Experience of using Chinese input method in tables
  3. The impact of a mobile device keyboard on a page

If you want to improve the user experience, you should make the user experience as close to the desktop as possible, for example, the basic response to the up, down, left and right arrows, TAB, enter key monitoring; Advanced use of some unpopular apis; Different adaptations are required for different browser platforms and devices.

Answer to questions:

React?

React has not experienced the test of complex document application, and has many drawbacks for optimization. Therefore, react is hot, but it is not a silver bullet.

Dom or Canvas for table?

Select: isomorphism table select DOM; Heterogeneous tables select Canvas.

Explanation: Isomorphic table and heterogeneous table compared to not so complex operation, and more standard, so choose DOM is relatively simple and convenient. Each cell of a heterogeneous table can have its own style, so it is easier to use canvas for development.

Benjie (Dingding) – The way forward for editors

The development of text editors

  1. The typewriter age

  2. The age of text editors

  3. Rich text editor era

  4. The Web editor era

WYSIWYG what you see is what you Get

  1. DOM content <-> Visual content
  2. DOM selection <-> Visual selection
  3. All visual edits can be mapped to an algebraically closed and complete set of visual content

How to do?

  • A document model, and the ability to ensure that the two models are visually equal
  • A mapping between DOM and document model
  • Good editing instructions based on the document model
  • You can turn DOM events into editing operations

More than one editor

Creating an editor is not only about the superficial things, such as basic formatting support (bold, italics, fonts, size, quick code, lists), as well as interactive attachment transfer, typography, hyperlinks, etc. There is also interactive copy, paste, and copy-paste formatting management; There is a more complex underlying memory model, multiplayer interaction.

By replacing ink

The document editor is divided into four parts: pen, ink, paper and inkstone:

Pen:

  • The user interface
  • The event processing

Ink:

  • Data conversion

Paper:

  • The rich text
  • The rich interaction
  • The expansion of business

Yan:

  • Data serialization
  • Deserialization algorithm
  • Operational transformation Algorithm (DIFF)

Runtime editor with real-time multiplayer editing

The in-memory model is very important, and the manipulation of data is performed on the in-memory model and then displayed on the View.

Editor and external data model

Finally, a front-line early chat AD

Front-end Early chat conference goal to become useful, understand, copy the technology conference, planned to be held in 2020 >= 15, jointly held by front-end early chat and nuggets, front-end early chat conference schedule dynamic, video recording /PPT/ lecture notes download, please pay attention to the “front-end early chat” public account follow up.

The 11th front end job-hopping new strategy will be held on June 27th, please click to register, the poster and lecturer schedule are as follows:

After reading the

If you think the article is good, please give me a thumbs up. The mobile end is at the bottom and the PC end is at the left of the article. Than heart 💖 💖.