Simple JavaScript Shop - Back to the future : Part 1

March 20, 2015 by Christoff Truter JavaScript  

Around 1999 I created my first website using HTML and JavaScript or rather what was referred to as DHTML back then. It was an interesting attempt, but quite a colourful hodgepodge of borrowed scripts, applets, frames, plugins and animated gifs.

Gradually over the years that followed I started writing my own scripts, but felt too intimidated to publish my source code to the web. Obviously criticism is essential, but the guys on the web can get quite nasty at times, so we need to learn how to differentiate between constructive, destructive and negative criticism.

Likewise self-criticism is nearly as important, in 2004 I shared my first script with the dev community, which is going to be the topic of self-criticism in this post.

The purpose of this script was to furnish a webmaster with a very basic shop to use on their website.

Lets have a quick look at the code, labelled as v1.0 in the attached download via the GIT.

Use of vanilla JavaScript

The first thing you notice when opening the project is the use of vanilla JavaScript, nowadays we generally don't like to go bareback like this, but then again this was written shortly before JavaScript frameworks got really popular.




Poor naming conventions

Well... I didn't actually use one consistent naming convention in this code at all. Some of the variables/functions use camel case, others pascal case, even a few that is simply in lowercase,  some are named using English others Afrikaans (my home language), very very messy.

Poor Formatting

Most of the code isn't properly indented, making it harder to read - bad manners to release unformatted code to the public.

Cross Browser Issues

In my defence there is some kind of interesting effort made at cross browser compatibility in the project which worked fine at the time, but since I didn't maintain the code over the years, it fails in newer browsers like chrome.

Mixing of JavaScript and HTML

Now this might be a matter of preference and context, but for the code in question it is definitely unnecessary and contributes to an overall code readability/maintainability problem.





Code Duplication

Related to the previous point, the scripts are all over the show and not contained within a central library, the result is that there is code duplication, which is obviously not a good idea e.g. change it here need to change it everywhere etc.

General Issues

• Inline styles used.
• Inconsistent styles among various browsers.
• var keyword omitted from some variables, making those variables global for no apparent reason.
• Use of XML instead of JSON (the bindings ultimately happens with JSON, why have a middle man that parses XML)
  
  

In the next part we're going to rewrite this script using current trends and practises (note that the source code for the next part is already available in the accompanying download).