Removing Obstacles in Connecting Flutter to the Greater Web Ecosystem

Why Do We Want to Connect Them?

  • From Web to Flutter: You can use a web technology stack for development and then integrate it with Flutter for cross-platform rendering. From the web ecosystem perspective, this solves the problems of performance and cross-platform consistency. From the Flutter perspective, this solves the problem of ecosystem reuse.
  • From Flutter to Web: The official implementation of web support for Flutter compiles apps developed with Dart into HTML-, JS-, or CSS-based apps and then runs them on the browser. This approach can be used in degradation and external feeding scenarios.

How to Transform from Web to Flutter?

  • TS transformation: Use the JS engine to replace the Dart VM and use JS or TS to re-implement the Flutter framework, or directly compile by using dart2js.
  • JS integration: Introduce the JS engine while retaining the Dart VM, and connect to the Flutter framework by using the frontend framework.
  • C++ transformation: Use the JS engine to replace the Dart VM and use C++ to re-implement the Flutter framework.

TS Transformation

JS Integration

C++ Transformation

Comparison of the Solutions

How to Transform from Flutter to Web

Implementation Principles

  • You can use dart2js to compile the framework into the JS format.
  • Then, you re-implement dart:ui (specifically dart:web_ui) based on browser APIs.

Existing Problems

Optimizations

A More Adaptable Architecture

  • Framework: serves as the development framework. The framework provides programmable APIs to implement a responsive development mode and fine-grained widgets that developers can freely encapsulate and combine.
  • Renderer: serves as the rendering engine. This layer processes layout, rendering, animation, and gestures. These functions are relatively independent and can be decoupled from the development framework without being bound to a specific language.
  • Engine: serves as the graphic engine. This layer provides consistent graphic APIs across platforms. It composites input layers and draws the result on the screen, while also handling the introduction and adaptation of platform capabilities.

Back to the Beginning: Do We Really Want to Integrate Flutter and Web?

Original Source:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com