FRONTEND · OPEN SOURCE · SCRUM MASTER · MANAGER

ZHAO JINJIANG 赵锦江 · Singapore

I'd love to build and deliver outstanding tools, products, systems which benefit people worldwide.

I'm Zhao Jinjiang, a software engineer living in Singapore who specializes in frontend engineering. I'm also a Vue.js team member and a former co-chair of the W3C HTML Chinese Interest Group, where I served from 2014 to 2018.

Working languages: English · Mandarin Chinese.

0119+

years building for the web

02OPEN SOURCE

enthusiast

03DEV & LEAD

experience as an individual contributor, team manager, and Scrum master

01 / WORK.STORY

Work Experience

Across companies ranging from global enterprises to startups, and products spanning browsers, e-commerce, cloud services, web platforms, and mobile apps.

Bit CLI and ecosystem maintenance

Bit CLI lets teams build applications from independently maintained components using mainstream frameworks and tools, then version and export those components to Bit Cloud.

Responsibility and scope: Vue.js env for Bit
Built the Vue.js env that enables Vue developers to build with Bit.
Responsibility and scope: Vite and Vitest integrations
Vite and Vitest integrations let Bit developers use Vite as a preview dev server and bundler, and Vitest as a tester.
Responsibility and scope: Bit CLI maintenance
Maintain the Bit CLI core, core envs, and third-party integrations for tools including webpack, Jest, ESLint, TypeScript, and MDX.

A typical Bit component graphVisualized component dependency graph in Bit Cloud.
Highlight and impact: File-to-file compiler for Vue Single-File Components (SFC)
Bit favors file-to-file compilation when publishing a component. For example, one TypeScript source file produces one JavaScript file and one declaration file. This model is challenging for Vue.js because mainstream Vue SFC tooling bundles source code into one or more chunks.

I created the open-source project vue-simple-compiler. It compiles an individual Vue SFC into a JavaScript file and can extract a <style> block into an additional CSS, Sass, or Less file referenced by an import statement. The generated files work as ordinary web-application source files and can be used directly in a Vue project.

It also supports source maps and hot module replacement (HMR).

Together with vue-tsc for generating declaration files, this project gave Bit's Vue env full compilation support for Vue SFCs.

I also presented Understanding Vue SFC Compiler at CityJS Singapore 2024.
Highlight and impact: Dependency management and optimization in Vite/Vitest
Every Bit component is ultimately consumed as an npm package. During local development, files inside node_modules can therefore change when a package is generated from a local Bit component.

By default, Vite and Vitest treat code in node_modules as static: they pre-bundle it and do not watch it for changes. So when one local Bit component imports another local one as an npm package, the HMR does not work, and even refreshing the browser does not load the updated code.

Vitest, server-side rendering, and pre-rendering add another constraint because the code runs in Node.js rather than in a browser.

Vite and Vitest provide configuration options for each case individually, but the options do not always work when these edge cases overlap.

I studied the Vite and Vitest source code and worked through multiple rounds of discussion with their teams, contributing to related GitHub issues and pull requests. This led to a configuration strategy that covered all of these cases.

I documented what I learned in Understanding how Vite deals with your node_modules.
More details
The Vite and Vitest configuration includes:

For Vite's development server, move entry points outside node_modules.

Add all peer dependencies of Bit components to optimizeDeps.include and resolve.alias in singleton mode.

Add all local Bit packages to watch.ignored, optimizeDeps.exclude, and resolve.alias. A custom alias plugin detects local package names in import specifiers and points them to the corresponding source code.

Configure test.server.deps.inline for Vitest.

Use resolve.dedupe for peer dependencies in SSR and pre-rendering modes.
Pre-bundle optimization for large applications
Pre-bundle optimization for large applications
Because Bit applications are composed of independently managed components, large applications can contain enough components to slow down the development server or bundler.

I built a specialized pre-bundle env that deliberately departed from the file-to-file compilation model. It bundles source code and dependencies together and can serve as a micro-frontend checkpoint, accelerating consumption by higher layers.

