How we increased our SAAS development time 4x by swapping Webpack with Vite - Electron React Boilerplate

An image uploaded to Strapi
An image uploaded to Strapi

Amir Alam

Technology

As we all know about electron js, it’s an open source software development framework. Electron React Boilerplate is a perfect candidate to quickly start developing a SAAS software, As it’s the most popular and has scalable architecture. But it’s not enough, there are lots of tools Which we can leverage and save our overall development time.

Electron js & ERB

With electron js we can easily & cheaply build a SAAS software for desktop & mac, as popular front end frameworks can be used to swiftly develop the front end part of the software. And the logic of the software can also be written easily with js.

With respect to these there is a popular boilerplate named Electron React Boilerplate (ERB) Which added React js to electron js and with webpack it makes all work together.

Webpack & Vite

As we are developing software with js, we will need to bundle it into one single file for optimizations. We use A modules bundler, Webpack, vite, Rollup etc.

In the context of Electron js, ERB uses Webpack to bundle the main & renderer process. Webpack internally uses Babel which is a Javascript transpiler, which is itself built upon js. Whereas Vite is also the same module bundler, the difference is that Vite uses esbuild for the transpilation process.

Now in terms of performance between 2 of them, i’ll present to you the benchmarks of esbuild.

pasted image 0.png

Leveraging the tools

We, At Robonito are developing a RPA SAAS software, but we encountered few problems with webpack and one day it became necessary to migrate from webpack to Vite. And Surprisingly It exceeded our expectations, we were not expecting this much of gain with vite in terms of performance.

We replaced the ERB’s Webpack with Vite and here are our software benchmarks.

chart.png

Conclusion

Leveraging the best tools around us really affects our development time & cost. As in this situation, lots of time saved during hot reload, build time and overall development time of our RPA Electron js based Software.

About Robonito

Robonito is a complete no-code RPA testing platform which allows testing with record and playback. Carry out complex software testing without writing a single line of code. Learn More

An image uploaded to Strapi
Amir Alam

How we increased our SAAS development time 4x by swapping Webpack with Vite - Electron React Boilerplate