If you need to develop highly scalable applications, you need to consider the risks of a badly designed architecture. This is particularly true if your goal is to optimize the customer experience, adopting a user-centered design approach that is not limited by any technical constraints.
Microservices can help with scalability and flexibility in development projects as they allow large applications to be broken down into smaller services. These communicate with each other through APIs rather than directly through code, making it easier for teams to work simultaneously on different parts of an app.
The result is faster development cycles and more efficient collaboration between developers across multiple teams within an organization. In addition, overall software quality is improved because there are fewer opportunities for bugs when individual components are less tightly coupled together.
In a recent project, NTT DATA developed a complex ecosystem made up of mobile and web apps, in which the whole design process was primarily based on the needs of customers. This was made possible by a microservice-based architecture in the back-end, making front-end design choices extremely flexible and free of technical constraints.
This article demonstrates why such architectures are a winning choice, and how they can help in building scalable applications for both back- and front-end solutions.
The NTT DATA case study
Before discussing the technologies adopted in more detail, as well as the architectural design choices, let’s consider a bit of background. NTT DATA is known for providing high-quality system integration services to its customers, which usually means developing very complex applications, often distributed and in constant evolution.
This process often involves both front-end and back-end development, and some architectural choices can have an impact on both of these areas.
A recent NTT DATA project – for a company active in the energy market – required the design of a significant infrastructure to allow the combinaton of several application modules. The goal was to allow users and operators to manage everything to do with the ecosystem of rechargeable electric vehicles.
From a user’s point of view, this meant booking charging stations, checking remaining balance, setting billing options, and so on. As for the operators, the infrastructure needed to allow them to monitor the usage of charging stations, manage users’ tickets and many other similar tasks.
The solution
In order to implement such a complex idea, the design choice to separate front-end and back-end as much as possible is critical. This concept allows the creation of front-end applications that are completely agnostic in regards to the technical needs of back-end technologies.
At the same time, leveraging this paradigm can make such an infrastructure extremely maintainable, and potentially highly scalable. Once the system is implemented using this paradigm, you can decide to replace a front-end module without affecting the back-end, which is a particular plus when the applications you need to design are quite complex.
NTT DATA implemented these ideas by building a set of microservices, each of which can be queried for specific data or actions while remaining isolated from the actual client modules (i.e. the front-end).
A microservice architectural style is an approach to developing a single application as a suite of small services, each running its own process and communicating with each other using HTTP (typically using the REST paradigm).
These services are independently deployable, and each of them can represent a module of the whole architecture. Consequently, all the infrastructure can be easily made highly scalable.
This was the fundamental idea behind the application system developed by NTT DATA; various client applications (such as mobile apps, or web-based dashboards) can access each of the available microservices via REST API. This idea is depicted in the following image:
Building an application as a service
A microservice architecture like the one described above is particularly effective for front-end development; there’s no need to worry about what’s inside each microservice, and there are no constraints on the technology you can use. The only thing you need is Internet access and the ability to perform HTTP requests.
Thanks to this facility, the NTT DATA front-end development team could focus solely on the interface design and implementation.
Design definition
The first problem to solve was understanding what the customer actually needs. To this end, the team started collecting user feedback, and organizing their ideas in response to the comments received. The team then started mocking up some UIs. The resulting interfaces were tested in order to gather comments on the specific functionalities provided, as well as to understand the user experience of the various client applications.
Focusing on user needs before starting the actual development is crucial if a team wants to avoid design issues that may be difficult to fix later in the process. Despite this, many software development teams seem to forget about users, diving straight into development at the risk of building something that is only minimally usable.
Luckily, this was not the case in the NTT project we are focusing on here.
This process produced the design of the mobile and web apps required by the project.
Mobile app
The team developed a first version of the mobile app three years ago using Xamarin, a framework known to allow the development of a cross-platform application with a single codebase. At that time, NTT DATA considered Xamarin a smart solution to avoid the need for two parallel development teams for iOS and Android.
More recently, thanks to experience gained in recent years on other technologies, the team decided to develop the new version of the app using Google’s Flutter, which is now considered the best technological choice for cross-platform mobile development framework.
There are many reasons behind this choice. First and foremost, Flutter applications are more performant by default: Flutter is easy to use with a variety of APIs, and its graphic libraries make it faster and higher performing, especially when rendering graphic components.
In addition, Flutter allows for a more rapid development, thanks to a feature – also known as “hot wheel code” – that allows applications to be tested directly on the device and while development is ongoing.
These features make it likely that Flutter will replace Xamarin in such situations – NTT DATA shows this is already happening.
It is also worth mentioning that Xamarin still has plus points for anyone who doesn’t want to move into a different programming language, especially if you consider that learning Dart is necessary for Flutter development. Any developer who already has some knowledge of C# can easily learn how to develop a Xamarin application.
On the other hand, Flutter allows the creation of mobile applications with the same performance as a native app.
Regardless of the technology used, the main focus of the NTT Data team is the development of high quality mobile apps with extreme performance, that are fluid and stable. The realized product has to offer the best service to the final users.
Front-end Web
While mobile apps were intended for the final users, there were two different web applications for this project:
- The first was developed with end users in mind, to provide features similar to those of the mobile app
- The second was developed to provide a control dashboard directly to the customer.
The latter of these web apps needed to be modular to allow for easy integration of future sections.
NTT DATA’s team needed to make a choice from among the three most used web development frameworks (React, Angular, and Vue). It is interesting to understand the reasons behind their choice.
Angular was immediately excluded; its nature is considered too structured for this particular project. Considering the microservice architecture described above, in this context NTT DATA simply needed a fast way to present data.
The remaining choices, Vue and React, were both used. React was used to define the UI of the web app intended for the end users. This choice was supported by the need to provide a richer experience, similar to that offered by the mobile apps.
At the other end, Vue was used to develop the dashboard, chosen primarily for its ability to support faster development in respect to React and Angular.
Conclusions
When your focus is on customer experience with a user-centered design approach, the technology used needs to be an enabling factor and not a constraint. That’s why the back-end architecture must support UI design needs; in fact, any poor architectural design choice might have a significant impact on the end user experience.
A microservice-based architecture like that developed by NTT DATA can easily allow the development of front-end applications that are completely agnostic to the technical needs of back-end technologies. This allows teams to focus on user requirements in the design process, with high flexibility.
Even in terms of scalability, microservices enable developers to apply significant future changes without compromising the rest of the architecture. Introducing a new client, or completely rewriting an existing one is always possible, making such an infrastructure extremely maintainable, and potentially highly scalable.