I applied this env to Bit's default docs application, which renders the MDX documentation for Bit components on Bit Cloud. Pre-bundling reduced local-development load time by more than 50%.
Live controls: Storybook-like component previews
Live controls: Storybook-like component previews
Built a Storybook-like interface for previewing demos of a Bit component.
1. I defined a live-demo type that lets developers export a component object, a prop type definition, default prop values, optional input-control bindings, and an optional custom renderer. Without a custom renderer, Bit displays the component with its default props alongside controls that update the values live.
2. The next version extracted prop types from source code, making the explicit type definition optional. Bit could then infer each prop type and corresponding input control, reducing the minimum configuration to a component object and its prop values.
Live ControlsLive controls in component preview page on Bit Cloud.
Learning and growth: What I learned

Broader familiarity with frontend tooling.

Deeper knowledge of Vue compiler, Vite, and Vitest.

Effective collaboration in a fully remote environment.

Experience building an open-source product for enterprise users.

Cross-cultural communication and collaboration.
More at Bit
More at Bit
- Created user documentation and demos for the Vue.js environment.
- Built a customizable dependency-detection service that identifies dependencies in a Bit component by scanning import, require, and other language-specific syntax.
- Added Vue.js support to the schema-extractor service so it can read type definitions from Vue SFCs and render them in documentation pages.
- Migrated component documentation from MDX v1 to MDX v3, moved the codebase from CommonJS to ESM, and rewrote most configuration and plugins.
- Upgraded third-party tools including TypeScript and ESLint, adapting to API and configuration changes.
- Contributed to the Bit 1.0 and Bit 2.0 releases.
- Contributed to MCP server support to Vite's development server to provide AI agents with comprehensive debugging information.
- Contributed to AGENTS.md file with guidance for AI agents.

Focus 01

Shopee Tech Committee

The Shopee Tech Committee was a 10-person group focused on core engineering topics. I was the person-in-charge (PIC) of frontend engineering.

Responsibility and scope: Frontend leadership on the Tech Committee

Reviewed technology stacks across frontend teams and aligned them where necessary.

Planned the roadmap for company-wide technology evolution.

Mentored key frontend projects across Shopee.

Maintained the engineer-leveling system and reviewed promotions.
Highlight and impact: Consolidated design systems and component libraries
Consolidated multiple UI design systems and component libraries into three: one each for consumer-facing, seller-facing, and internal products.
Highlight and impact: Company-wide engineering guidelines
Drafted and aligned engineering guidelines with teams across the company, including:

A technical design document template.

Frontend–backend collaboration guidelines.
Highlight and impact: Co-organized Shopee Tech Summit
Co-organized Shopee's annual internal technology summit, curating engineering innovations, practices, and case studies from development teams and product lines for the wider engineering organization.
Learning and growth: What I learned

Company-wide collaboration.

How to consolidate diverse technology stacks smoothly at scale.

Leadership and management through influence.

Focus 02

Marketplace frontend team leadership

Shopee's Marketplace department focused on consumer-facing websites and applications. Its frontend team was the company's largest and most experienced, with groups supporting individual product lines and evolving into sub-teams as it grew.

Responsibility and scope: Frontend delivery for the Shopee web app
Led the team in shipping new versions of the Shopee web app across all regions, supporting product areas including Homepage, Search, Ads, Promotions, and Orders.

Shopee appConsumer-facing product features across the Shopee app.
Responsibility and scope: Long-term technology evolution
Led the team in maintaining its frontend technology stack and infrastructure while adopting new technologies to replace legacy systems.
Responsibility and scope: Hiring and career development

Built a team culture in which frontend engineers could learn, practice, and grow.

Established hiring standards and an interview process.
Highlight and impact: Built Toastack, a frontend stack for internal admin portals
Combined Ant Design with Kaya Toast, a minimal SPA scaffold; Toastbox, a source-based component-sharing platform; and shared generators for common table and form pages. We also explored Open Routes as an optional page-level build model.

ToastackKaya Toast and Shopee internal admin-portal examples.
More details
Shopee faced growing demand for internal admin portals, but building each one from scratch was inefficient. Feature line teams had limited time and needed to prioritize customer-facing products, so we created shared infrastructure to make admin development faster and more cost-effective.

