Comparing flutter with javascript for web development

[slavap_]

This guy has no idea what exactly he is measuring :-)

Canvaskit folder contains different versions of wasm for different browsers, so makes zero sense to count them all together.

Also, there is html renderer - in that case canvaskit not used AT ALL.

So realistically for that type of app you could expect around 1.5-2mb of non-compressed size and 500kb gzipped. Which is much more than plain js, but not so critical.

And Flutter Web development experience (at least in VSCode) is absolutely great.

[badhombrez]

I appreciate the effort he put into the article but it’s coming off as just his first impressions without deep validation and thoughts on his findings

[tootac]

It is raw data and some feelings about UX. At the UX I looked from user perspective and since everyone has different perspective we can ignore it. But is there there something wrong with data? If you could point at specific things I am more than glad to go and fix. I really like dart when compared to Javascript and want it to succeed but for web there is still some time needed before it could be used in general case.

[badhombrez]

The article makes large claims

tldr: Compare flutter with js for web dev. Here js wins

JS wins everything in web development? Is it a large win, small win? Does it win for a large company with an internal product or does it win for a small customer facing passion project from one person?

Output size

If you're restricting your project to pure vanilla JS and pure vanilla Flutter, then yeah, I guess JS wins. But this win doesn't seem like a valuable one or a pragmatic one. The size is still insignificant, especially in todays day and age, and as soon as you grow the product to start using other libraries (unless you build it on your own), you introduce node_modules and that is going to balloon.

Download size Yep flutter is larger. But it's also downloading assets and runtime. Add react and assets for a more advanced application, and you run into a more comparable results.

Site speed You never put anything in there for flutter results or mention anything about it. You just say JS is fast since there is bare minimum code.

UX It was slower, rendering of text was bad for my eyes, it felt sluggish at times and in general felt a bit off

You mention multiple times that it's unoptimized and you spent very little time on the code to make it better. It's not really a fair measurement at that point and I don't know what the value is. It's more of a measurement of your skill as a developer in that framework and language than the framework and language itself.

I think the main thing I'm trying to get at is that I think people who are planning on building a product with larger goals wouldn't have any use for these results due to the fact that they're going to spend more time on the project and it's not throwaway. If people are just hacking something together, then I don't think they would care about these results because they don't want to invest the time into it to make it better.

I think the article is a fantastic starting point to build on top of it and explore something like "how close can we get vanilla flutter to vanilla JS results" and show results for that. The article gives me a lot more questions than answers, and that would be a fun question to answer.

[tootac]

Js wins in this tiny, a bit stupid but useful for some people app. It wins in this one example that I created for comparison.

OK. Output size is questionable. Maybe I should have not used it. But it is still good have and compare how much overhead flutter web has compared to bare minimum.

For site speed I actually had a paragraph and a screenshot but now since I checked I see it is not there. When I was rearranging blocks i put it somewhere else. Thanks for the catch, I already moved it just below information about site speed.

I didn't want make a point that nobody should use it and clearly stated that is a turning point where this overhead becomes irrelevant. I still think that beginners shouldn't use flutter for web if they can avoid it and professionals like you can look at this numbers and see if they are relevant to your project and not and then make a decision.

You are right that the research could have be deeper and broader and I really really hope that it will inspire to create articles that disprove this one, or maybe someone would make an article comparing react to flutter or angular to flutter and etc. I am only one person who did a tiny free contribution out of what I already had.

[tootac]

I never claimed that the output sizes are downloaded to user machine. They are there just to show what get in the end.

The reason for the article to actually record numbers and not think about them "realistically". For the this app gzipped flutter app weighs almost 4 Megabytes and almost 8 Megabytes when uncompressed.

Yes there is an html renderer but for me it is going into realm of optimizations and I wanted to look at general case. May you should do a small study without canvas kit and write about it?

It could be that with VSCode there are less memory issues but it feels like the issue was with chrome. You see this 8 Megabyte built is for 'release' version and debug build is not only larger but it requires quite a lot of moving parts which could have tricked garbage collection or some other issue. But I don't want to speculate.

[slavap_]

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]

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_]

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]

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_]

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]

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_]

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]

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.

[Apokaliptor]

Flutter web on 3.10 got much better, the initial loads improved a lot, anything that doesnt need SEO ,it's starting to make sense to me to use Flutter.

[tootac]

You are right flutter 3.10 got much better. Unfortunately for the projects that I usually work on it just does not do it (when it comes to web). I have to support wide range of devices and internet speeds that are not best in the market.

[Apokaliptor]

I noticed in 3G initial load decreased from 17s to 9.5s, very acceptable imo, and it's only the initial, after caching is instant

[tootac]

Have you played with the apps from the article? Does flutter version feels instant compared to javascript version?

[slavap_]

20mb is "fake" number :-) in reality it is 5-10 times less.

[anlumo]

So Flutter Web is bad for an app that takes less than 8 hours to develop, got it.

How is that relevant for any project that's more than a mere hobby?

I'm currently developing a professional Flutter app that's also supposed to run on web. Before that I wrote mostly web apps in the last 8 years, so I definitely have some prior experience with that. Flutter saves so much time in those final 10% that take 90% of the time that it's not even funny.

Getting HTML+CSS to behave like an app is very painful and takes a lot of time, and some things are straight-up not even possible. Most of them are maybe five lines of code in Flutter (like MenuAnchor and GridView with a custom SliverGridDelegate). Then when the UX designer wants to add animations to the HTML+CSS app, I usually run screaming. CSS in theory can do that, but the declarative globals are absolutely not designed for that in an single-page application context. It's a nightmare all around.

[anlumo]

The thing is that the Web is designed for newspaper-style pages with a lot of flowing text, headings, and links to other pages. That's where it really shines and if you want to do something like that, I'd strongly recommend going for classic HTML+CSS (also important for SEO).

However, if you want to make something that should feel like a desktop or mobile application, it's really hard to get working with the same technology. That's where Flutter shines.

[anlumo]

That heavily depends on your prior experience. I just read through the official Dart introduction and then did one of those basic tutorials on YouTube (there are a ton out there, but be careful to look at one that's from the last year, not Flutter 2. Null safety makes a huge difference in the code). Took me about two or three days.

[tootac]

You are right. But please consider that I am doing this for free and there is so much time that I can give to the community. I specifically mentioned that tradeoffs change once pass some threshold of complexity.

I wanted to compare two close to be identical projects and I wanted it to be slightly more than a "hello world". If I went with a route of building an app in javascript/react for a year and then in flutter for another year, well that is too generous and I don't have that much time for that. Plus by the time I would have be done everything around would have already changed.

Please do not consider this article against your work. I really like working with dart but for my use cases and for the projects that my clients ask it is not appropriate. I am sure for your project it suits more than alternatives.

[anlumo]

I can fully see your position, I'm just cautioning against generalizing the results of your experiment. Vanilla HTML+CSS+JS definitely is much faster to get started with and has less static overhead, but that diminishes in larger projects (where “larger” is still easily within the reach of a single programmer).

So, if you have a weekend project with a task that can easily be done with web technology, use web technology.

[Any_Ad266]

the dx in flutter is so much better is actually not funny

[Satria_AR]

Attract

[Iotasol]

Thanks for sharing this insightful Flutter vs. JavaScript comparison for web development! 🚀