Discussion
Well, we’ve come a long way from hello world. I hope that you’ve learned some tricks along the way. I’ve done this code a million different ways at this point, and this final version has prioritized readability above everything. I definitely didn’t use the most efficient methods. But, I encourage you to check out some of the other links mentioned in chapter 13 if you still feel the need to flex your routing muscles.
Known Issues
I had several bugs here when I started this project, but I have been gradually refactoring it and I think that I have solved the majority of the glaring issues. Most of them were due to sloppy declaration of global variables. So, they were simple enough to fix in hindsight.
The biggest issue with our current code is that we aren’t catching any errors in our promises. I intended to show what would happen if the db connection failed, but I forgot to show that at any point. It will definitely be part of any continuation of this tutorial.
One other glaring issue is that our getProducts function currently takes the entire database of products into the client’s memory and keeps it without checking for changes throughout the session. One issue with this is that, in a real shop, items would have a limited stock. What if something sells out while the user is scrolling through the web page?
Another problem with this method would occur if the store had more products. When there are only two products in the database, they load quickly and display without issue. But, what if there were thousands of products?
This could be easily fixed by implementing virtualization or pagination, or by separating the products into more distinct categories. But, I feel like that is all above the scope of this tutorial. It could be a fun way to transition into talking about things like TanStack Query1 or React Virtualized2 though.
Conclusion and Demo
While I’ve been working on this project, I’ve thought about so many ways that I could improve it. The code has been refactored endlessly (I know it needs more), but I’m really not sure what’s best from here. I’ve already spent a lot of time, and I don’t want to waste effort going in the wrong direction.
One way or another, I’m definitely coming back soon for a version 2.0. So, if you have any suggestions, feel free to reach out to me on Twitter or Discord. I’d love to have some help with making this project better.
The next project will start with moving everything into individual files and folders. I just need to see this code converted into something readable. From there, do I continue to add features and show the limits of Vanilla JS? Add an old-school library like jQuery? Show how to adapt it for TypeScript? I already have several versions made with React— should I show how to convert it? I’m not sure. Does anyone care? We’ll see.
And again, here’s the code on github fully commented
And, here’s a version that doesn’t have any comments at all. It’s just the code