ReactJS in Action
Case Background and Challenges
Our client is a leading provider of GPS tracking system. In particular, the client provides comprehensive services starting with the installation of GPS sensors on vehicles and finishing with the configuration and maintenance of the GPS tracking system web application.
The client addressed Agiliway experiencing a lot of issues with the GPS tracking system due to the outdated architecture it used. In particular, the company’s clients were complaining of
- low speed of the application and possible interruptions in the performance;
- poor performance of the system for the clients with many cars following overlapping routes, as the cars became visually indistinguishable;
- inability to use the system on a smartphone, which caused much inconvenience for users, most of which spent 90% or time out of office.
What is more, the existing solution did not allow the company to add new features and, thus, cater to the rising needs and expectations or the clients.
To address the needs of the client, Agiliway suggested rewriting a system using ReactJS. Although this was a serious endeavor, it substantially improved the performance and expanded the functionality of the tracking system. Namely, the benefits of the provided solution involve:
- Improved performance. The improvement in performance is due to the fact that ReactJS does not demand to update the whole page when the information for one component updates. Having encapsulated components managing their own state, React creates and synchronizes minimal lists of updates, speeding up the presentation of the result. Further use of React Redux has helped to effectively manage the fetching of states of components. Namely, the system does not fetch all of the available information for all cars on the regular basis. Instead, React allows fetching certain information when the user makes a corresponding request.
- Better visualization of multiple cars on one map. React Native map clustering has solved visual issues for users tracking multiple cars. Namely, React Native map clustering allows consolidating all tracked objects in the area, so that the map shows their number only. Enlarging the map, the user can further find the location of the exact vehicle.
- Real-time tracking. We have added the option to track the movement of a vehicle in the real time. This feature is accomplished with the help of ng-websocket that sends the relevant data to the user so that React can create a route of the vehicle on the map and display it to the user in a visual form.
- Notifications. We have developed a comprehensive system of notifications, which widened the features of the system and facilitated dispatchers’ work. Namely, the system analyzes the information it receives against the preset rules and conditions and issues alerts when they are violated, for example, when the vehicle is speeding, has left the route it should be following or crossed the borders of the geozone set for its work.
- Mobile Application. Rewriting of the system on ReactJS facilitated development of a mobile application for it using the React Native technology. As a result, the developed mobile application is characterised by advanced functionality, good performance, and high speed.
Rewriting the GPS tracking system on ReactJS and creating a React Native mobile application for it, Agiliway has revolutionised the work with the system and client’s business as such. In particular, the new features and the stable performance of the system allows effective tracking of vehicles and routes and facilitates work of logistics specialists. In addition, the availability of the mobile application and instant notifications gives car owners much more control over their vehicles not keeping them tied to the computer screens.
Leveraging the latest innovations in the IT industry and selling a high-speed and user-friendly solution, the company benefits hundreds of end users and steadily grows its profits.
Originally published at agiliway.com.