Work

Aiming to build productivity applications (and libraries) that both users and developers will love, I focused on collaboration algorithms, rendering techniques, editors, and software architecture. I actively contributed to the component library community during my internship.

Here's a summary of my work so far.

Univer

Univer (opens in a new tab) is a software development kit (SDK) for building office suites. Documents, spreadsheets and slides. It's highly extensible and can be embedded into other applications. We also have built SaaS (opens in a new tab) and AI applications around it.

I joined Univer in its early stages as Head of Engineering. I designed its architecture, lead its development, and supervise the engineering team. I am thrilled to be a part of this incredible journey.

My techinal contributions on Univer primarily focused on the areas list below:

Architecure Design

I designed the architecture of the Univer SDK. It uses a plugin-based architecture and dependency injection to create a highly extensible architectural foundation.

In Univer, functionalities are registered into the application in the form of plugins, which means that users can choose the plugins they register according to their actual needs, and even develop their own plugins.

Moreover, it maximizes the isomorphism of various systems within Univer. By loading different plugins and injecting different dependencies, Univer can run on desktop and mobile browsers, as well as in web workers or Node.js as a computation engine or collaborative engine. You can read more about this architecturee in our official guide (opens in a new tab).

Collaborative Engine

Collaborative editing is crucial to productivity applications. This involves multiple people editing the same document simultaneously. I engineered Univer's collaborative engine from the ground up. This engine leverages a state machine model and operational transformation (OT). It delivers this capability across various document types and supports offline editing. The team has enhanced it with advanced transformation functions, a comprehensive file history feature, and robust performance improvements.

You can read more about our system here: The OT algorithm and Univer's Collaborative Editing Design (opens in a new tab).

RPC & Remote Computing

For Univer instances deployed in different threads to communicate seamlessly, I engineered and implemented the RPC package. Univer now excels at running its frontend in the browser, while handling calculations in Web Worker, or even in a Node.js process on the Univer server. This significantly boosts performance and enhances user experience. You can read more about this on our official guide (opens in a new tab).

Lark Spreadsheets

At Lark spreadsheets I am responsible for maintaining several features and started some new features.

Along with our tech leader and some co-workers, we designed a new architecture for Lark spreadsheets and it is partially adopted in our codebase.

Enterprise WeChat Document

The Enterprise WeChat Document is a collaborative editing application built into Enterprise WeChat. During my tenure, the following work is noteworthy:

Decoupling platform dependencies by introducing dependency injection

In the code of the Enterprise WeChat document, the mobile and desktop code was once very tightly coupled. In other words, the desktop would also load the mobile code, even though it would not actually execute! I introduced a dependency injection system, injecting respective implementations into the desktop and mobile, thereby significantly reducing the package size.

Splitting features and enabling lazy loading

Before the document completed the first screen rendering, some features unrelated to the first screen rendering initialization took up a lot of CPU time. By splitting functions and implementing lazy loading for these functions, I significantly postponed their initialization timings, thereby greatly reducing the package size. Combined with some optimizations done by colleagues, we successfully reduced the initialization time of an empty document to less than 1 second.

Text typesetting algorithm optimization

The Enterprise WeChat documentation uses Canvas to render text. I optimized the line-breaking algorithm so that it can correctly handle graphemes, allowing for proper rendering of emojis. I also improved the algorithm for processing lists by changing from full processing to incremental processing that follows the typesetting progress, thereby reducing the loading time of documents containing large lists by more than 10 seconds.

redi

Redi (opens in a new tab) is a powerful dependency injection utility inspired by VSCode. Building on the simplicity of VSCode, Redi introduces advanced features such as injecting factories, values, and even lazy values based on Promises.

Redi powers Univer and several applications in ByteDance.

NG-ZORRO

NG-ZORRO (opens in a new tab) is an enterprise-class UI components based on Ant Design and Angular. During my internship at Alibaba, I actively joined the development of NG-ZORRO, was responsible for maining 20+ components and developed quiet a few of them.