There was this nice and instructive (post)[https://dev.to/codeofrelevancy/build-an-emi-calculator-with-nextjs-typescript-tailwind-css-recoil-and-recharts-4op3] on dev.to, thank you for that. It is always good to have people sharing their insights. There was just one question: Do we need all this excessive tooling? What are the drawbacks?
So, I decided to rebuild the app just using Javascript, just to see, how this performs. To be honest, it was a funny afternoon project.
This was the original app
Here is the replica
How does it perform?
The replica uses a special approach to create fully dynamic pages just using Javascript, so, there is in fact only a single file used to create the whole application in about 220 lines of HTML/CSS/JS.
I checked the load performance using the chrome developer tools. This was the initial approach:
This needs about 1,2 s to show the initial page. This was the replica preformance:
The replica needed about 0.4s to show up, so it is 3 times faster. But how does it perform during usage? The initial app uses a reactive framework to rebuild the screen, which - in theory - should minimize the screen interactions. The replica features an event driven approach, which performs similar well. There is hardly any delay visible on screen.
I linked both apps above, so please check out both apps side by side.
This was just a fun project. I was curious to see, how the different approaches perform. To be honest: going with an event based approach will force you to think a bit more about the details. I´m pretty sure, it depends much on your task, which approach performs best. But anyway: There are different ways to milk a cow.
Top comments (2)
Great Eckehard :-)
I have put your project here (if you don't mind) : EMI-DML
I appreciate your efforts on this..
Keep it up..