Should you create an online store with Vanilla JS?

A few weeks ago I decided to create an online store demo for a client who wanted to have one for her e-commerce business. When deciding on which web technology stack I should use, I found myself asking questions that are all too familiar to front-end software developers starting a new project. Should I use a framework? If so, which one should I use? I couldn't find an easy answer to this question so instead of choosing one at random, I decided not to use any of them and use Vanilla JS instead.

It's hard to choose a solution to a problem that you haven't experienced.

Frameworks and libraries are generic solutions to common problems that the web developers of yesteryear have experienced. The problem with choosing a framework as a young web developer is that you most likely haven't experienced any of the problems that each framework is made to solve. It's hard to choose a solution to a problem that you haven't experienced. My decision to use Vanilla JS was made in hopes that I experience problems with it such that picking the right solution i.e framework, will be trivial. Below I list some of the problems I ran into while creating the online store with Vanilla JS that a framework might have saved me from. I also provide a checklist that I developed to help in deciding which framework to use for my next online store project. You can check out the store hosted on Netlify here.

1) Html becomes unmanageable

I remember when I was starting out with web development that one of the things that impressed me the most was how an entire web page could be created with just a few lines of HTML markup and a stylesheet. The instructor would put a few divs, headings, and a paragraph tag here and there, show us the ugly markup, and then transform it into a beautiful webpage with some CSS. I was in awe😱. Unfortunately though, when you go beyond simple static HTML pages to a website with a lot more moving parts like cards, a cart, a cart summary, an order summary e.t.c the markup quickly grows from being just a few lines of HTML to a thousand lines of unreadable gibberish. At this point, it becomes a nightmare to know where the markup of parts of your website is located and the whole development process quickly turns into a frustrating exercise of searching and scrolling.

the markup quickly grows from being just a few lines of HTML to a thousand lines of unreadable gibberish

2) CSS becomes unmanageable

As with the markup, the stylesheet of a website quickly becomes unmanageable. Unlike the markup, however, the stylesheet is responsible for a lot more than just the content of the website. It's responsible for the entire personality of the website. This includes things like the layout, color, fonts, micro-interactions, as well as animations. So instead of a thousand lines, the stylesheet can easily grow to have thousands of lines thus making the task of finding where a particular style lives in your stylesheet all the more daunting.

the stylesheet can easily grow to have thousands of lines

3) JS becomes unmanageable

In a simple static website, javascript plays the role of adding a bit of interactivity to the site. When building an online store, however, javascript has a lot more responsibility than that. From state management to DOM manipulations, to API integrations, to page transitions, and still being responsible for some animation and interactivity, I'd say the role of javascript grows exponentially as the site becomes more complicated.

the role of javascript grows exponentially as the site becomes more complicated

This, of course, makes finding where the code that controls part of the website lives all the more frustrating. Honestly speaking, by the time I was a few weeks into developing the site, the most dominant emotion that I remember was the frustration that I felt from scrolling and searching and writing document.querySelector(".some-selector").

My framework checklist.

With all the difficulties that I faced with Vanilla JS, I came up with a checklist of the problems that I'm looking for a framework to solve when I'm building an online store. The framework of choice must…

1) Have an easy component system

Components are a great way to group related markup, styles, and logic into a neat codebase and file structure. I'm also looking for a framework to have a simple template syntax that allows me to easily bind the UI to dynamic state variables.

2) Have an easy state management system

I found it rather difficult to share state variables across different parts of the website. This made it difficult to synchronize things like the cart details across different components like the cart summary, order summary, checkout e.t.c. The framework that I will use will need to have an easy way to share state variables to different components in a synchronized manner.

3) Allow static rendering of the site

For an online store, it's important that one pays particular attention to search engine optimization (SEO). Static sites offer SEO benefits because the server returns a fully rendered HTML document that a web crawler can easily index. This is essential if you are selling online because you want people to be able to find your store by simply searching for the items that are in your catalog in their search engine of choice.

4) Allow for smooth page transition animations

Unfortunately, statically rendered sites lead to a lot of page redirects which can make the site feel slow and jittery thus leading to a bad user experience. The framework that I choose must therefore have a logical and easy way to implement custom page transition animation between the different pages of the store. This will provide a smooth app-like feeling that will keep the users comfortably immersed in the shopping experience of the store.

5) Allow for custom animations

In keeping with the need for a smooth user experience, the framework of choice must have powerful javascript animation capabilities out of the box and/or allow for easy integration with external animation libraries. Animations like timeline, stagger and, SVG morphing animations must be easy and logical to implement. Be it on page transition, or component-enter/leave (when a new component dynamically enters or leaves the page), or on any interaction with any part of the store. I must have full animation power to provide a custom nuanced user experience to the user through animation.

Should you create an online store using Vanilla JS? Probably just once, so you can learn from experience what issues you have with it which will arm you with a checklist to evaluate all the possible solutions to your problems.

Conclusion

In conclusion, this was a painful but educational experience that I believe all front-end developers should go through at least once. I found that it has helped me know from experience why frameworks are useful and important. It has also given me a clear picture of which problems I want a framework to solve for me. Figuring out which one to use is a simple case of finding out which one ticks most, if not all, of the items on my framework checklist. So should you create an online store using Vanilla JS? Probably just once, so you can learn from experience what issues you have with it which will arm you with a checklist to evaluate all the possible solutions to your problems.

What is your framework checklist when your starting a new Javascript Front-end project?