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.
- Web Maker is open-source — https://github.com/chinchang/web-maker
- Web Maker Slack group — https://web-maker.slack.com/messages/CA4A8TE3V/
- Report a bug or request feature — https://github.com/chinchang/web-maker/issues
- Follow on twitter for updates and more — https://twitter.com/webmakerapp
Top comments (8)
Everyone who understands this post most likely went through the same thing... I remember mine as a defining moment in my life. I'm also currently helping my company I work for go thru the same thing. Once you learn how to efficiently model real world problems it's difficult to ever go back. Congratulations and good job on not letting your pride get in the way!
Thank you for your those words Preston!
I definitely relate to the journey expressed in this post.
Put a few bucks in your Patreon as a kudos for great work. Keep it up.
That is so nice of you Ben :) thanks!
I really loved using web maker and its interesting to read what's going under the hood.
Glad to hear :)
Just tried Web Maker and wow! It's awesome! and yes, really great work...
Happy to hear that! Thank you 🙏