Blog post

How Reactive Programming Streamlines Data Processing in Fleet Management, in Code

Learn how to manage thousands of vehicles simultaneously with the help of technology only

August 08, 2019

6 mins read

Delivering packages from point A to point B sounds like an easy task if you have a vehicle and a driver. But with hundreds of cars that have to deliver simultaneously, you may not be that enthusiastic. Vehicles break, run out of fuel or charge, get lost or stolen. Fortunately, we have a fleet management application that can solve this issue and even more.

Essential fleet management system features

First things first: let’s define what fleet management software is and how does it help fleet owners.

As managing a pool of commercial vehicles can be a tough challenge, fleet management software comes in handy. By handling every aspect of running a fleet, fleet management software solutions give you control over each vehicle’s parts lifecycle. It helps to track warranties and claims, and even coordinates fleet activities in general.

Digital storage of logs and documents

You can keep invoices, work orders, receipts, photos, and driver logs in centralized digital storage and access it from any internet-connected devices. Share and reuse this data.

Fortunately, storages are cheap today, despite the amount of data you put in there.

Measurements and analysis of each metric

Metrics can show both your and drivers’ mistakes, saving your time and money in the long run. Even slightest faults can give you a solid insight into the vehicle’s and driver’s performance, cost per mile, operational costs, fuel consumption, or route optimization.

Vehicle repair and maintenance

People are lazy and inattentive by nature. You can’t rely only on your drivers only. Here comes a fleet management application that will help you simplify the processes of inspecting, scheduling, and reporting. With its automated servicing reminders and service booking, a fleet management app will alert you when vehicle parts break. Service appointment then will be booked even without your participation!

Read more: Learn how we’re helping one of the world’s leading automotive manufacturers introduce IoT breakthroughs to the fleet management industry

Best technologies for data processing in fleet management

How Reactive Programming Streamlines Data Processing in Fleet Management, in Code

Fleet manager tools can automate a lot of business processes, solving a bulk of logistics, telematics, and delivery problems. But what technologies are the most beneficial in designing a robust and scalable solution?

Today’s market is full of technologies and frameworks to streamline fleet management. Based on my experience, the best technological stack includes Angular, Redux ( its ngrx/store library is impressive), rxjs (comes out of the box with Angular), SCSS, HTML5.

Let me explain why.

Angular is a top-notch front-end framework today. I’m convinced that for large-scale web applications, Angular is the most appropriate solution from the development perspective. But it’s also the only scalable one to use no matter how large your application is becoming. This framework has a bunch of excellent features like a great dependency injection framework and type safety, as it utilizes TypeScript.

The coolest feature, though, must be its built-in data streaming. Angular installs RxJS, which allows developers to use a reactive programming approach out of the box.

Then comes Redux. Redux’architecture allows saving all application data in a centralized store. A Redux store is a combination of the Command and the Observable patterns. To operate with the store, we send it an ‘action’ object. This action will trigger a ‘reducer’ function, which will modify data in our store. The most exciting thing is that the emitter of the action does not know what the store will do with it. When we have data in a store, we can use it in any part of our application. We can do this by using ‘selectors,’ a function that returns the necessary chunk of data from a store.

In the case with Angular, we have an ngrx library that allows leveraging all power of Redux and working with a store in a reactive programming model (just as with a regular observable).

The benefits of these frameworks are:

  • problem solution of component interaction via the Observable pattern;
  • a client-side cache system that allows avoiding making repeated Ajax requests. As a result, it reduces server load and costs;
  • a storage place for a temporary UI state.

Reactive programming in fleet management: how does it work, and are there any challenges?

I do recommend reactive programming as a solution for data processing in fleet management.

So what is reactive programming? It is programming with asynchronous data streams. Streams are a sequence of events ordered in time. The easiest way to visualize a stream is to picture items of array going one by one. RxJS is the most popular and reliable library to work with streams. It offers practical functions to combine, create, and filter any of streams. Rx bases on Observables, Observers, and Operators. The Observable releases a stream of data that the Observer reacts to. A chain of operators can process the stream of the data.