Toastack included:

Ant Design as the foundational component library.

Kaya Toast, a minimal SPA scaffold with basic layout setup, a router, and core authentication state manager.

Toastbox, a lightweight sharing platform that distributed reusable components as source-based “boxes,” with collections and online previews.

Page generators for common table and form workflows.

Onboarding documentation for both frontend and backend developers.

As an optional experiment, we combined page-level state management, the Open Routes build workflow, and browser-side dependency management. This allowed teams to develop, build, deploy, and maintain portal pages independently, with the option to decentralize a growing portal across multiple repositories.

All new admin portals were built on Toastack, while existing portals increasingly migrated from legacy stacks. Two large portals also adopted the decentralized model, allowing multiple frontend sub-teams to maintain them independently.
Highlight and impact: Introduced the Patch-Upgrade Circle for multi-layer collaboration
Established a dependency collaboration loop: upper-layer teams shipped a temporary patch and reported the issue, lower-layer owners delivered the fix, then upper-layer teams removed the patch and upgraded to the fixed release. This kept delivery moving while giving dependency owners time to implement the long-term solution.
Highlight and impact: Grew the team from 10+ to 150+
The team grew fifteenfold in three years. We also established a sub-team structure and helped more tech leads and managers step up and take on broader responsibilities.
Learning and growth: What I learned

Team management.

Building and maintaining a shared knowledge system.

Micro-frontend architecture in practice.

How to build bottom-up initiatives within a team.

How to cultivate team culture.

Leading a team remotely during the pandemic.
More at Shopee
More at Shopee
- Applied micro-frontend architecture to the Shopee web app, including server-side rendering logic.
- Established hiring, onboarding, and probation processes.

Period 01Alibaba Cloud (opens in a new tab)2017 — 2019

Developer experience and interface exploration

The Alibaba Cloud Developer Experience team designed and supported frontend development for all Alibaba Cloud consoles. The team had more than 100 members. My work explored the future of cloud-console interfaces, primarily through experimental prototypes and demos created with designers.

Responsibility and scope: Flexible UI exploration
Studied existing cloud-console designs and produced a report covering the primary layout, four common page types, and frequently used data-visualization scenarios.

The proposal offered purpose-built component variants, such as date pickers, for different screen sizes, device platforms, and interaction methods. It became an important reference for designing new pages.

Alibaba Cloud console evolutionEarlier and redesigned cloud-console interfaces.
Highlight and impact: Accessibility in cloud consoles
At the time, most cloud consoles were designed primarily for mouse input. This created problems for iPad users and advanced users who preferred keyboard shortcuts. We also encountered issues such as lost focus, blocked user flows, and inconsistent designs. These problems were closely connected to accessibility practices.

My goal was to make the cloud consoles more accessible and consistent by improving the design system and engineering workflows.

These efforts significantly improved the interaction design and accessibility of the cloud consoles. More importantly, accessibility became a more consistent part of the team's daily work.

As a side project, I open-sourced a Vue.js utility library named vue-a11y-utils.

Vue A11y UtilsDocumentation and an accessible web component examples.
More details
What I've done in details:

I studied accessibility-related W3C specifications and their recommended practices, including implementation in vanilla JavaScript.

I organized recommended product practices around color patterns, accessible foundational components, page-flow guidelines, and common relationships among components.

I identified gaps and worked with designers to address them. We refined color patterns and foundational components. I also identified five common cloud-console page types and created templates and guidelines for each.

I initiated collaboration between Alibaba Cloud and accessibility communities in China, whose experts helped us with accessibility testing and quality assurance.
Cloud consoles in VR devices
Cloud consoles in VR devices
Built an experimental cloud-console prototype in a 3D environment, with an unlimited-size virtual screen, switchable workspace backgrounds, and novel input methods.
Learning and growth: What I learned

Design-system principles.

W3C accessibility standards and practices.

3D graphics programming.

WebVR development.

Period 02Taobao Mobile (opens in a new tab)2013 — 2017

Alibaba Mobile Frontend Infrastructure

