Rebuild an EMI Calculator without Next.js, TypeScript, Tailwind CSS, Recoil and Recharts
Tags: javascript, webdev, performance
Published: 2023-03-07 08:21:44

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](https://emi-calculator-cor.vercel.app/)

Here is the [replica](https://flems.io/#0=N4IgtglgJlA2CmIBcAWAdANgIwBoQGd4EBjAF3imRDQAtSxYQ99iAnAe1kaQG0AGHHwC6eAGYQE+ZD1AA7AIZhESanQZMQxdrPI6qAHgCEAEQDyAYQAqATQAKAUQAEa2AD4AOrP0vHsebIBzAF53ECh4UI9ZT294eSgox0d9JVJ5R2IaeVZCUhCQAFdSUQBaAA5IzyT9UghSBFd7AFkASQz5WGICv1J2Vn0Aelr6+ETk1PSFJXyANwh4AHcABz7SUIztXTzQhehSGiDwueJ4Et2ofZxHCFk6iA6Slg74IKw0PkrZatgbgGtHVhEfL4UgAT0kNHg8DWIGcgNE+TopCW+CQAwGC0xaAWAGYWDR2Jx8GgtGAMTjiPh8AMUOSSVTPtUWKwIEtSI58KxiIjSMjUejiFBZGgAFb4cI-GasNCyaEDAI0AbwURLeQBeADYxNAAyAx+ACNNTqSpBhWLIoNmazSGN9Fa2Ryufl3PteSi0QNBbIxSTYOwClBRH5AST2GT5CL5AAPPUQfXUpZ++qg0XUt4oACcaAArANE+xkyV9fJ8BBiGhTamLQN7TaqskQeDRvWkvr2FBQY5gC2ko5RJsSqJFBJQUhHAUII9-PhHvAWaIrvhQSD4GAShOriV5EtE6clyuwFcAEI-WS-JryYgAZWX5DAADFNlcr-AAux4I4AKotK4AJXYba9FcAASRAzNCZbpAAcvABTwFcACCLIdFcUEFuwjhXtOi7TrO86ITuCCOOYnB9I49hgOwIoQM+r7vl+bQUVRNGYXRH7fphoJgG2sCoehxGkaw5GUdRADcPZJP2OiPBAABe8BjlgGBLFG4lfL2raXr8AQcAUshQCUEBgGqCnjqwsAABQAORIu66JGQEaCiIC8BLBAvyhmSzlQiU4FkH0AzyPGpCsJepBnDQdSnG2vzwDQJQBH6uyBCUPwKqQM7FsQ2m6fpAD6WB8FgADsJQAEwoHwmaiksARWQAlGpGmadlOn+vpMnyYpfB8AApE1zVZTl7UGfIvKXjQSg6GO4hRhQA1JAAvp4PY0FgXYSX2A6ll1jgYHwKkLb2UnhQs8AQOlY7FT1R1JAgvJzo8qrEDcARjiUbzZodPbLeplpgg0MQDJC8RRDEbYdratauEkoQFIQHIhWWMJqT26KOAhGTw70YDXLISxFI497zLAUA9qIelkBA2iOGAoItPjRQWcMCBXHeiZjfB463KQ9UbepGn3QC0KOEEeME6QljwFGpDM3UrObUk3YC81kkk1AADqew0GOPBlT1VzZj1IiK72xaEAhvIsvqY6hMZrABDc3UqY4B2qaEOCm3dQVEJbSM244oTkDLW5pbIY4IKIMKeyrqs3BLfvW7bIBtqw4SsIpLv4Jw0CODp8igqJjip+nJShVAEDw2OX2qY4qowK9Y5lS7hWHXXfgnASpNzmO5AgqEpuLfVm2AqQaDx0UaAc53nDp6Ljjsz0H4ANSB7C6yr3pdQj9C4+M2P2gT+yYvEB0XRL7dwukAUrBfKPP0rSr6PpF0IJho4-rIoTxNEGTKsU7IKmNM6amCKBLOWIwrjZD5srVWpYK4zAsgPJga9zj7DHDiHqbd7aO3Do4VuUZHCVTbqEYesdfAi1HvPBBSCQAlA9mvE6ZxzqXT2jdLa0kdqmRxMpWuWg-QZwBAEfUFkSo4AqjgHEGZGp13iBXQIY4yht1PKcSEF06BNzQGVbMgIwDiRAGQ1WNCWbwEMc1PShASCkCPCWeAFkzEaWyFPeGNALKjz5ujK8vRAQfzAYTIgq54A6Dxo4bIoVQQ72vrfRwbjoQOMcL9NGAxiKAk5gvSEC8goIHJpTWowDQSWCyXYmBm0hYg3TvgeePBTahCaKYKClhgIexqSAWwv4WhQXMC0WwCFtSOB6dYJo9gGnNPIbDEAHTLD2F-PYK8lh+kIUGcMywozVbjMsKYSwvSFlLJGUwFpbSOldJ6X00wn5LBzIQlBYwHSADiqy1mhHMJ+Jon5tQIUsC0AAak4SZ0zZkrP2WMtezzXnvM+T8-p7TOndN6Q81WoQ2n2AGUMhpV4YktHvBjKC1hh4gE2kIR+qshZpH1ERMWlj4BkBsYQCyxlYq0NJdklBOxtbdT6kXEuj1+F+BRKZHl25CD6PqvEu6It9hxCgPPSl1LbF0vkAyoO5SGGsouDrfBPV+obAEWOBYkVyCcq0m1PSBl+F9DHA7ERxUMyOGuo4MqZUMykNFc4SVc5iTGSWBZCBCA+ZBBhvSuxQcyYspAEwrhikcTfRQSYkVm0LEBNlbSxqpTxUQ07BSxN1i5WBsZemlVIA0HqsKhytecbyEyuzbS3NQdWDOs2jWkApAQ1XFCOGuSpksBRvdqGtCjgoBjXkKQ+NshK00rsTiFN5DR43y+KQfNKtElP2SQhHcQSpXaA-BwBYH851FJyYAvJXw5H-gWPY-mcCs3juZuml1JKoBXFYDuzNVjr2NpCvW8h-YhIWSFhAeefAi7-v0I4MoQHl7LxKcC5t8930tsYdtDtkbo1XCsg1JI6NzCpPII4WUO6ThcEqbsfYGwdBBLWOQ36l7X1yubXe8Vx9xZFCljLWhgAaggYbAtZ4hf5azVbrAQtrhAxzWUx0gic4zJy5YIt2HIc5SvzoXYufRS7l0rqiRwNci44Kdq7F2zda713kW9e1Lc3ZF2nnFWePcF7wH7viyjLreR7wlmgbQZKb7z1Pp0bonMR4LCnoCVUGaF6kCLo4Tx3iPzxEBFSEJ26R1jrlZOh+0Rl2OGMPANslMKDtB8z0amaWNIAKAV8PK3nz6c3PVxwW4qjLwE-i0P+qtiAIGyJYern85ZKEa1AJznWihNeldCDrPWmYVd8+QK4Ja+DxKXRpdGQQlvLZW6ttb62Nuba29tnbS2kn9LnN+3GEq8uVaPaE-SjhpaqkuydplXMICiFw1Suz+BsgRPS7tr732fu-dWwe0rp3JvFIvc1IW7z55QQKNxOcFkWh5XeWgGYHQ4IyIi8k7U7B-AY0onpCjxKRYtF-JD6H+pYfw6J0jlHpjwvo2sHEcynYbjkFi+yUK5BU3sm1PMsWUOYesDhwjywVPYCo9p8k0bERyGPZiRDgAVI4InjgFfc9FmLWb6PiKQmyo4ZHPxmvNWAJrloT3ZAFl1x0aAVxWsM98V-fHayzmWFsOcq8FZtzevYH6mG7A0DB1ICRMjwSxahHoQYjDyTzBtaEh0WAduJaVJpnODgdboPpr3rKVgwFLA6nnmh02SXaXzvbKCF1SRC92PfXWgxZfaYKqDU2+DbbEO7S7ShtefaB1pGHcChNNHaVlSnaJumxgIAzAz3ObPueQ-4oc6Jmd0T0YlBKGMDS83mqYe1-8QpZKPwIECPsTnAJ2ALEqWLYvHYSSRVJoCYU++AiH+l09txJ+z9iywDAiP-aAk4fSKWQIRE26VwSwHAxYZKnYoQZuGWg6A8aeJeE+WeOefSM+sB8+r+AGl86+C2keZ8wO5ErQR+QkYsSuySWA+sHw5CQsXwYsquCuZBR+Swz6jgF4+wU8J+oijgq8rAVwsg9G7IzQbQNBmMCuQkCujBEWMS4hJQ+CLqpgeUAhfu0sAemw5G88ChvQxMc0UAFkGuq8VkbGVkX+oC9ujgAAxFgJtHIT0ooTLIHlsPPIjhoRAFoToXzHoQYUSmDiLNkI+gsFcCxPHMAUFgXFNBlFcJRDoDQABkfl0GAJNmPvAAzCznZoxoBjEdDvEeBLYCyIAqyB0BgZ4bVuyL0GkLALYCEaoWLAIQwTkS9KqLAMYSCP4MZg4QhEfszqzuUVxORjUTcHUR0F0aEZtFABhDVhvjgflmkvdrhqTu6qbBEfsBBqbB0SkYMZUXXLUXkQ0UUE0fpK9MrgCMsc-gsVEa4GLNuvgLXkkCAa5BUToGfq7KbEQAjGMarDccFqEQ8XzmTgLhfimBcTwCcY4NIVgEIIFrcSmEfCLqjoPKbCAX0VsWscHgvAWAMXceyKvO8eiZUtISsSCEiQ7m8ZsfUY0WkHsYEMCWLCwTQBWDcBZPCbkSSTsWScZkEQifUQSbXrEZkYkWRqzpwWLHiaQASabNyQVlkcSfkcvGLAyf0WUeiYUeMV+EsF3h+PdqbNkFUoSsCk4gTPgK4icbXrqS4vSZKfKd0ToH7uwJoRQK4ZwWvI4BxgYhqdKHqa4kKQSVaTadoboQ6U6Uaa6SaSUWiRaWPE4S4b6esP6S6c4vqaaeyR0KSc0a9F6c4baZGbCNGTqYGXGWKWNAkUkXOCkamRGW4X6T3qJsabmRkeKfANkQmbACWemWWVGT3kcTEhcckGLIaV2JrvYDLOupkrvl7KEjAKevYiOZ2efunpkBIFALfmgPfo-qJlRmsujAsCyDhv7uLB3FLqJt+jEv+jcKEqwFcQvOngCUCSCWCQRrAPgDwN8bDhAPVGCf7nYesdkDwBAEIF-rkOkh+LeYqUtI4HqhIB+PGYyYmcycmRSTDHwO8EVGQptOjJlvdB+PgAUEsIdqLv6JUhcZtKBURDevARcYuUEg-qcbTJsDQJ-n8WgBKNCPAOOR9HzKudgUTDcPkbFt0BlJYXlJ8r+DYcoUHoxnmbUOBIWazk2T6S2SAE6ZfHIRslstqEJe+ciRZGJQkfWZBXHqvJpRJXySkfVNJXaavKEPJUBZruYFkKwISb2MjkJF3ukGLDIKbHrnBBpjwPpXWWaSZbNtbjWfmQZckSCH5S+SJmsn4GTnebrFZNpXKVZKhpJSkVZCbNBkoTcP2MnFFUQMvFhVyD0UCqJv7isKWEesnJ-PAhEEVWsvIEUGGNkLgr3KwHBBFarF3KZGgMVG1c1BXICKVmOFZK1uwNlLsIQIlYHNBqCFhYNW5PAFZJtItEIKjOQg5b4AXJ-PPK8b2KqPlXlPqAEGaoIlZJavIDoYIBdbNolXCUmPtYdYJINadedQIC9fVNdcCmoqwpVAIKbEWmON9T1RpPqSfggOqPpDNB0IQItZfFoKOuyLDeIAEFtabBXPgBzKCE0O2PADYoIkOHeVzOjPsBAJUsTf+b4DcGqVkOyJFOEJUidsWNKNDZZbYEmLACmHhizQWHSqCKPjMFcE5VcH4KCJ-NbtoIjVOqluxX9tLd9uRJduwE9iVuduEOIDzIVm-jLX9oqejOUeqN-qrXcDTE0bZZUpCICD2OKGPrQgWnXg7LpnVb0EXH9UJlqsZFGGcGyhqlgoZnIq9CUL0EsP9eZhvI4OVuRnOB4skkeCXqRmkBTanhpNAFbaEMBGGB+Jjv4AWtJmONnPrvgi7IphZr7QoppmZm3P7qHBdHgicHyZyipo9GplXF7dGvEvqALoPqtFgLQgIcRLgT0H0BWTtbQghF8D3RZPYAAI4FCcxSqY2RFs2K5w2x6hF8wTb91CQHnpAEhKC+BY5fAbybShCk3pCq3+AvT5G9CcDpJjSuqwAojKasDbrupXYghGRTEZInEL0fHkaVIH3kJKrwCdi7BcDPa5a9B16xQokLDZBQB01qJCTb17571oCK7FH14k06AYSXhaB44OnLyH1hphR9CVIYWZChJwNIPY6KDtSkBswZLM5FkggAhpLNFk1+jY66A3xqkYThAs6miU0fg93UO4OsNxFkOUQhhoAFpHVFyWoWTFTZigaKMZjSKD3l40LIL1TowMwSyODR1RiKlCzw4Q7dn0z7y0Kp070Z1fAIS446AFpGwIUfChpZlFGK55RK6mM6NMyhBJH8m-h+ahqFQFq9RqMULsjGM860xmPgKhAZ1SpSyyBcMOMFqggM5hM9h95UpVrFI9ht0TkqyW2IKaOa7GG6P6M9hCxO4u4XJalf5IThIfxPax7x6Ew8akz4CVMixyE92mNlM+MgDVEoLVOu5D69hVP8WePRP9OyyhCWColx5+MpGOABMc7DPnI1NXhjNirshWGYx9N+KzOtJmk440MMIjMXLbPhOOCKWbLbIHP260LzOlH9LokxLxVbH2nJUgh4pXAXNbNHRZNJq5NFa9hFPW0oJh18nxJCwj5j7zxJ2ILxJAs5MFN5MC7xLgvIKtpNpKGV0BB4KRwwjxI0A4i0LWMrMQmhGYSZAUDdDgVz37Bs14rxJepzORQk2VLpDTH7A32fwqIUNUXz2djf33HCxT0QCAhSrgPBGdjpDsP72wj4P-0gDsDgQx4chYUvQ8ZSr5XUwbpPa1BKAoMtDsjH3f5x0IBSpt1xC-AjELBfAK1sN73Cyivsh-0IogAgEjWvYXZSp9Gi6014xHb5lG0FBkMlhk0fP1GvOhlXDfPsgElXDPP5FJt4MEPRv5FJnkkBBXDmCBXiUfgJt+vEQFsJH9K+VhMovXpXMkrpqwYFJFIFMaT5OFTxJr1VZmKWhsDWhRCDDppgxeDAz0BuAaCVrq1UDaLZhIDFQgCLQ4ByCKDKDUBigaCw1bBUBzsLsgBTDLv0hSB4DrvkabtLWLRAA)

## How does it perform?

The *replica* uses a special approach to [create fully dynamic pages just using Javascript](https://github.com/efpage/DML), 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:

![Initial app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2ca3gv8f7z9py53uqzq.PNG)

This needs about 1,2 s to show the initial page. This was the *replica* preformance:

![replica performance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xioqblzsiq3v74kpqtqg.PNG)

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.