Let’s imagine that we have to create a component that contains a simple list of an only truck vehicle with the drivers assigned to it. First, you have to make a request to car API and then to driver API, mapping the results afterward. Though, keep in mind that in a multifunctional and fast-growing system, vehicle and driver data is used in lots of UI components. So the best way is to save a list of drivers and cars to be able to use this data in any other element. The best place to keep this data would be a unified redux store, which I mentioned in a paragraph above. Then we can work with a store as with a regular Observable, and access to the necessary data via the reactive programming approach.

Here is a method that requests the vehicle items. While fetching VehiclesActions, the response action from vehicles will be responsible for the reducer to process data automatically and will save that data to the store. The code of the reducer is not listed here.

“>/**
* Fetch vehicles by user Id
* @param userId
*/
public fetchTruckVehicles(userId: string): void {
//dispatch an action that we did a request to fetch a Vehicles list
this.store.dispatch(fetchVehiclesActions.request())
//in order to simplify a code I don’t use a service here, but just http httpClient that returns an observable
this.httpClient.get(‘backend-example.com’)
.pipe(
filter(vehicle => vehicle.type == ‘truck’)
)
.subscribe((vehicles: Vehicles) => {
//if we got a successful response we create an action that will make reducer save a data into a store
this.store.dispatch(fetchVehiclesActions.response(vehicles || null))
}, () => {
//otherwise we dispatch action with an error that also will be processed with a reducer
this.store.dispatch(fetchVehiclesActions.error(new Error(‘Horrible error’)))
})
}

Than we have a very similar method to fetch the drivers.

/**
* Fetch drivers by user Id
* @param userId
*/
public fetchDrivers(userId: string): void {
//dispatch an action that we did a request to fetch a Drivers list
this.store.dispatch(fetchDriversActions.request())
//in order to simplify a code I don’t use a service here, but just http httpClient that returns an observable
this.httpClient.get(‘backend-example.com’)
.subscribe((drivers: Drivers) => {
//if we got a succesfull response we create an action that will make reducer save a data into a store
this.store.dispatch(fetchDriversActions.response(drivers || null))
}, () => {
//otherwise we dispatch action with an error that also will be processed with a reducer
this.store.dispatch(fetchDriversActions.error(new Error(‘Horrible error’)))
})
}

And eventually, we have a ‘selectors’ that will select desirable data from a store.

export const vehiclesSelector = createSelector(getStoreData, (store): Vehicles[] => store.vehicles)
export const driversSelector = createSelector(getStoreData, (store): Drivers[] => store.drivers)
export const vehiclesWithAssignedDriversSelector = createSelector(vehiclesSelector, driversSelector,
(vehicles, drivers): IVehicleWithAssignedDriver[] => drivers.map(driver => {
const vehicle = vehicles.find(vehicle => vehicle.assignedDriverId === driver.Id)
if (!vehicle) { return null }
return {
…vehicle,
driver: driver
}
})
)

The benefits of reactive programming are undeniable:

  • It improves application performance. Now, your app spends less time on data processing, as you keep most of the data in a store. Angular is fast and ensures quick UI rendering.
  • It reduces the number of requests to the back-end, which allows saving money.
  • It is the hottest technology on the market. A lot of people would like to work on a project with such a technological stack, so it has to be easy to find a specialist.
  • Such an approach allows developers to write reusable code.
  • It is the perfect match for quickly-scaling projects.

So, if you aim at the fleet management application development – make the right choice and tap on reactive programming for data processing. And don’t hesitate to contact us for expert help.

Your subscription is confirmed.
Thank you for being with us.

No votes Thank you for your vote. 18148 52768e6b08

Thank you for your message.
We will get back to you shortly.