Introduction
I've been developing with Dart/Flutter since its initial stable version. It's my go-to language/framework for mobile app development at work. I've also been working on web applications for years, experimenting with web apps using Dart/Flutter on side projects.
I'm a staunch supporter of Flutter. This post isn't against Flutter but rather an analysis of its current limitations, with hopes to write a post next year titled "Flutter, the primary tool for the web".
Limitations
The context was building a web app for a business (no B2C), so I won't delve into indexing issues or initial load speed. The concern is the performance. The problem arises when you have to write specific code for the platform, in the web case, in javascript.
Interoperability
Unless the project is very straightforward (but then, why use something complex like Flutter? A microframework like might be better, KISS), native code calls will be necessary. Dart offers relatively recent tools like js. In my case, I needed to display high-weight PDFs, even up to 40MB per page. Here, unfortunately, Dart hits its limit.
A PDF viewing engine is intricate, and reinventing the wheel is unnecessary. pdfJs is widely used and well supported for the web. It's apparent that other companies/devs have created packages to display PDFs in Flutter and essentially are native calls to pdfJs. In this case I took syncfusion as an example, syncfusion_pdfviewer_web.
Using this library (like others, as they'll essentially be bindings to pdfJs) is impossible for PDFs that weigh more than a total of 1MB, and even in this case, they don't perform well. The performance isn't even comparable to native. Even with a dedicated worker, the main thread freezes processing (even for a single page) of a PDF, locking the UI not for seconds, but minutes! The same PDF, in a ReactJS app using the same pdfJs library, loads almost instantly without UI freezes.
The tests were conducted on a MacBook Pro 2019 with the following specifications: 2.3 GHz Intel Core i9 8-core processor, graphics card: Intel UHD Graphics 630 1536 MB, and memory: 16 GB 2400 MHz DDR4. With Flutter, it was also impossible to conduct speed benchmarks (obviously in release mode); the only option was to open the activity monitor to forcibly terminate the web page. In any case, to easily test the performance difference, running a Flutter example and a JavaScript example with a heavy PDF is sufficient.
Conclusion
How can we predict what our app will need in the future? Can we be certain we'll never need to communicate with JS to execute computationally heavy code? As of now, I wouldn't suggest initiating a Flutter project for web development unless the previous questions received a fully positive response.
Hopefully, in the future, we can write an article titled 'Flutter, the primary tool for the web.'
Info
Post written in December 2023 using:
- Flutter 3.16;
- JS version 0.6.7.
Top comments (0)