The Mobile business unit in Alibaba was focusing on the Taobao app. We also built mobile-app infrastructure for other mobile apps across the company. My role combined hands-on coding with team leadership.

Responsibility and scope: Frontend infrastructure team leadership
Served as technical lead for a frontend infrastructure team of more than 20 developers.

The team's work was divided into four feature lines, each with its own roadmap and headcount. I combined hands-on development with team leadership while supporting both feature delivery and the underlying mobile frontend infrastructure.
Responsibility and scope: Web-based feature delivery for the Taobao app.
Delivered features through the Taobao app's WebView and supported frontend engineering across its four feature lines.

I aligned feature work with the broader mobile infrastructure, helped teams resolve delivery challenges, and gained practical experience delivering embedded web interfaces at Alibaba's scale.
Highlight and impact: 11.11 Shopping Day project management
Served as the overall frontend project manager for Taobao Mobile during the 11.11 Shopping Day in 2014, 2015, and 2016.

Each event required roughly three to six months of preparation across product design, development, and delivery. On the whole Shopping Day, we monitored the product and adjusted configurable business logic when necessary. This work gave me extensive experience in project management, negotiation, and engineering management for large-scale events.
Highlight and impact: Building and open-sourcing Weex
I initiated Weex, a native rendering engine with web dev experiences, designed to provide a lightweight, high-performance, and dynamic view in mobile apps.

I adapted Vue Single-File Components syntax. So developers can build native views by writing Vue SFCs and publish them as a JS bundle which is easy to reload or re-deploy.

The first version debuted on the homepage of the 2015 11.11 Shopping Day. It handled high traffic with average load times under one second, low memory and CPU usage, and a high frame rate.

In 2016 11.11 Shopping Day, it served more than 100 pages and handled most mobile traffic with high performance and delivery efficiency.

We also open-sourced Weex and establishing an official integration and collaboration with Vue.js. Weex went on to support large-scale mobile experiences with strong performance and delivery efficiency.

Weex websiteThe Weex project homepage.
Weex in Taobao appMobile shopping experiences for 11.11 Shopping Day.
More details
This project was built after React Native was announced by Meta in early 2015.

With inspiration of React Native and many other internal projects in Alibaba, we decided to make a "dynamic" version, which is easy to load and deploy as a JS bundle. We picked Vue.js SFC as the DSL. And later in 2016 we regularly supported VanillaJS and React.js.

The development of the first version ran through two months—four Scrum sprints, with 3 iOS engineers, 2 Android engineers, 1 web frontend engineer, and 1 QA engineer.

Beyond developing and leading the project, I gained extensive experience in open source and technical advocacy. I learned from the community and independent developers while significantly improving my presentation and communication skills.
Highlight and impact: Foundational toolkit for mobile web development
Helped develop a foundational toolkit for mobile web development. It included:

A flexible CSS length solution based on the rem unit.

A touch-event library supporting gestures such as tap, pan, rotate, and scale.

An SPA router.

A JavaScript SDK for the Taobao API gateway.

A library for sending analytics data to Taobao's analytics server.

Most APIs automatically determined whether to call a server directly or communicate through the mobile app's native-to-JavaScript bridge. I contributed to every part of the toolkit. Some of the libraries were open-sourced on GitHub.
JSON Butler
JSON Butler
Created a graphical JSON editor that supported nested arrays and objects. It was used in an internal CMS for managing product operations and promotional pages.

The editor had two parts: a schema editor for administrators and a data editor for local operators. Built with Vue.js 0.x, it was my first hands-on experience with component-based frontend development.
Learning and growth: What I learned

HTML5 knowledge and experience for mobile.

Open-source development practices.

Vue.js experience.

Frontend engineering at scale.

Focus 01

Browser UI and web products

Led and contributed to frontend engineering for Maxthon Browser and its web products from 2007 to 2013.

Responsibility and scope: Frontend engineering leadership
I joined Maxthon as its No. 6 employee and a frontend engineer, then grew into the technical lead of a team of more than 15 frontend developers. I led frontend engineering across the browser UI, built-in pages, and company websites. In the early jQuery era, Maxthon was an early adopter of HTML and CSS for internal interfaces, including Settings, the account panel, Bookmark Manager, and History Manager. It was my first full-time role, and I remain proud of the more than six years I spent there.
Highlight and impact: Built-in browser pages
Built browser pages that called native browser APIs. Some also had online versions that communicated with server APIs. All were written in vanilla JavaScript.

