Web Maker - From vanilla JS to Preact
Kushagra Gour Jun 23
Why a framework and why Preact?
But recently I had started feeling that while building features, I was more focusing on writing UI glue code and maintaining it. Now that I have lots & lots of features in mind that I want to build, I don’t want any sort of friction in the path to build them, so that I can release them very rapidly to the users. Hence, a framework.
And choosing Preact is simply because I have worked with Angular, Vue and React. Preact says it works like React in such a small file size! I wanted to try it out. It's a nice feeling to be able to build something so conveniently with a library with such a small footprint :) And the best part of working with JSX is that Prettier formats it for me! I am happy I chose it.
In this first phase of refactoring, I have ported everything into Preact components. But there is still some manual DOM manipulations happening inside components which can be removed. And also, a lot of components can be further broken down into smaller components. All that in next phases of refactoring.
I am using simple prop passing and root component store to manage data. I think I can do better with state management without adding any library for that. Let’s see.
For CSS, its the same style.css file being included in the HTML. No change there. But I plan to switch most values into CSS variables to allow customisation and theming.
Contrary to what I estimated before starting the refactor, the total size of code hasn’t gone down. Upon a shallow inspection, it seems that the UI code removed with the framework got compromised with the library size + the code (render functions) that Preact generates for the HTML templates. But I will re-evaluate after few more refactoring passes.
The refactor was so much fun! I realised I like refactoring much more than writing code. 😅 Now that it is complete, I am so excited and super-charged to build some really cool features in coming weeks. If you have any feature request or want to ask me anything related to porting a vanilla JS app to Preact (or React, it’s similar), tweet me or put in your comments here.