POS Rearchitecture

by Sysco LABS Articles 25 February 2017

There comes a moment in time, where you take a step back and evaluate the work you’ve done. This stage is a critical turning point, where you can either build for the future or prepare for failure.

We at CAKE LABS went through this stage when evaluating our POS, and decided that even though we’ve come a long way from where we started, it was time for change.


Why Change?

Scale. There were certain issues we identified, which would become problematic once we scale and negatively affect the performance of our POS.

Functional programming is the process of building software by composing pure function. Ideal functional programming should avoid the sharing state and mutable data/objects. But in existing systems, functional programming was a dream since pure JS objects are anyway mutable.

In the legacy system code base, maintainability became a nightmare, and the system stability was questionable since every line had to be written. Missing even a small portion of the required code, ended up in an unexpected system behavior.

Service/repository implementation is the most crucial part of a software. In legacy systems, business logic and the repository layers were coupled, hence the unit test writing failed.

JS by nature, is a single threaded language. Hence for a button click, although the execution was completed, the system seemed stuck, which lead to a performance hit.


What Did We Change?

We changed the way we do:

  1. Coding
  2. Unit test
  3. UI test
  4. User experience
  5. Developer experience


React – React is a popular, efficient and flexible JS library for building user interfaces. All our existing system’s complex UI have been re-factored with React. The React UI component acts like a black box which receives input and returns the processed output as HTML.

Redux – Redux is a data storing concept within an application in the client side. Redux behaves like a backend database on the client side, where it helps to store the required information for processing.

React/Router – React Router is a powerful routing library which keeps the UI in sync with the URL. Every module and its sub-module is designed with its own routing.

Immutable – When it comes to JS, the nightmare (sometimes) is mutable objects, which is crucial for functional programming. Immutable JS is an object-oriented API which helps to create an immutable object.

Webpack Module Bundler – Webpack module bundler is used to generate static assets representing a module, by taking modules with its dependencies.  

Babel – ES6 came with few awesome features which helped to reduce a lot of code. Babel is a JS transpiler, which makes the ES6 code work on all browsers by compiling code as ES5.

Lodash – Lodash utilities were used in the system such as null, undefined, empty checking, data structure, iteration etc.

This seems like a lot of work… and it was. Completely rewriting an existing system is not something to sneeze at, especially since the said system is the prizefighter of the company. However even the best of the best becomes dull with time if proper maintenance and improvements are not done. In a competitive market, all it takes is one slip up, or one feature that the competition has that we don’t, to lose ground. With this Re-architecturing of our code to React, we believe we’ve taken the necessary strides to stay one step ahead of our competitors.



Leave a Comment