Start page: Shown whenever a user opened a new tab, it provided customizable website tiles, themes, and backgrounds. It read and wrote user settings through native JavaScript APIs, and we eventually reduced its load time to under 100 milliseconds.

Bookmark manager: Displayed and managed a user's online bookmarks. It had both an in-browser version communicating through native APIs and an online version using server APIs. It lazily loaded subfolders for users with large bookmark collections and supported efficient interactions such as drag-and-drop, comprehensive keyboard shortcuts, and focus management.

History manager: Similar to the Bookmark Manager, but without an online version for business reasons.

Settings: Displayed all browser settings. We worked closely with native engineers on each configuration field and its corresponding API, and we developed a foundational control library for inputs and outputs. Because some settings were asynchronous, controls such as checkboxes also supported intermediate states.
Maxthon browser interfacesStart page, History, Favorites Manager, and Settings.
Highlight and impact: Browser UI and theme system
Contributed to the main browser UI and the design of the theme system for Maxthon Browser v3.

The interface used HTMLayout, a lightweight HTML rendering engine that allowed the main browser UI to be built with HTML and CSS. The theme system used the same foundation, enabling third-party developers to create personalized browser interfaces.
Highlight and impact: Browser extension system
Participated in the JavaScript API design and documentation for the Maxthon Browser v3 extension system.

Extensions could run JavaScript on web pages and add entry points to the main browser interface, including the toolbar and sidebar. The documentation helped third-party developers build against these APIs.
Highlight and impact: Company websites
Developed company web products including the Maxthon homepage; Maxthon Multi-Search for searching the same keywords across multiple search engines; and Maxthon Today, a comprehensive Chinese web-navigation site backed by a content management system.
Learning and growth: What I learned

Broad frontend engineering knowledge.

Problem-solving, communication, and teamwork skills.

How startups operate and grow.

Focus 02

Standards and team practices

Highlight and impact: Maxthon's W3C membership
Helped Maxthon join W3C in 2013 and served as its W3C contact.

I followed evolving web standards, shared relevant knowledge across the company, and built and maintained a strong relationship with the W3C China office.

Representing Maxthon at W3C Membership MeetingA W3C interview featuring Maxthon and other Chinese browser companies.
Highlight and impact: Introducing Scrum
Introduced Scrum at Maxthon, then served as Scrum master for Start page project, the company's first Scrum project.

The team included 2 product owners, 1 designer, and 4 development team members. Each sprint lasted 2 weeks. The process helped us operate as a cohesive team with fewer disruptions and greater efficiency. I later coached Scrum masters for several other projects.
Learning and growth: What I learned

Web standards and W3C processes.

International communication, English proficiency, and translation skills.

Scrum principles and practical facilitation.

02 / PUBLIC.LOG

Public Contributions

Open source, web standards, technical writing, and talks.

2015 — now

Vue.js (opens in a new tab)

Core team member

CONTRIBUTION / 01

I discovered Vue.js in early 2014 while seeking a lightweight alternative to AngularJS for mobile web applications. I adopted it, introduced it to the team, and gradually got involved into the community. This part of my journey also appears in Vue.js: The Documentary.

Vue.js — The DocumentaryInterview segment featuring me.

Responsibility and scope: Vue team member
I Joined the Vue.js core team during the early development of Vue 2 and contributed to cross-platform rendering, build tooling, documentation, localization, and the wider developer community.
Highlight and impact: Vue 2 renderer for Weex
I became a Vue.js team member during the early development of Vue 2, when Alibaba was working with the Vue team to integrate Weex and Vue.js.

Drawing on my knowledge of both projects, I worked with Vue creator Evan You to implement the core of the Weex renderer for Vue 2 and integrate the two projects. This enabled Vue developers to build native Weex interfaces using familiar Vue Single-File Components.
Highlight and impact: vue-loader maintenance
Before Vue CLI 2 and Vite, vue-loader was the primary official tool for Vue developers working with Single-File Components.

