How Alibaba’s Open‑Source Kraken Engine Redefines Front‑End Rendering

Alibaba’s self‑developed Web rendering engine Kraken, three years in the making, is now open‑sourced. It aims to be extensible, cross‑platform, and high‑performance, and is already used in services such as Youku, Damai and Tmall.

Background

Cross‑platform development relies heavily on browsers, which provide a mature, standards‑based container but were not originally designed for performance, especially on mobile. Historical baggage, compatibility issues, and slow vendor updates limit browser performance on mobile devices despite hardware advances.

Earlier cross‑platform approaches evolved from pure H5 to Hybrid, then to Weex/React Native, and now to Flutter, which gained popularity due to its lightweight rendering pipeline, efficient layout, and self‑draw capabilities.

However, Flutter’s reliance on Dart and its widget‑centric model creates a gap for existing front‑end ecosystems, and its Web support remains immature. Introducing a new technology therefore first requires solving the cost of adoption.

Kraken was created as a high‑performance, W3C‑standard‑based rendering engine that bridges the front‑end ecosystem with native rendering.

Based on W3C Standards

Kraken targets front‑end developers, aiming for “zero‑cost” onboarding by leveraging the familiar W3C standards rather than inventing a new DSL. Whether developers use Rax, Vue, React, or Angular, Kraken strives to let them adopt the engine with minimal learning curve.

Strong Front‑End Ecosystem Support

Because Kraken follows W3C standards, developers can reuse the vast existing front‑end ecosystem. Any framework—Rax, Vue, React, Angular—renders correctly on Kraken.

Millions of NPM packages are directly usable in Kraken projects, providing mature modules that boost development efficiency.

Common development tools also work without additional learning cost.

Integration with the Chrome DevTools Protocol lets developers debug pages using familiar Chrome DevTools, covering CSS, DOM, and JavaScript debugging.

Rendering Consistency

Kraken’s rendering follows W3C standards, guaranteeing pixel‑perfect consistency with web browsers across iOS, Android, and web versions.

Better Experience and Capabilities

Beyond familiar development and debugging, Kraken provides several advanced capabilities.

Infinite‑Scroll Lists

Kraken introduces a new CSS display value – sliver – that recycles render objects when they scroll out of the viewport, reducing memory usage and improving FPS for large lists.

A demo with tens of thousands of nodes shows that a container using

display: sliver

maintains stable FPS, while a traditional

overflow: scroll

container drops noticeably.

Synchronous Rasterization

Unlike browsers where rasterization is asynchronous and can cause white‑screen flashes during inertial scrolling, Kraken leverages Flutter’s efficient synchronous rasterization to achieve smooth long‑list scrolling without flashes.

Enhanced Gesture Support

Kraken bundles common gestures natively, eliminating the need for JavaScript libraries that hijack touch events. For example, a swipe gesture can be attached simply as:

<code>element.addEventListener('swipe', (gestureEvent) => {
    // ...
});
</code>

This reduces UI‑thread load and resolves issues such as gesture penetration.

Plugin Architecture

Developers can write Flutter plugins to extend Kraken’s capabilities, adding custom tags (e.g., Camera, video player) or sinking performance‑critical components (e.g., Slider) to the container layer. Plugins also allow extending gesture handling, providing richer interaction possibilities.

Stability Assurance

Kraken employs a high‑coverage automated test suite to ensure that changes do not break existing behavior. Over 3,000 test cases are maintained, with continuous expansion to cover more scenarios.

Production Adoption

Kraken is deployed on mobile devices and low‑performance IoT hardware in Alibaba’s consumer‑facing scenarios. In the Youku app, a page refactored with Kraken achieved a 28.4% reduction in first‑paint time and an 8.3% increase in frame rate.

On IoT devices, Kraken delivers smooth animations and stable memory usage in complex components such as sliders.

Community Collaboration Model

The Kraken team encourages community contributors to co‑develop core capabilities and ecosystem tools. A Technical Steering Committee (TSC) guides technical direction, releases, and standards.

Future Outlook

Kraken opens new possibilities for front‑end engineers to redefine browser capabilities, including:

Surpassing web performance to approach native experience.

Accelerating standard adoption by implementing features ahead of browser vendors.

Optimizing the entire rendering pipeline end‑to‑end.

Abstracting common functionalities into the container layer, reducing reliance on large JavaScript bundles.

Exploring cloud‑plus‑edge rendering models.

Continuously expanding the ecosystem through plugins.

Ultimately, Kraken aims to deliver better performance and richer capabilities while inviting developers to help shape its evolution.

Official site: https://openkraken.com

GitHub: https://github.com/openkraken/kraken