Skip to content

Commit d69db60

Browse files
sfshaza2sfshaza2
authored
Further feedback for Flutter web (#11628)
Based on our Friday discussion. @kevmoo @yjbanov, please review!
1 parent b4de344 commit d69db60

File tree

4 files changed

+93
-41
lines changed

4 files changed

+93
-41
lines changed

‎diagrams/resources/web-framework-diagram.drawio

+31-28
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36" version="26.0.7">
1+
<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36" version="26.0.11">
22
<diagram name="Page-1" id="iEswzy7BcGWgSbrlDjEJ">
3-
<mxGraphModel dx="1226" dy="746" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
3+
<mxGraphModel dx="1070" dy="669" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
44
<root>
55
<mxCell id="0" />
66
<mxCell id="1" parent="0" />
@@ -19,9 +19,6 @@
1919
<mxPoint x="165" y="640" as="targetPoint" />
2020
</mxGeometry>
2121
</mxCell>
22-
<mxCell id="eU0kjX7wS5xwUF7xRdHj-7" value="&lt;font style=&quot;font-size: 22px;&quot;&gt;&lt;b&gt;Browser&lt;/b&gt;&lt;/font&gt;&lt;div&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;JavaScript / C++&lt;/font&gt;&lt;/div&gt;" style="text;html=1;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
23-
<mxGeometry x="30" y="489" width="150" height="30" as="geometry" />
24-
</mxCell>
2522
<mxCell id="eU0kjX7wS5xwUF7xRdHj-10" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diag;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;fillColor=#008a00;fontColor=#ffffff;strokeColor=#005700;" parent="1" vertex="1">
2623
<mxGeometry x="180" y="85" width="330" height="45" as="geometry" />
2724
</mxCell>
@@ -70,29 +67,8 @@
7067
<mxCell id="eU0kjX7wS5xwUF7xRdHj-27" value="&lt;span style=&quot;font-size: 22px;&quot;&gt;Painting&lt;/span&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=28;fontColor=light-dark(#ffffff, #ededed);" parent="1" vertex="1">
7168
<mxGeometry x="480" y="275" width="80" height="35" as="geometry" />
7269
</mxCell>
73-
<mxCell id="eU0kjX7wS5xwUF7xRdHj-28" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diag;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;fillColor=#f0a30a;fontColor=#000000;strokeColor=#BD7000;" parent="1" vertex="1">
74-
<mxGeometry x="180" y="481.5" width="160" height="45" as="geometry" />
75-
</mxCell>
7670
<mxCell id="eU0kjX7wS5xwUF7xRdHj-29" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diag;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;fillColor=#f0a30a;fontColor=#000000;strokeColor=#BD7000;" parent="1" vertex="1">
77-
<mxGeometry x="348" y="481.5" width="152" height="45" as="geometry" />
78-
</mxCell>
79-
<mxCell id="eU0kjX7wS5xwUF7xRdHj-30" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diag;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;fillColor=#f0a30a;fontColor=#000000;strokeColor=#BD7000;" parent="1" vertex="1">
80-
<mxGeometry x="510" y="481.5" width="170" height="45" as="geometry" />
81-
</mxCell>
82-
<mxCell id="eU0kjX7wS5xwUF7xRdHj-31" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diag;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;fillColor=#f0a30a;fontColor=#000000;strokeColor=#BD7000;" parent="1" vertex="1">
83-
<mxGeometry x="690" y="481.5" width="170" height="45" as="geometry" />
84-
</mxCell>
85-
<mxCell id="eU0kjX7wS5xwUF7xRdHj-33" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;HTML/CSS&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
86-
<mxGeometry x="230" y="489" width="60" height="30" as="geometry" />
87-
</mxCell>
88-
<mxCell id="eU0kjX7wS5xwUF7xRdHj-34" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;Canvas&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
89-
<mxGeometry x="394" y="489" width="60" height="30" as="geometry" />
90-
</mxCell>
91-
<mxCell id="eU0kjX7wS5xwUF7xRdHj-35" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;WebGL&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
92-
<mxGeometry x="565" y="489" width="60" height="30" as="geometry" />
93-
</mxCell>
94-
<mxCell id="eU0kjX7wS5xwUF7xRdHj-36" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;WebAssembly&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
95-
<mxGeometry x="745" y="489" width="60" height="30" as="geometry" />
71+
<mxGeometry x="180" y="481.5" width="160" height="45" as="geometry" />
9672
</mxCell>
9773
<mxCell id="7qe8jE41nwvI0GSgo9u9-1" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diag;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;fillColor=#dae8fc;strokeColor=#6c8ebf;labelBackgroundColor=default;textShadow=1;" parent="1" vertex="1">
9874
<mxGeometry x="20" y="400" width="850" height="60" as="geometry" />
@@ -112,7 +88,7 @@
11288
<mxCell id="7qe8jE41nwvI0GSgo9u9-6" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diag;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;fillColor=#1ba1e2;fontColor=#ffffff;strokeColor=#006EAF;" parent="1" vertex="1">
11389
<mxGeometry x="690" y="407.5" width="170" height="45" as="geometry" />
11490
</mxCell>
115-
<mxCell id="7qe8jE41nwvI0GSgo9u9-7" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;Rendering&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
91+
<mxCell id="7qe8jE41nwvI0GSgo9u9-7" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;Compositor&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
11692
<mxGeometry x="230" y="415" width="60" height="30" as="geometry" />
11793
</mxCell>
11894
<mxCell id="7qe8jE41nwvI0GSgo9u9-8" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;Embedding&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
@@ -124,6 +100,33 @@
124100
<mxCell id="7qe8jE41nwvI0GSgo9u9-10" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;Accessibility&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
125101
<mxGeometry x="745" y="415" width="60" height="30" as="geometry" />
126102
</mxCell>
103+
<mxCell id="NK9HXle7FpP0BrMxsV12-2" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;WebGL&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
104+
<mxGeometry x="584.5" y="489" width="60" height="30" as="geometry" />
105+
</mxCell>
106+
<mxCell id="uTWjtHHHEZxcMKsox1Cd-2" value="&lt;font style=&quot;font-size: 22px;&quot;&gt;&lt;b&gt;Browser&lt;/b&gt;&lt;/font&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="text;html=1;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
107+
<mxGeometry x="30" y="494" width="150" height="30" as="geometry" />
108+
</mxCell>
109+
<mxCell id="uTWjtHHHEZxcMKsox1Cd-4" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;HTML/CSS&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
110+
<mxGeometry x="225" y="489" width="60" height="30" as="geometry" />
111+
</mxCell>
112+
<mxCell id="uTWjtHHHEZxcMKsox1Cd-5" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diag;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;fillColor=#f0a30a;fontColor=#000000;strokeColor=#BD7000;" vertex="1" parent="1">
113+
<mxGeometry x="520" y="481.5" width="160" height="45" as="geometry" />
114+
</mxCell>
115+
<mxCell id="uTWjtHHHEZxcMKsox1Cd-6" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diag;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;fillColor=#f0a30a;fontColor=#000000;strokeColor=#BD7000;" vertex="1" parent="1">
116+
<mxGeometry x="350" y="481.5" width="160" height="45" as="geometry" />
117+
</mxCell>
118+
<mxCell id="uTWjtHHHEZxcMKsox1Cd-9" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;JavaScript&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
119+
<mxGeometry x="395" y="489" width="60" height="30" as="geometry" />
120+
</mxCell>
121+
<mxCell id="uTWjtHHHEZxcMKsox1Cd-10" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;WebGL&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
122+
<mxGeometry x="565" y="489" width="60" height="30" as="geometry" />
123+
</mxCell>
124+
<mxCell id="uTWjtHHHEZxcMKsox1Cd-13" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diag;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;fillColor=#f0a30a;fontColor=#000000;strokeColor=#BD7000;" vertex="1" parent="1">
125+
<mxGeometry x="690" y="481.5" width="170" height="45" as="geometry" />
126+
</mxCell>
127+
<mxCell id="uTWjtHHHEZxcMKsox1Cd-14" value="&lt;font style=&quot;font-size: 22px; color: rgb(255, 255, 255);&quot;&gt;WebAssembly&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
128+
<mxGeometry x="742" y="489" width="60" height="30" as="geometry" />
129+
</mxCell>
127130
</root>
128131
</mxGraphModel>
129132
</diagram>

‎src/content/assets/images/docs/arch-overview/web-framework-diagram.drawio.png

-1.38 KB
Loading

‎src/content/perf/impeller.md

+11-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ check out the [Can I use Impeller?][] page.
1616

1717
Impeller provides a new rendering runtime for Flutter.
1818
Impeller precompiles a [smaller, simpler set of shaders][]
19-
at Engine-build time so they don't compile at runtime.
19+
at engine-build time so they don't compile at runtime.
2020

2121
[smaller, simpler set of shaders]: {{site.repo.flutter}}/issues/77412
2222

@@ -76,7 +76,7 @@ Flutter **enables Impeller by default** on iOS.
7676

7777
Flutter **enables Impeller by default** on Android.
7878
On devices that don't support Vulkan,
79-
Impeller will fallback to the the legacy OpenGL renderer.
79+
Impeller falls back to the the legacy OpenGL renderer.
8080
No action on your part is necessary for this fallback behavior.
8181

8282
* To _disable_ Impeller when debugging,
@@ -96,6 +96,15 @@ No action on your part is necessary for this fallback behavior.
9696
android:value="false" />
9797
```
9898

99+
### Web
100+
101+
Flutter on the web offers two renderers and
102+
two build modes. For more information, visit
103+
[Flutter web support][] in the Flutter
104+
architectural guide.
105+
106+
[Flutter web support]: /resources/architectural-overview#flutter-web-support
107+
99108
### macOS
100109

101110
You can try out Impeller for macOS behind a flag.

‎src/content/resources/architectural-overview.md

+51-11
Original file line numberDiff line numberDiff line change
@@ -591,7 +591,7 @@ such as Windows or macOS.
591591
:::note
592592
If you want to know which devices Impeller supports,
593593
check out [Can I use Impeller?][].
594-
For more information on Impeller,
594+
For more information,
595595
visit [Impeller rendering engine][]
596596
:::
597597

@@ -1056,16 +1056,56 @@ is designed to interface with the
10561056
underlying operating system rather than a web browser.
10571057
A different approach is therefore required.
10581058

1059-
On the web, Flutter offers two build modes and two renderers.
1060-
Flutter has a canvas-based renderer with two compile modes:
1061-
JS and Wasm.
1062-
1063-
Flutter chooses the build mode when building the app,
1064-
and determines which renderers are available at runtime.
1065-
For a default build, Flutter chooses the `canvaskit`
1066-
renderer at runtime. For a WebAssembly build,
1067-
Flutter chooses the `skwasm` renderer at runtime,
1068-
and falls back to canvaskit if the browser doesn't support skwasm.
1059+
On the web, Flutter offers two renderers:
1060+
1061+
<table class="table table-striped">
1062+
<tr>
1063+
<th>Renderer</th>
1064+
<th>Compilation target</th>
1065+
</tr>
1066+
1067+
<tr>
1068+
<td>CanvasKit
1069+
</td>
1070+
<td>JavaScript
1071+
</td>
1072+
</tr>
1073+
1074+
<tr>
1075+
<td>Skwasm
1076+
</td>
1077+
<td>WebAssembly
1078+
</td>
1079+
</tr>
1080+
</table>
1081+
1082+
_Build modes_ are command-line options that dictate
1083+
which renderers are available when you run the app.
1084+
1085+
Flutter offers two _build_ modes:
1086+
1087+
<table class="table table-striped">
1088+
<tr>
1089+
<th>Build mode</th>
1090+
<th>Available renderer(s)</th>
1091+
</tr>
1092+
1093+
<tr>
1094+
<td>default</td>
1095+
<td>CanvasKit</td>
1096+
</tr>
1097+
1098+
<tr>
1099+
<td>`--wasm`</td>
1100+
<td>Skwasm (preferred), CanvasKit (fallback)</td>
1101+
</tr>
1102+
1103+
1104+
The default mode makes only CanvasKit renderer available.
1105+
The `--wasm` option makes both renderers available,
1106+
and chooses the engine based on browser capabilities:
1107+
preferring Skwasm if the browser is capable of running it,
1108+
and falls back to CanvasKit otherwise.
10691109

10701110
{% comment %}
10711111
The draw.io source for the following image is in /diagrams/resources

0 commit comments

Comments
 (0)