Flutter For Web Practice-京东云开发者社区

Flutter For Web has been released for more than a year. Its release means that we can deploy the entire frontend system (including iOS, Android, Web) with one set of codes and one set of resources. After a period of exploration, the Channel R&D Team developed a mobile visual programming platform - Flutter Lego with Flutter For Web technology. This article will share the practice process and trial practice of Flutter For Web, Suggestions and opinions are welcomed.
# About Flutter For Web 
## What Is Flutter
Flutter is a set of UI toolkits open sourced by Google, which helps developers efficiently build multi-platform fine applications through a set of code base, and supports mobile apps, web, desktop and embedded platforms. Flutter differs greatly from other cross-platform solutions in terms of the implementation.
  The React Native (RN) cross-platform solution is taken as an example here. In RN, JavaScript (JS) language is used by developers and a bridge layer is involved. The bridge layer provides a complete set of APIs, so that JS code can directly use the UI components and related API methods provided by mobile, and combine these components to finally realize the presentation of the entire page.
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/a4f7a606-fa66-4be1-a2b3-a2d4825d2ffe20210508110508.png)</center>
<center>React Native Cross-Platform Solution</center>
  Instead of using the UI components provided by mobile platforms, Flutter moves the implementation of the UI components up into the Framework layer of Flutter and then calls the underlying rendering engine provided by the platform to draw the UI components generated in the Framework directly. This maximizes the consistency of the UI presentation and user experience of the same set of code across platforms and devices. However, except for UI drawing, Flutter is basically similar to other cross-platform solutions in terms of bridging other native capabilities.
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/747d5ee0-94dd-4fcf-88b7-79492beca52d20210508110544.png)</center>
<center>Flutter Cross-Platform Solution</center>

In the entire Flutter solution, Flutter For Web and Flutter For Mobile are implemented differently. Flutter For Web should be eventually embedded into the browser for drawing and display. Therefore, a lot of its capabilities depend on the APIs and capabilities that browsers provide externally. However, unlike iOS and Android, browsers do not provide a set of widely used, complete and efficient rendering APIs, which makes Flutter For Web and Flutter For Mobile architecturally different.
# Flutter For Web
The purpose of Flutter For Web is to enable Flutter to have Web-enabled capabilities even with a single code base. This allows applications developed with Flutter to be deployed not only on iOS and Android phones, but also on any Web server and embedded in a browser without the need for special browser plug-ins.

The Flutter For Web and Flutter For Mobile are implemented basically similar in the upper layer, but different in the lower layer. The drawing in Flutter For Mobile shall use Dart, Skia, and Text from the Engine and then call the underlying rendering capabilities provided by iOS and Android.
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/598d0e33-2bb1-4550-869a-e9f8fb2ec9bf20210508110646.png)</center>
<center>Flutter For Mobile</center>
  In the case of the browser environment, there is no complete set of rendering APIs, so Cavans, Dom or a combination of the two will be used in the rendering process.
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/4d5c4542-4d2c-4dcc-988c-62068d7aca3720210508110745.png)</center>
<center>Flutter For Web</center>
In the actual development and drawing process of Flutter For Web, Dart language is first used for development; after development, Dart 2JS base is used to convert Dart implemented code into corresponding JS code during compilation. In the js code, some simple UI components that can be implemented by HTML and CSS will be drawn by HTML and CSS, while some complex UI components will be drawn directly with Canvas, and then be rendered in the browser through generation of Dom tree.
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/8895b5c0-2d95-4851-93ce-fc6c1758117820210508110821.png)</center>

However, since many complex components are difficult to draw using HTML+CSS during Dart 2JS conversion, many components will be drawn directly through Canvas, which will lead to some efficiency problems for Web applications developed using Dart. This is also an existing problem with Flutter For Web that is to be optimized and solved.
# Development process
How do you use a set of code during development that is compatible with both Flutter For Mobile and Flutter For Web?
## Configure the development environment
First, the master or Flutter SDK of the dev channel is required to obtain Web support.
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/7e147bd1-5e12-46d1-91ba-49139924cd2d20210508110930.png)</center>

## Create an application
Create an app called myapp.
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/19f65a0f-6317-4242-b5ac-96c2d1c8bc1920210508111134.png)</center>

## cd myapp compilation
The compilation shall
add support for flutter Web to the build web directory

To add support for the Flutter For Web to an existing project, the following command is required:
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/31918a90-6cae-4a65-b5f9-cd4a6fa8b8d020210508111310.png)</center>

