The Vision: mathOS
I’ve always felt that standard "single-page" portfolios were a bit too static. To push the boundaries of Flutter Web and WebAssembly (WASM), I decided to build mathOS—a desktop-inspired environment right in the browser.
It features draggable windows, a Spotlight-style search, and a real-time guestbook. But as every Flutter Web developer knows, with great UI comes a great... bundle size.
The Hurdle: Initial Loading Performance
When I first compiled the project using WASM, the initial bundle was heavier than I liked. In the web world, every second of loading is a lost visitor. I looked for a straightforward deferred (lazy) loading solution that played well with Flutter’s latest rendering engine, but I couldn't find exactly what I needed.
The Solution: Building flutter_lazy_load_web
Instead of compromising on the UI, I decided to build my own solution. I developed and published flutter_lazy_load_web on pub.dev.
What it does:
- Wraps Dart’s deferred library loading.
- Splits screens and heavy logic into on-demand chunks.
- Reduces the initial JS/WASM overhead significantly.
Engineering Excellence
This wasn't just a "weekend project." To ensure it was production-ready, I implemented:
- 100% Test Coverage: Ensuring that every window and interceptor works as expected.
- CI/CD Pipeline: Automated testing and deployment on every push.
- WASM Support: Leveraging the latest performance improvements in the Flutter ecosystem.
Conclusion
Building mathOS taught me that the limitations of a framework are often just opportunities to build new tools for the community.
Check out the live demo and the source code here:
- mathOS Live: https://matheusvinicius.dev.br/
- The Package: https://pub.dev/packages/flutter_lazy_load_web
- GitHub Repo: https://github.com/Mathvdias/portfolio
I’d love to hear your thoughts on WASM performance and how you are handling bundle sizes in your own Flutter Web projects
Top comments (0)