- Adding interactivity to a web page;
- Connecting to backend servers.
There is also a supplementary role: customer tracking and analytics.
The point of adding interactivity to a web page is so that users can see changes based on their actions. Without it, there isn’t much happening on a page: a user can only scroll, click, and fill out forms. It makes it difficult to engage users — shoppers — and keep their attention.
Product images can change when the mouse hovers on them. Clicking on an image could zoom in and show a higher-resolution version, or slowly rotate the product 360 degrees.
As a shopper is typing into a search form, common search terms can appear automatically and help guide the shopper’s search to one that has more results, or correct common typos.
Better Backend Integration Using AJAX
While this worked okay, it wasn’t very smooth. It was frustrating, for example, to change shopping cart quantities for five items and remove a few others. Each change would take a few seconds to load. Shoppers would often become annoyed and leave.
This opened up many interactions that are now common:
- Updating an item in a cart and seeing the change right away;
- Search suggestions and results that appear as you type;
- New email messages appearing automatically in Gmail;
- Ability to drag and drop elements of a web page;
- Forms that notify you of problems as you fill them out.
Now, because of AJAX, modern ecommerce applications are full of these dynamic, backend-supported interactions.
Web Tracking and Analytics
For example, seemingly simple interactions on the frontend can become complex underneath. Say you want your search form to automatically show the first five results. Simple, right? Here’s what is actually involved.
- After three characters, make an AJAX request to the server with the search term.
- On the server, perform your search function with that search term.
- Once the search form gets the search results, display them nicely using CSS and make sure they appear on top of the page.
- Cancel the AJAX requests and any server processing when a user continues to type more characters — four, five, six, and so on — in the search field.
- Facilitate and communicate instances when there are no search results found on the server.
- Facilitate and communicate server errors.
- Add suggestions to the search, so the user can see popular searches.
- Correct the user’s typos and misspellings.
I’ll stop there. There are many more steps that even a simple search would need to do. Good developers understand this and are able to describe these additional parts to build interactivity.
- Changes on the server to perform the search;
- HTML to display the search;
- CSS to present the results in a visually appealing manner.
While code libraries are appealing, they come with their own disadvantages. Some can slow down pages when they are used. Some libraries provide hundreds of functions, even though you only need one or two. Even knowing which library to use can be difficult as there are so many choices.