Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Incorporating further feedback from Yegor and Kevmoo
Browse files Browse the repository at this point in the history
sfshaza2 committed Jan 29, 2025
1 parent b4d41ff commit c44179a
Showing 4 changed files with 82 additions and 19 deletions.
20 changes: 13 additions & 7 deletions diagrams/resources/web-framework-diagram.drawio
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<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">
<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.9">
<diagram name="Page-1" id="iEswzy7BcGWgSbrlDjEJ">
<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">
<root>
@@ -19,7 +19,7 @@
<mxPoint x="165" y="640" as="targetPoint" />
</mxGeometry>
</mxCell>
<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/Wasm&lt;/font&gt;&lt;/div&gt;" style="text;html=1;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<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">
<mxGeometry x="30" y="489" width="150" height="30" as="geometry" />
</mxCell>
<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">
@@ -71,16 +71,16 @@
<mxGeometry x="480" y="275" width="80" height="35" as="geometry" />
</mxCell>
<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">
<mxGeometry x="180" y="481.5" width="320" height="45" as="geometry" />
<mxGeometry x="180" y="481.5" width="210" height="45" as="geometry" />
</mxCell>
<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">
<mxGeometry x="510" y="481.5" width="350" height="45" as="geometry" />
<mxGeometry x="650" y="481.5" width="210" height="45" as="geometry" />
</mxCell>
<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">
<mxGeometry x="310" y="489" width="60" height="30" as="geometry" />
<mxGeometry x="247" y="489" width="60" height="30" as="geometry" />
</mxCell>
<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">
<mxGeometry x="655" y="489" width="60" height="30" as="geometry" />
<mxCell id="eU0kjX7wS5xwUF7xRdHj-35" 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">
<mxGeometry x="720" y="489" width="60" height="30" as="geometry" />
</mxCell>
<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">
<mxGeometry x="20" y="400" width="850" height="60" as="geometry" />
@@ -112,6 +112,12 @@
<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">
<mxGeometry x="745" y="415" width="60" height="30" as="geometry" />
</mxCell>
<mxCell id="NK9HXle7FpP0BrMxsV12-1" 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">
<mxGeometry x="410" y="483.5" width="221" height="45" as="geometry" />
</mxCell>
<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;" vertex="1" parent="1">
<mxGeometry x="491" y="493" width="60" height="30" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 11 additions & 2 deletions src/content/perf/impeller.md
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ check out the [Can I use Impeller?][] page.

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

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

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

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

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

### web

Impeller on the web offers two renderers and
two build modes. For more information, visit
[Flutter web support][] in the Flutter
architectural guide.

[Flutter web support]: /resources/arch-overview#flutter-web-support

### macOS

You can try out Impeller for macOS behind a flag.
68 changes: 58 additions & 10 deletions src/content/resources/architectural-overview.md
Original file line number Diff line number Diff line change
@@ -1056,16 +1056,64 @@ is designed to interface with the
underlying operating system rather than a web browser.
A different approach is therefore required.

On the web, Flutter offers two build modes and two renderers.
Flutter has a canvas-based renderer with two compile modes:
JS and Wasm.

Flutter chooses the build mode when building the app,
and determines which renderers are available at runtime.
For a default build, Flutter chooses the `canvaskit`
renderer at runtime. For a WebAssembly build,
Flutter chooses the Web/Assembly renderer at runtime,
and falls back to canvaskit if the browser doesn't support WebAssembly.
On the web, Flutter offers two renderers:

<table class="table table-striped">
<tr>
<th>Engine</th>
<th>Renderer</th>
<th>Compilation target</th>
</tr>

<tr>
<td>Engine 1</td>
<td>
CanvasKit
</td>
<td>
JavaScript
</td>
</tr>

<tr>
<td>Engine 2</td>
<td>
Skwasm
</td>
<td>
WebAssembly
</td>
</tr>
</table>

_Build modes_ are command-line options that dictate
which runtimes are available when you run the app.

Flutter offers two _build_ modes:

<table class="table table-striped">
<tr>
<th>Build mode</th>
<th>Available renderer(s)</th>
</tr>

<tr>
<td>default</td>
<td>CanvasKit</td>
</tr>

<tr>
<td>`--wasm`</td>
<td>Skwasm (preferred), CanvasKit (fallback)</td>
</tr>


The default mode makes only "engine 1" available.
The `--wasm` option makes both "engine 1" and
"engine 2" available, and chooses the engine
based on browser capabilities:
preferring "engine 2" if the browser is capable of running it,
and falls back to "engine 1" otherwise.

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

0 comments on commit c44179a

Please sign in to comment.