loading...

Web Maker - From vanilla JS to Preact

chinchang profile image Kushagra Gour Originally published at Medium ・3 min read

Hola!

I am back with a big Web Maker release. But this time it isn’t about any new functionality or fixes. It’s about something that is not visible to any end-user but affects them equally — the codebase. After 93 commits and adding 17913 new lines, I have completely migrated the Web Maker code from plain JavaScript to Preact! 🔥

Why a framework and why Preact?

I started coding Web Maker in plain JavaScript, not because I couldn’t work with any framework or because I didn’t have the time to set up a framework. I consciously chose to write vanilla JavaScript because I wanted to see how far I could go without any external framework. And I am happy that it worked for almost 2 years! Read more about how I built Web Maker initially.

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.

The Refactor

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.

What next?

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.

Posted on by:

chinchang profile

Kushagra Gour

@chinchang

Creative Human. Lover of Web technologies.

Discussion

markdown guide
 

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.

 
 

Just tried Web Maker and wow! It's awesome! and yes, really great work...

 

Happy to hear that! Thank you 🙏