# Code structure
   For a Flutter application that adds support for Flutter For Web, it adds a Web folder in the code directory that contains the index.html file as the entry point to the entire Web application. In which, main.dart.js, a JS file is referenced, but we cannot find this file in the project directory. This file is actually the js file generated after our Flutter project is compiled. If we have compiled this project successfully, we can find this JS file in the build folder after compilation.

As with the normal Flutter applications, the main function implementation of Flutter is in the lib folder in the project. But if you have resource files, JS files, and other web resources, you can put them in the Web folder.
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/1957f416-a10f-4149-b6d7-8f9f714db2dc20210508111415.png)</center>

# Compiled products
The compiled products of the Flutter For Web application are located in the Web directory under the build folder. Where, the assets and icon folders contain the resource files of the Web application. The index.html file is the entry point to the entire Web application, and main.dart.js is the JS file generated after the DART code is compiled.
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/765c814d-4643-40c5-83ad-0dcfb906d87520210508111555.png)</center>

In which, the main.dart.js is about 2.6M in size, which is very large JS base for a web application with less complex functions. As a result, it may take a long time to load for the first time, which is also an issue that shall be optimized further.
# Problems with the development of Flutter For Web
## Platform Differences for Dart Bases
1. Some code bases are not supported in Flutter web

For example: dart.io cannot be used in the web and supports files, sockets, HTTP and other I/O operations for non-web applications.

2. Some bases can only be used in Flutter Web

For example: dart:html is a base for html-related operations, such as document, ua, cookie;

For example: dart:js is a base for interaction between dart and JS. It can pass parameters to js methods, and even bring js parameters back, etc.;

So this presents a lot of challenges for us to implement multi-platform compatibility through a single set of code.

We can solve this problem by using conditional references. For example, in the following code, our network requests for mobile and web are implemented respectively in the two files of httpReuqest-mobile.dart and httpReuqest-web.dart. If the current platform supports dart.library.html (or the web), the network request will be implemented in the httpReuqest-web.dart file, whereas if the current platform supports dart.library.io (or the mobile platform), the network request will be implemented in the httpReuqest-mobile.dart.
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/54cc4667-b78e-4302-9ae0-552773eea15b20210508111743.png)</center>

## Differences with mobile client development
In most cases, there is no difference between web development and mobile client development using Fluter, but there are a few areas of concern.

At present, except for few third-party bases that support Flutter web, and most bases still only support mobile development.

The Cookies in Flutter web are actually managed by the browser, so the cookies cannot be set freely like mobile client development.

Cross-origin resource sharing: For the ajax requests from a web page, the paths must be of the same domain name as the current page, which can effectively prevent cross-site attacks. Therefore, unlike the client, the web can only request the network APIs of this domain name, except that the API is set to accept cross-origin resource sharing.

## Performance
Flutter For Web is currently associated with single-page applications. The size of main.dart.js will easily exceed 1M after the compilation of even the simplest web application. Secondly, since many components in the page are actually drawn directly using canvas, the drawing speed will be slower than that of web applications using HTML+CSS, resulting in performance problems. The initial loading speed on PC is slightly slower, while the mobile will delay by more than 2s. Complex lists can slide at 10+ FPS, which is to be optimized officially.

Sample website: https://dev.kuyichang.com/，https://rive.app/  http://jetpack.ibaozi.cn/

# Summary
  Flutter For Web is an improving, developing and promising technology,
  
**Merits**：
l  A code base can support both mobile and Web
l  Adaptive layout
l  Support PWA
l  Most of the official components support the Web
l  Lower labor cost and better development efficiency

**Demerits**：
l  Performance issues, even though they are constantly being optimized
l  Not SEO friendly
l  Smaller community, fewer developers
l  SDK is bulky and takes a long time to load
l  It is difficult to debug
# Outlook
Flutter For Web has a lot to be optimized and improved by Google.

1. Support for different browsers

Different browsers, such as chrome, safari, firefox, ie/Edge, support different protocols to varying degrees, and some have their own APIs and protocols. How to make Flutter compatible with different browsers is a big challenge for Flutter For Web.

2. Performance optimization

First, the size of compiled JS shall include subsequent JS subpackages
  Second, the rendering efficiency shall be improved

3. Ecological improvement

The support of third-party bases for the Web is also crucial to the development of Flutter For Web.
  
  Of course, each technique has its uses. The scenarios that Google recommends using flutter web include Progressive Web Apps (PWA), Single Page Apps (SPA), and migration of existing apps. If these problems are solved properly, Flutter For Web should be able to gain a place in the development of these areas.

------------

###### Programmer Language Specifications Tech-JDL
###### Author: Hao Hongwei, User Product Department

------------