Ecommerce Solution

Shogo

The client had an existing SaaS platform based on Grails v2.1 providing a bridge between their customers’ electronic point of sale systems(or eCommerce platforms) and their accountancy systems.

shogo laptop

Background

The client had developed a successful SaaS platform based on Grails v2.1 which provides an automated digital bridge between their customers’ electronic point of sale systems(or eCommerce platforms) and their accountancy systems.

The client has so far generated a transaction throughput of over $25 billion USD in sales data with over 12 million accounting entries processed. The system has been developed to integrate with over 50 partners for a customer throughout over 50 countries worldwide.

The client had significant concerns due to the age and impending end of life of the Grails v2.1 framework and additionally wanted to modernize the user experience.  Although it was not in this scope, it was also a long-term goal of the client to offer their customers a native mobile app interface to the platform.  One immediate desire of the client was to completely modernize the UI replacing the original interface with a new modern responsive design, exchanging the basic bootstrap and heavily jQuery-driven UI for a new React JS-powered front end with a design of their choice.

Additionally, the client was looking for help in constructing an automated test strategy that could form part of their continuous integration/deployment pipeline.

Solution

The ultimate goal was for us to take the current monolithic architecture and modularize the system into a 4 tier architecture consisting of a core functionality module that would share common functionality to a second REST API module, and a third Web module providing existing administrative functionality not exposed to their own customers. The 4th tier would represent the new React-based front-end.

This strategy would solve both the current requirements to upgrade and modernize the existing app, and also provide a ready-to-use API for their future plans to develop a Mobile-App.

The upgrade would be tackled in phases, with the initial phase to upgrade the current application in its entirety from Grails 2.1 to the latest Grails v4.x. Once the upgrade could be verified so that all previous functionality was present running under Grails 4, we would then perform modularization of the application into the API, a Web module, and the shared core functionality module.

The client had already selected a Bootstrap 5 theme that they wanted to base the new UI on, so we would use this as a basis while upgrading the old UI to a React JS application. There would be several Rich UI controls that we would need to develop or find alternatives for, to give the users at least the same functionality they were used to.

Result

As with many upgrades from the older versions of Grails based on the 2.x line, it is very common to find plugins that were available back then, are now no longer available, or aren’t compatible with Grails 3.x onwards. So there are times during upgrades that redevelopment of core functionality or 3rd party plugins is necessary. As we’ve been doing this for a while, we’ve already addressed many of these issues so we can reuse our existing solutions to such problems.

Our React JS UI not only provides a much more modern and pleasing design on the eyes but now also:

Is usable and looks great across different devices.

Provides a more user-centric experience improving data input time, and preventing human error.

Reduces the load on their server as all UI logic is performed in the browser.

Has improved their horizontal scalability since the deployment of the UI can now take full advantage of the content delivery network provided by Amazon Web Services.

Helped to develop the blueprint for their future mobile app plans.

The upgrade from Grails 2 to Grails 4 meant we could also provide performance enhancements to the application and introduce further best practices into their codebase by taking advantage of new features found in the latest versions of Groovy such as static compilation.

To provide an initial set of automated tests that the client can use as a basis to build on, we introduced a functional test suite using Geb and the Spock GebSpec test syntax. This lets us mimic and replicate user behavior through scripted tests as they’re carried out in a real but headless browser environment. 

This test suite would also form part of their continuous integration pipeline so they would execute whenever updates were pushed to the master branch of their source code repository.

Before & After

Some examples of the previous vs new interface are showcased below.