But if subsequent loads are substantially faster, then it would've been interesting to see that comparison as well. Also, didn't I read somewhere that Flutter web can be compiled into html5 rather than running as a JS app on canvas?
Ran the code with the latest Flutter 3.16. The website transferred 64.8 MB data and it took 2.73 seconds to load which is quite an impressive change from when the video was made originally (2 years ago). Of course, I ran the code locally only which should be faster but then it would also be in debug mode.
The problem is there are websites that don't neatly fall into "content heavy website" vs "interactive app". For instance you get sites that are very data-centric that have reasonably complex UI's for viewing / exploring that data where a UI framework would be the obvious option. Now for some Flutter would be fine because that bit is locked behind a login, so the long first initial page load doesn't really matter. However for others they make a limited amount of data and / or functionality public and want to be indexed by search engines, because that is a source of customer acquisition, and for that Flutter is pretty bad.
The principle of web page is to be more fragmented as possible to be able to load faster and free resources. I believe flutter will be good for making appliances interfaces, apps, computer software. For web it's another story. I'm willing to see it on embedded devices.
Thanks Andrea for doing such a compression. I have two questions 1- Did you use HTML renderer or CanvasKit renderer for flutter, the doc said that HTML renderer is a bit faster 2- Did you tried using dart shelf_static
@@wdestroier Yeah so true but you can host a static web page with it, recently I found a another tutorial about building web pages with dart and html and css what do you think about this approach ?
I uses a static site generator called Publish: github.com/johnsundell/publish Though if I was starting from scratch, I'd probably go with Next.js or similar.
It really does just seem to be the download time. I tried your Flutter demo page, and on first load, it took about 4 seconds. Refreshing the page though it seemed to load instantly. So hosting a Flutter app on a service with good bandwidth would be advisable.
@@bigmistqke I really don't have an issue waiting a bit for a website to load. Most of the time it won't be the fault of the website author but rather the service they host on. In any case, it will take me longer to find another site than it will to wait a bit.
I’ll check again in a few years. Flutter tables cant even merge cells like colspan does. I dont even want to check how it does with charts. Some people saying it loads faster the second time but people are too impatient lately u’ll be losing business just because of that super slow page load. Javascript aint that bad
That's what the Flutter team and veteran Flutter developers have been saying all along. Flutter was never intended to be used to create a whole website, it's for web apps. People are trying to use it for something that it wasn't designed for, and then complaining when it doesn't do it well.
Flutter web stable version is a one year baby. i guess, it would improve over time. comparing flutter web with existing frame work is comparing iphone model 1 with model 13
@@CodeWithAndrea I had to enable 3 flags in chrome : Experimental WebAssembly, Experimental WebAssembly JavaScript Promise Integration (JSPI) and WebAssembly Garbage Collection.
@TechTimeTraveller Thanks for watching and commenting, ❤❤ you've been randomly selected as a winner in today's giveaway, use the name above 👆👆 to claim your prize.💫🎁🎁🥳🥳
It's good when you use it for what it was made for. If you're building a highly interactive app, such as a video editor or word processor that you want to run in the browser, flutter is one of the best options because you don't need to deal with JS at all.
i would love to see the comparison again now with flutter 3 it would be really interesting
can you, please, do the same test with flutter 3.3.1?
Great comparison. It would be nice to see with the new flutter version 2.10.1 or higher
Yeah maybe in the near future we'll see flutter dominant the web
Maybe who knows 😅😅
Please do this!!!!
But if subsequent loads are substantially faster, then it would've been interesting to see that comparison as well. Also, didn't I read somewhere that Flutter web can be compiled into html5 rather than running as a JS app on canvas?
Ran the code with the latest Flutter 3.16. The website transferred 64.8 MB data and it took 2.73 seconds to load which is quite an impressive change from when the video was made originally (2 years ago). Of course, I ran the code locally only which should be faster but then it would also be in debug mode.
The problem is there are websites that don't neatly fall into "content heavy website" vs "interactive app". For instance you get sites that are very data-centric that have reasonably complex UI's for viewing / exploring that data where a UI framework would be the obvious option. Now for some Flutter would be fine because that bit is locked behind a login, so the long first initial page load doesn't really matter. However for others they make a limited amount of data and / or functionality public and want to be indexed by search engines, because that is a source of customer acquisition, and for that Flutter is pretty bad.
Would you please help me with some examples of interactive websites. Thank you
The principle of web page is to be more fragmented as possible to be able to load faster and free resources. I believe flutter will be good for making appliances interfaces, apps, computer software. For web it's another story. I'm willing to see it on embedded devices.
Thanks Andrea for doing such a compression.
I have two questions
1- Did you use HTML renderer or CanvasKit renderer for flutter, the doc said that HTML renderer is a bit faster
2- Did you tried using dart shelf_static
html renderer does not support svg's for instance and it is not rendering UI pixel perfect. What does the shelf_static do exactly?
@@aytunch oh so html render isn't that flexible
shelf_static is for building static web page with html and css
shelf_serve is a library, that runs in the back-end, written in Dart, to serve content. It isn't related to Flutter
@@wdestroier
Yeah so true
but you can host a static web page with it, recently I found a another tutorial about building web pages with dart and html and css what do you think about this approach ?
I'm confused why there's not more complains about the flutter for web scroll performance. That's what's worst for me when using flutter for web
Thanks for sharing this comparison Andrea! Curious, what technology did you use to create your new website? Vanilla HTML, CSS and JavaScript?
I uses a static site generator called Publish:
github.com/johnsundell/publish
Though if I was starting from scratch, I'd probably go with Next.js or similar.
Was flutter in debug, or production mode when testing?
You can use Angular with Dart, you would be amaze how Dart take Angular to the next level.
nobody talks about it, can't find any normal discussion video on it.
It really does just seem to be the download time. I tried your Flutter demo page, and on first load, it took about 4 seconds. Refreshing the page though it seemed to load instantly. So hosting a Flutter app on a service with good bandwidth would be advisable.
If it takes me 4 seconds to open ur website there won't be a second time
@@bigmistqke I really don't have an issue waiting a bit for a website to load. Most of the time it won't be the fault of the website author but rather the service they host on. In any case, it will take me longer to find another site than it will to wait a bit.
Has anything changed since this test ? Have the new versions brought any improvement ?
I’ll check again in a few years. Flutter tables cant even merge cells like colspan does. I dont even want to check how it does with charts. Some people saying it loads faster the second time but people are too impatient lately u’ll be losing business just because of that super slow page load. Javascript aint that bad
About the loading "speed", if you implement flutter_native_splash it decreases a lot. Thank you for the video!
Could explain more plz, cause it doesn't change the loading speed, it's just an image while ur waiting.....
Seriously ?? Is this a joke?
2022 year, any changes?
It doesn't really matter because once the flutter runtime is cached there will be no difference.
Great Video! Thanks Andrea
Do you think it will be better in the future? Anw great content!
I chose flutter because futures technology already wants to be comparable for mobile tablets and pc
Very insightful, thanks!
Very nice explanation sir thank you so much 🙏🏼🙏🏼🙏🏼
I am building a very highly complex web app with flutter. i guess after flutter 3.0 the performance has increased a lot
can i see it
Seems like Flutter Web is only suitable for big webapps or CMS
That's what the Flutter team and veteran Flutter developers have been saying all along. Flutter was never intended to be used to create a whole website, it's for web apps. People are trying to use it for something that it wasn't designed for, and then complaining when it doesn't do it well.
Flutter web stable version is a one year baby. i guess, it would improve over time. comparing flutter web with existing frame work is comparing iphone model 1 with model 13
Flutter pages stutter on my phone. I'm skeptical
Please change the mike. The sounds vibrates too much that it is hard to understand.
Can you do it again Since Flutter has been updated
Please now do this using flutter 3.3
thank you sir for sharing this infos with us 🙏
Thank you very much for that comparison and explanation. Helped me on making a decision very clearly.
This test is BS unless it's served from the same backend (it's not). We don't have any data on how long it's taking for the backend to respond.
Cant say im surprised
Wait for fuchsia OS then try to compare again
Go to test today😉
Have you tested it?
I feel when you execute flutter web first fime it takes too much time.. But after that it quite faster..
Please Create some other comparisons videos
please run new test with new flutter feature (wasm)
Don't have time for that atm. The project is open source so you can do it yourself ;)
I learned flutter because I hate div and span.
Nice video :)
Круто !!
Tray again with WASM !
I tried but got some compile errors and didn’t have time to investigate
@@CodeWithAndrea I had to enable 3 flags in chrome : Experimental WebAssembly, Experimental WebAssembly JavaScript Promise Integration (JSPI) and WebAssembly Garbage Collection.
Flutter 3.0 please
Could you test it again after flutter 3.0, i would like to see the result again !!
The project is open source and methodology explained in the article => you can test it yourself
thanks
Speed code of this flutter version.
@TechTimeTraveller Thanks for watching and commenting, ❤❤ you've been randomly selected as a winner in today's giveaway, use the name above 👆👆 to claim your prize.💫🎁🎁🥳🥳
This comparison doesn't seem right.
Flutter 3 is laughing
aser tqewed
akhy kharba9 had khona
flutter web it is real shit
It works great! The only problem is that it takes too much time to load
@@wdestroier yes and that sucks.
It's good when you use it for what it was made for. If you're building a highly interactive app, such as a video editor or word processor that you want to run in the browser, flutter is one of the best options because you don't need to deal with JS at all.