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, including documents, spreadsheets and slides. It's highly extensible and can be embedded into other applications. We also have built a SaaS (opens in a new tab) and AI applications around it. Now Univer has been adopted by several companies.

I joined Univer in its very early stage as Head of Engineering and Chief Architecture. I designed its architecture, coded lots of core parts, lead its development, supervise the engineering team and support other engineers.

Technical Contributions

Architecture

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.

Read more about its architecture in the official guide (opens in a new tab).

Collaboration 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 the 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 designed and implemented the RPC packages. 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).

Management Contributions

Team building

I hired the founding front-end engineers and am responsible for technical interviews. I also designed the onboarding process for new engineers.

I regularly have technical training sessions to ensure our engineers are up-to-date with the latest technologies and best practices. 1:1s are conducted monthly to ensure that the team is aligned with the company's goals, and individuals are supported in their career development.

Project management

I play an important role in the project management of Univer, including task assignment, design review, progress tracking, and code review.

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, greatly improved the performance and maintainability of the codebase.

WeCom (WeChat for Enterprises) Document

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

Decoupling platform dependencies by introducing dependency injection

In the code of the WeCom 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 the platform decoupling and some optimizations done by colleagues, we successfully reduced the initialization time of an empty document to less than 1 second.

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.