What are the "three front-end romances" on the pulse?

background

today in Momo 脉脉 saw a post about the front end 三大浪漫 .

1. Rich text editor

There are many excellent open source versions of rich text editors on the market, but the problem is that the rich text editor requirements of each product are different, so it may sometimes lead to manual editors

---

E.g:

 Draft.js
Slate.js
wangEditor

These rich text editors have also spawned their versions for different frameworks, such as React, and some plugins. If you are interested, you can go to github to search for a star, so that you can use it later

At that time, the author wrote a rich text editor (Electron, a chat editor similar to WeChat) for desktop software. It was very painful. It was necessary to control the cursor, focus, copy and paste, and adapt to QQ, WeChat, wps and other software in multiple operating system environments. copy-paste etc. I feel like I can write a lot of papers

2. Online excel

Recommend an open source library with 11.6K github stars, luckysheet

demo experience address:
https://mengshukeji.github.io/LuckysheetDemo/

support:

1. Formatting. Including font, font size, color, text alignment, word wrap, and various data types supported by excel

2. Cells. Drag-and-drop selection, drop-down fill, autofill, find and replace, merge cells, etc.

3. The ranks. Hide, insert, delete, freeze.

4. Operation. Undo, Copy, Paste, Cut, Shortcuts, Format Painter, Filter Sort, Comment, Share Edits.

5. Function. Common formulas are built-in, and custom formulas are supported.

6. Charts. Currently supports line charts, column charts, area charts, bar charts, pie charts, and supports inserting pictures.

---

3. CRDT - Conflict-Free Replication Data Type

Popular science:

• In distributed computing, a conflict-free replicated data type (CRDT) is a data structure that can be replicated across multiple computers in a network, and the replicas can be updated independently and concurrently without coordination among the replicas , and inconsistencies that may arise are always resolved mathematically. 1357
• The concept of CRDT was formally defined in 2011 by Marc Shapiro, Nuno Preguiça, Carlos Baquero and Marek Zawirski. [9] The initial motivation for development was collaborative text editing and mobile computing. CRDTs are also used in online chat systems, online gambling and the SoundCloud audio distribution platform. NoSQL distributed databases Redis, Riak, and Cosmos DB have CRDT data types.

---

Recommend an 8K star front-end CRDT real-time collaboration library Yjs:
https://github.com/yjs/yjs

• The main internal features of Yjs:

  • Basic data structure based on doubly linked list and StructStore
  • Concurrent Conflict Resolution Mechanism Based on YATA Algorithm
  • Undo redo based on DeleteSet and Transaction mechanism
  • Synchronization mechanism based on two-stage division

It supports:

modeling data structures

resolve concurrency conflicts

Backtracking History

Synchronize network status, etc.

• Example of use

   import * as Y from 'yjs'
  
  // 应用中的全部协作状态均可在单个 YDoc 容器中承载
  // 将该实例传入 WebSocket 等协议的 provider 后即可支持网络同步
  const doc = new Y.Doc()
  
  // 在 YDoc 上可以创建不同类型的顶层 YModel 实例
  // 这里创建了一个顶层名为 root 的 YMap
  const yRoot = doc.getMap('root')
  
  // 也可以用 class 构造器来实例化独立的 YMap 等 YModel
  // 可直接用 get set delete 等常见 API 对 YModel 增删改查
  const yPoint = new Y.Map()
  yPoint.set('x', 0)
  yPoint.set('y', 0)
  
  // YMap 的值也可以是 YMap，从而构造出嵌套的数据类型
  yRoot.set('point', yPoint)
  
  // YMap 中还可以存入 YText 等其他 YModel，形成复合的数据类型
  const yName = new Y.Text()
  yName.insert(0, 'Wilson Edwards')
  yRoot.set('name', yName)

  The above is based on some of the content of this article, and it is recommended to read in depth: https://zhuanlan.zhihu.com/p/452980520 My level is limited. If you want to go deeper into this CRDT, it is recommended to read more papers.

at last

I'm Peter , if you feel that the article is helpful to you, you can help to click on it, like it, and pay attention to my public account: front-end peak. Here will bring you the most practical web2, web3 knowledge points!