Ask HN: What do you think about developing a web front with Vanilla JavaScript?

IMO I think this is pretty laggy once you zoom in, at least on my phone (Pixel 7 running Chrome).

Switching zoom levels takes a long time to load the assets. The bunny has some temporary displacement relative to the background. Panning results in visible lag.

I don't think vanilla is a magic performance pill. Everything compiles down to vanilla, after all, and in this case this app's performance seems quite a bit slower to me than Leaflet, OpenLayers, OpenSeadragon, Konva, Pixi.js, etc. I haven't looked at your code, but maybe it could benefit from tile-based rendering and asset virtualization?

I also think if this is the extent of your desired usage (rendering graphics on a zooming panning canvas) you're reinventing a wheel that's already been invented, abandoned, reinvented, improved, forked, improved, rewritten a thousand times. Why do you want to? Just for fun? To make an even better one? To make a custom game or mapping engine? Those are all fine, it's just a lot of work with uncertain payoff vs using a ready made library (not necessarily framework).

Just my opinion. I'm a lazy dev though.

As I mentioned in my previous reply, I've been using nearly every major JavaScript library and framework for almost 20 years. After all that, I ultimately came to the conclusion that Vanilla JavaScript is the best. Especially when it comes to the build processes involved in updating modern web front-end source code, I've found the experience quite unsatisfactory.

On the server side, you can compensate with better server specifications and resources, but with web front-end development, it's essential to ensure compatibility across various browsers while using minimal resources. This is how you can provide the best possible experience to the largest number of people.

Of course, if you want to avoid relying on other solutions, it's true that you need to be very familiar and experienced with Vanilla JavaScript.

Nobody is forcing you to use a library (much less a full framework) if you don't want to. Yes, they're often a pain, and often result in a shitty DX.

It's more that the big name libs for this use case have a lot of optimizations, both server-side (like raster and vector tiling, CDNs) and client-side (asset and viewport virtualizations, prefetches, offscreen canvas rendering, etc.) learned over decades of doing web mapping & graphics that don't seem to be implemented in your app yet. They're all open source, so you can look at their techniques if you want. Especially their performance stress test examples.

I don't mean to make this a philosophical debate about libs vs writing your own code. You asked for opinions about the performance of your app, and I'm just providing one person's feedback. It's better than anything I could've written on my own, but not as fast as the major libs.

Got it. I just want to clarify that I'm not someone who thinks all my ideas are always right, so I hope there’s no misunderstanding. Also, could you provide links to the libraries you mentioned? Of course, I’m always eager to study more about areas I’m not familiar with. This project is primarily focused on performance, after all, so I’d appreciate it if you could share them.

I also agree that optimizing the canvas for GPU usage is something that definitely requires more research. Since I plan to add more plants and animals, it will be crucial moving forward.

Thanks again for your valuable input!