Who is the Client

A US-based retailer with more than 700 departmental stores and 150 specialty stores, client is a major player in their industry and one of the oldest shopping destinations for their customers.

The Challenge

The client owns a huge e-commerce portal whose success depends on the ease with which visitors can search and browse the products. However, the search and browse pages' responsiveness was deteriorating since they were being managed through an in-house development ecosystem, which accumulated a lot of redundant code introduced due to re-engineering of features multiple times. It was based on an outdated Java technology and Java Server Pages (JSP) templates wherein various components of these search and browse pages (selection, marketing, purchase and order, etc.) were interconnected. They also had frontend and backend tied to each other.

The user interface (UI) of these search and browse pages was tied to web services. The web and mobile site had a separate codebase and were maintained on separate servers. Hence, all the changes were required to be duplicated on both the servers.

The client’s e-commerce business was suffering because of the inadequate responsiveness of these search and browse pages. Different UI components of these pages were also interconnected in a manner that the teams responsible for different components of UI were not able to make changes without impacting each other.

The Solution

GSPANN updated the client’s in-house ecosystem (based on JSP and YUI) to the latest Java version. We developed a responsive design for search and browse pages that is deployed on a single server. We performed componentization of the UI for search and browse pages and separated them from the web service (backend). We further re-architected the UI and took care of stretched banners, added breadcrumb, re-aligned items, and cleaned up the facets.

We split the UI of search and browse pages into multiple components/modules. Each individual component runs in isolation to implement/test functionalities faster and serves a different functionality for search and browse pages. All JSP layouts of each component were converted into Handlebar templates and we rendered the pages server-side using Node.js. This helped in separating the UI layer running on Node.js, which was earlier tied to a Java-based web server (JBoss, Jetty).

Since only a single server is required to maintain the responsive design of search and browse pages, the cost of server maintenance was reduced by 40%. The development and release cycle of backend and UI was separated, which helped the team responsible for different components of the UI to go live in production independent of the backend release. This also made A/B testing on UI easier.

In addition to the responsive design, we also implemented experimental features for a search and browse page that is controlled by a kill-switch if something goes wrong in production.

Business Impact

  • The ‘Add To Bag’ conversion increased from 100K to 200K per month.
  • The page load time for search and browse pages reduced from approx. 13 seconds to less than 3 seconds.
  • Changes can be made to different components of UI in the production environment separately, as the development and release cycle of back-end and UI are separated.

Technologies Used

Node.js. An open-source, cross-platform, back-end JavaScript runtime environment that executes JavaScript code outside a web browser
Sass. A preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS)
Backbone.Marionette. A composite application library for Backbone.js that aims to simplify the construction of large-scale JavaScript applications
Handlebars. A simple templating language that uses a template and an input object to generate HTML or other text formats
RequireJS. A JavaScript file and module loader that is optimized for in-browser use and in other JavaScript environments
Jasmine. A Behavior-Driven Development (BDD) testing framework for JavaScript that does not rely on browsers, a document object model (DOM), or any JavaScript framework
Webpack. An open-source JavaScript module bundler that is made primarily for JavaScript, but it can transform frontend assets such as HTML, CSS, and images
jQuery. A JavaScript library designed to simplify HTML DOM tree traversal, manipulation, event handling, CSS animation, and Ajax
JAVA. A class-based, object-oriented programming language that app developers write once and run on all Java-supported platforms without needing any re-compilation

Related Capabilities

Optimize Business Operations by Eliminating Inefficiencies and Redundancies with High-Quality Apps.

Develop advanced applications mapped to your strategic goals by utilizing modernize architectures, such as microservices, to seamlessly leverage cloud capabilities. We can help in migrating your applications to a modernized technology platform while keeping your costs in control.

Do you have a similar project in mind?

Enter your email address to start the conversation