I maintained vue-loader during this period and resolved integration issues involving webpack, CSS preprocessors, and JavaScript preprocessors.
Highlight and impact: Vue documentation and localization
I have contributed to the Vue's official documentation and its Chinese translation since Vue 0.x, while also addressing localization and deployment issues.

So far we have made documentations for Vue.js 1.x, 2.x, and 3.x.
Highlight and impact: Vue.js Translations Organization
Organized the Vue.js Translations Organization to coordinate community translation efforts beyond the Chinese documentation. The organization brings language-specific documentation repositories together with shared guidelines and workflows, helping translation teams collaborate across the broader Vue community.
Learning and growth: What I learned

Open-source development practices.

How to build and evolve a JavaScript framework.

English communication and technical translation.

How a global project balances framework evolution, contributor experience, and community needs.

2014 — 2018

W3C HTML Chinese Interest Group (opens in a new tab)

Co-chair

CONTRIBUTION / 02

The W3C HTML Chinese Interest Group worked closely with the W3C HTML Working Group. It fostered discussion of HTML and related web standards within the Chinese web community and gathered comments and questions for the Working Group.

Responsibility and scope: Interest Group co-chair
Served as co-chair from 2014 to 2018, facilitating online and in-person discussion and feedback between Chinese web practitioners and the international standards community.
Highlight and impact: Chinese-language standards discussion
Encouraged and organized Chinese-language discussions about HTML and related web standards. These discussions helped local developers follow standards work and channel implementation questions to the relevant W3C groups.

We also organized public events where participants could discuss and learn about evolving web standards.
Highlight and impact: Requirements for Chinese text layout
Helped initiate and organize early work on Requirements for Chinese Text Layout, bringing the distinct layout behaviors and expectations of Chinese typography into web-standards discussions.

The work translated regional publishing needs into requirements that browser vendors, typography experts, and standards groups could review together.
Highlight and impact: Specification translation
Organized a group to translate new HTML and related W3C specifications into Chinese, enabling more Chinese developers to read, discuss, and participate in the standards process.
Highlight and impact: Community knowledge infrastructure
Created a GitHub organization and a W3C wiki to document translations, discussions, events, and other community work.
Highlight and impact: Evolution into the Chinese Web Interest Group
In 2018, the HTML Chinese Interest Group became the Chinese Web Interest Group, with a broader mission of strengthening participation in web-standards work from the Chinese web community.
Learning and growth: What I learned

How W3C documents are developed.

Communication through email and IRC.

Consensus building and long-running community collaboration.

Cross-cultural communication and technical translation.

01PROJECTS

Chinese-language tooling

zhlint (opens in a new tab)

A linter for Chinese-language text.

Vue.js · Accessibility

vue-a11y-utils (opens in a new tab)

Accessibility utilities for Vue.js applications.

Vue.js · Build tooling

vue-simple-compiler (opens in a new tab)

Compiles Vue Single-File Components into plain JavaScript and CSS.

Markdown · Presentation tooling

Marked Slides (opens in a new tab)

A component that renders Markdown into slides.

Swift · macOS

joy-con-codex-micro (opens in a new tab)

A native macOS companion that turns a paired Nintendo Switch Joy-Con into a configurable controller for keyboard shortcuts.

02TALKS

CityJS Singapore · 2024

Northwestern Polytechnical University

Bachelor of Software Engineering · Xi’an, China

Introduction to Information Systems
Introduction to Computer Systems
Object-Oriented Programming and Design
User-Centered Design and Testing
Data Structures and Algorithms
System-Level Programming
Database Systems
Networks and Distributed Computing
Software Specification, Testing, and Maintenance
Software Project Organization and Management

AFTER HOURS

Curiosity, community, and life beyond code.

Football⚽️ A football coach certified by Football Association of Singapore (FAS) since 2025.

Marathon🏃 A Marathon finisher, Singapore Marathon 2025.

Podcast🎙️ Co-host a Mandarin tech podcast: Beyond Code FM (代码之外) since 2023