ReactJS in Action

Case Background and Challenges

  • 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.

Provided Solution

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

Value Delivered

--

--

--

Custom software development company offering a wide range of IT Consulting, Web and Mobile development, Quality Management, BI and BigData services.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Swagger with typescript based Express.js(Node) application.

Dockerize node.js application

Create a React Area Difference Chart with the Visx Library

Server-Side Development with Hapi.js — Base64 and Errors

//platform.twitter.com/widgets.js from Twitter https://twitter.com/AllMastersPlumb

Useful JavaScript Tips — Object Freezing

Getting Started with Algolia

How Modern Web Applications Are Made Today

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Agiliway

Agiliway

Custom software development company offering a wide range of IT Consulting, Web and Mobile development, Quality Management, BI and BigData services.

More from Medium

React Components

React & Routing

React Hooks