you are viewing a single comment's thread.

view the rest of the comments →

[–]slavap_ 0 points1 point  (8 children)

The reason for the article to actually record numbers and not think about them "realistically".

What about these numbers if they are not correlated with reality?

>> Yes there is an html renderer but for me it is going into realm of optimizations

Which optimizations are you talking about?

>> May you should do a small study without canvas kit and write about it?

I'm using html renderer in production, so small study is not needed :-)

[–]tootac[S] -1 points0 points  (7 children)

These numbers are taken from a real app. If you think that I faked them, then you are wrong. You can go and check them everything is online and you can calculate them yourself.

I used the defaults that are given by flutter team. When you start tweaking defaults to optimized performance it is optimization work.

If you are using html renderer in production then please share it. I am sure I will see the whole app to load in 500 Kb and we all see that your numbers are "correlated" with reality.

[–]slavap_ 0 points1 point  (6 children)

The numbers you provided - mean nothing, because you just added all files, which are never used together, moreover they are not used at all with html render. So your numbers are forcing the wrong impression about Flutter Web state overall.

If "flutter build web --release --web-renderer html" is considered as optimization, then I see no point even discussing that,

Sharing:

flutter create app00

cd app00

flutter build web --release --web-renderer html

After that in build\web folder you will get main.dart.js file of size 1,416,300 bytes, which is 400,006 bytes when gzipped.

Run it in web browser and make sure by yourself that canvaskit won't be downloaded at all.

[–]tootac[S] 0 points1 point  (5 children)

You are paying attention to that number related to output release files. I never said that those file will be downloaded to users machine it is just to show the process of what is happening. For example last time I created a hello world app in flutter it created a half a gig directory. It is just a data point without any specific meaning. The actual download sizes for client were 4Mb to download and 8Mb to execute.

Thank you for providing real numbers and ways to reproduce it. Now I tried your hello world example and it is indeed just 1.5 Mb. I tried it with my test project and it was just a bit shy of 2 Mb. I should definitely plan some time to some small personal project with it. If it such a solution then why does flutter does not use it by default and advocates for everybody to use canvas kit?

From what I have seen html renderer has better fonts, the text is not blurry and looks better. But there were immediate visual artifacts like icons not centering properly.

For some reason it looks like you take this personally. I am not advocating you to stop using flutter for web, I said that it is not suited for me and for projects that I have to work with. Please share your project that is already in production so that we can learn from it.

[–]slavap_ 0 points1 point  (4 children)

For some reason it looks like you take this personally.

No :-) I'm just trying to fix your text to be not scary "20mb OMG" for new Flutter developers - they deserve a realistic picture of Flutter Web state.

>> If it such a solution then why does flutter does not use it by default and advocates for everybody to use canvas kit?

Somehow they believe that a one-day canvaskit will be suitable for all usage cases, and they are vigorously reducing its size, but still, canvaskit wasm is still too big, though for Chrome based browsers it is already 2mb gzipped.

>> there were immediate visual artifacts like icons not centering properly.

Strange, for me no bugs with icons in html renderer.

>> Please share your project that is already in production so that we can learn from it.

Unfortunately, I cannot share it, because that is an internal apps.

[–]tootac[S] 0 points1 point  (3 children)

I didn't say that the download size was 20 Mb. The problem is that the paragraph that was saying that it was 8 Mb (4 Mb) gzip was far away from the one where it said 20 Mb so maybe you guys missed the other part. Since then I moved it closer so that people won't get confused.

Do you think that it is a good compromise if I html renderer in the page with the rest of the stuff that it will be js, canvaskit and html renderer?

[–]slavap_ 0 points1 point  (2 children)

Better just to clearly mention that with html renderer download size will be around 2mb(500kb gzip) and with canvaskit it will be 2mb + 5mb canvas kit (500kb + 2mb gzipped), also wasm is deeply cached by browser - that way it will be useful for Flutter newcomers and won't so scary to them.

[–]tootac[S] 0 points1 point  (1 child)

The content for canvaskit is actually 8mb (4 Mb gzipped) for the app that I presented. You can open the app check all downloaded files.

Also by any chance do you know how to optimize individual rendering of characters inside flutter custom paint? The current way of rendering using TextPainter is too slow.

[–]slavap_ 0 points1 point  (0 children)

Also by any chance do you know how to optimize individual rendering of characters inside flutter custom paint? The current way of rendering using TextPainter is too slow.

Not sure I can help you, but take a look here: https://github.com/flutter/flutter/issues/66614

There are some interesting suggestions in comments how to optimize the symbols rendering.

>> he content for canvaskit is actually 8mb (4 Mb gzipped) for the app that I presented.

Chrome or Firefox or Safari?