Rethinking Cross‑Platform: Logic‑First Approach with Dart, Flutter & React

Hello, I am Dang Xuan from Alibaba ICBU Interactive Tech Team, presenting at the 15th D2 conference on "Another Way of Cross‑Platform".

Developers often miss the natural cross‑platform capability and efficiency of the Web, yet Web apps lack the performance and experience of native apps. The classic slogan "Write Once, Run Everywhere" sounds ideal, but real solutions fall short.

Existing cross‑platform options each have trade‑offs:

Web offers excellent development efficiency but high optimization difficulty for performance and experience.

React‑Native provides better performance than Web but reduces development efficiency and consistency across platforms.

Flutter delivers good performance and consistency on apps, but its Web performance is poor and cannot satisfy SEO requirements.

These gaps arise because cross‑platform solutions bring benefits while also adding costs in certain areas.

We propose a lower‑cost approach: Write Logic Once – share only business logic across platforms, keeping UI separate.

Example: Alibaba.com transaction scenario spans Android, iOS, mobile site, and PC web. UI interactions differ, but business logic is the same, and app platforms demand high performance. Coordinating a simple feature across all platforms incurs high communication overhead.

Flutter was considered for UI, but Flutter for Web lacks mature performance. A JavaScript container with Yoga was also evaluated, yet its construction cost and abstraction overhead were questionable for this case.

Thus we focus on sharing business logic only, allowing front‑end developers to own the logic without heavy container modifications.

Language choice : Dart is a ready option, designed for the Web and compiled to JavaScript. However, Dart’s type system lacks some dynamic features (e.g., string | number), so we explore TypeScript‑to‑Dart transpilation using the TypeScript compiler API, mapping types and falling back to dynamic when necessary.

Separating logic and UI : Pure functions are easy to extract, but real logic includes lifecycle, rendering, and state changes. To reuse logic between Flutter and Web (React), we define a common interface.

Flutter and React share similar component construction and diff‑based rendering, so the same logical abstraction can be used. React Hooks illustrate how to extract logic from UI with minimal cost.

We implement a HooksWidget in Flutter that resets a counter on each render, stores the component in a closure, and lets Hooks locate their state via the counter, enabling stateful logic reuse.

Dart’s conditional imports allow platform‑specific implementations while keeping a unified interface, and the js package enables Web code to call native JavaScript, letting the same Hooks logic run on both Flutter and React.

The demo shows that this approach can achieve better performance than Flutter for Web, while still allowing platform‑specific optimizations.

Key takeaways:

"Write Once" is ideal; "Write Logic Once" solves many scenarios.

The proposed method fits logic‑heavy, not UI‑heavy, cases.

Even with Dart or TypeScript, some abstraction leakage remains, and complex debugging still relies on developer experience.