DEV Community: ThabisoMagwaza

E-commerce made easy with JAMSTACK!

ThabisoMagwaza — Fri, 11 Jun 2021 08:45:03 +0000

A few weeks ago, I took an interest in e-commerce and I decided to build an online store. I had initially planned to build the store using the “classic” architecture which involves creating a database, an API backend, and a web front-end but after a little research, I learned that JAMSTACK is the shiny new toy that all the cool kids are using these days so that’s what I went with.

The complicated part with JAMSTACK in South Africa (SA) is that many of the payment gateways listed in the how-to tutorials and articles online do not process payments outside of Europe. This leaves the SA developer with the complicated task of stitching together the payment gateways that do accept payments in SA with the other APIs that make a JAMSTACK online store possible. This guide is written with the intent to navigate you through this part and provide the general architecture that you can follow when building an online store using the JAMSTACK in SA.

What is JAMSTACK?

The word JAMSTACK stands for the Javascript APIs and Markup stack. It is an architecture designed to make the web faster, more secure, and easier to scale. The idea is to use build tools to convert markup to the statically rendered assets of a website’s front-end which can be delivered using a content delivery network (CDN). The sites are then enhanced with data-driven capabilities using Javascript and APIs. This makes them fast, secure, and scalable. You can read more about JAMSTACK here. JAMSTACK allows developers to build a fully functional e-commerce store without having to set up a database or a server. No need to worry about security and managing users and scaling the site when the load increases. Just build your front-end and let the widely available APIs of the web do the rest for you. Welcome to the future!

How to JAMSTACK for E-Commerce?

In order to build an e-commerce website, you need a few things as a bare minimum.

A way to store and retrieve your catalog and inventory (API).
A way to process payments (API).
A website where people can make purchases of the items in your inventory (Markup and Javascript).
A CDN to host your website (API).

Beyond that, you will probably want to make use of some tooling to make the process of development more pleasant. Some tools you might want to consider include:

Git and Github for version control of your website.
A static site generator so that you don’t have to write all the HTML and CSS by hand.
A command-line interface (CLI) that allows you to run a development server that serves your static website locally.

The general architecture is that you will have a data source that hosts all of the dynamic data that powers your store. You will then use an API to access this data, and then generate the static assets of the store’s front-end at build time. The statically rendered site is then deployed to a CDN where users can access it via a browser. The site can then make further use of APIs to fetch more data and/or provide more functionality like processing payments.

Choosing your JAMSTACK fighters in SA

The power of JAMSTACK comes from the plethora of APIs and tools that you can use to put together a website. I experimented with many different APIs and payment gateways to build my e-commerce store and I finally settled on the below stack.

Catalog and Inventory

To manage the catalog and inventory I used the javascript library Commerce JS. This library provides a powerful headless commerce backend as well as APIs that allow you to manage your inventory, create a cart system, capture orders and send email notifications. It also comes with an intuitive dashboard UI where you can see a visual representation of the inventory, the orders as well as some statistics. Commerce JS also allows you to set up hooks to programmatically rebuild and redeploy your store based on certain events like price changes, changes in the catalog, the addition of promotional codes e.t.c It really is the all-in-one library for managing your online store.

The one drawback that Commerce JS has for SA users and developers is that it doesn’t come pre-configured with a payment gateway that can process payments in SA. Thankfully they do provide a manual payments option. This allows you to create an order on Commerce JS, process the payment using your chosen payment method, and then mark the order as settled on Commerce JS using an API.

Payment Gateway

There are a number of online payment gateways that you can use in SA. The list includes gateways such as payfast, paygate, and ozow but the one that I settled on is yoco. I was most impressed with yoco because of their excellent documentation that makes it trivial to integrate it into your website. All you do is include a script, paste some Javascript, and put a button on a form. The process really couldn’t be made simpler! Once the form is included on your page you can customize it to look and behave the way you want with CSS and Javascript. Another big advantage that yoco has is that the payment process is fully API-based. This means that there are no page redirects necessary which is very important as it allows the user to go through the entire payment process without leaving your website. A huge plus for user experience!

Build tools

I used a static site generator as well Git and Github for the version control. These days there are as many static site generators as there are probably stars in the sky. You can find an exhaustive list of them here. I settled on Eleventy. I chose it because it’s easy to use and it allows me to use my favorite templating language Pug to write the markup alongside the CSS preprocessor SASS to write my stylesheet. Another build tool that is worth mentioning is the Netlify CLI which allowed me to easily test and deploy the website.

Deployment

The CDN that I went with is Netlify. I chose Netlify because of its extensive and easy-to-use documentation and its many useful features. The feature that I found most useful was its seamless integration with Github which allows me to trigger a build/deployment by simply pushing the latest code to my Github repository. It really doesn’t get any easier than that! Netlify also comes with a serverless function feature which is essential since I needed to store secrete keys and call APIs from a server in order to process payments and capture orders. Netlify also allows you to set up a build hook URL that you can call to programmatically trigger a redeployment. This becomes important in a statically rendered store as catalog and inventory change constantly.

Conclusion

JAMSTACK is not some dream that’s in the distant future anymore for SA developers. It’s here and it’s ready to use! There has never been a more powerful, cheaper, and reliable way to quickly develop and deploy online stores. I hope this article has cleared the confusion that sometimes arises around which technologies you can use to take advantage of this architecture if you are a developer in SA looking to launch your next online store using the JAMSTACK. Check out the online store demo that I built with JAMSTACK here.

--
What is your JAMSTACK technology stack for building online stores in SA? Let me know in the comments😋

Should you create an online store with Vanilla JS?

ThabisoMagwaza — Thu, 10 Jun 2021 09:04:43 +0000

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?