Visi.js is not a framework but a library that enhances the usage of React in a CDN version. While it may seem unconventional, our team has found it to be beneficial in certain scenarios. I understand that some may find it amusing or even consider it inefficient for production use, but I beg to differ.
In fact, our documentation site is entirely built using Visi.js and has shown significant performance improvements compared to using the base CDN version of React. Visi.js handles compilation off the main thread and optimizes the page by scanning for opportunities to improve performance.
Here is an image of cfr performance:
You may be wondering why we chose to develop Visi.js. The idea came about when I was experimenting with the React CDN because I wanted to avoid dealing with modules and dependencies. This approach allowed me and other developers to code more efficiently and make changes quickly. However, I encountered an issue: I wanted to import components inside JSX files, but the traditional React approach required everything to be within a single file. It was only later, after reading the Babel documentation, that I discovered it was possible. I wish I had known earlier, but the experience led me to create "disposable components."
Disposable components are compiled using service workers and then loaded asynchronously. Once I witnessed the speed of this approach, I immediately began working on Visi.js.
I won't go into the nitty-gritty details of the development process here, but if you're interested, you can check out the npm repository to explore the versions and updates over the past month.
But is that all? Not quite. Version 1.7.6 introduced Component-First Rendering (CFR), which involves caching components that render as soon as the page loads. This significantly improved performance compared to versions 1.0.0 to 1.4.4, where prefetching was used. Prefetching turned out to be a major mistake, as you can read about in the npm versions. I learned from that experience and created CFR to enhance browser load times. When combined with production mode, which optimizes asset links and lazy loads images, your site can achieve performance comparable to Server-Side Rendering (SSR) or Static Site Generation (SSG), with just a slight difference of 1%.
While I could demonstrate this in code, it would be quite complex to explain. Instead, I invite you to explore our documentation, where you can find examples and further information: New Visi.js Documentation
// for more scroll below and click older docs
In conclusion, if someone tells you that using a CDN is slow or that your apps built with Visi.js are a waste of time, I kindly suggest that they reconsider their opinion. While Visi.js may not be perfect, it provides a viable option for those seeking faster workflows.
Links:
Website
Github repo
Npm repo
Older docs
Top comments (0)