Discover Kraken: Alibaba’s Flutter‑Based Dynamic Rendering Framework

What is Kraken?

Kraken is a dynamic rendering framework developed by Alibaba’s front‑end architecture team. It combines Flutter’s rendering engine with the Rax component model to provide a cross‑platform solution for IoT and mobile apps, allowing UI and logic to be updated from the cloud without republishing the app.

Background

Created in late 2018 for the “Future Store” project, Kraken evolved from a GCanvas API prototype to a full TypeScript implementation that integrates Flutter and Web technologies.

Key Advantages

Zero learning cost: developers use standard W3C HTML, CSS, and DOM.

Leverages the extensive npm ecosystem (100k+ packages).

Fast, partial updates and efficient layout thanks to Flutter’s rendering pipeline.

Supports both V8 and JavaScriptCore engines.

Rich debugging with source‑map, HMR, and DevTools.

Multi‑platform support: Android, iOS, macOS, Linux.

Installation

$ npm i @kraken-project/cli -g

Demo Applications

Examples include TodoMVC, animation with anime.js, draggable list (react‑motion), long‑list scrolling, Granule particle demo, rich‑text rendering, and a Flutter‑C integration.

Development Tools

Standard front‑end tooling works out of the box: VSCode/WebStorm, ESLint, Jest, Webpack, and Chrome/Safari DevTools for debugging.

Future Directions

Kraken will continue to add native capabilities (Camera, AnimationPlayer), expand IoT scenarios, and explore C‑side deployments.