Recently we did a project where we had to perform an enterprise software modernization for an international charity organization that still used a desktop version of a program.  The legacy software was facing a slow performance, updates, and security issues. The desktop client was originally written in Visual Basic 6, and since we needed to upgrade and migrate the legacy software to the web, we rebuilt it using  .Net ASP.NET MVC.

The project work was divided into several development stages. During the first phase of software modernization, we have converted VB application to .Net Windows Forms, written in C#. We were on the budget so we did a conversion from VB6 to VB.NET by Visual Studio 2003 and then converted VB.NET to C#. After that, we covered both applications by the same automated UI tests and worked on fixing bugs. That gave us 5 megabytes of C# code with 70% of test code coverage. That phase was done by three developers and a QA within 5 months.

As the second phase of software modernization, we extracted the data access layer and covered it by unit tests to make further development in a more controlled way. Phase was done by two developers and one QA within 3 months. The next step of legacy software upgrade was the extraction of the business layer, but, once again, due to the budget limits, we migrated this part to the web without extracting it. The phase was completed by five developers and one QA within 7 months.

The software architecture after modernization allows for high performance with minimum PC resources. It provides a much more secure and reliable way for storing documents. It also simplifies maintenance since update happens in one place and logs are stored nearby. Authorization is managed in a centralized way and not on per office principle.

How to build a right architecture and what development approach to choose for a legacy software modernization

We recommend executing projects that involve upgrading your software to the web in a slightly different way by introducing several others technologies and layers if that is possible (no strict technology/time/budget constraints).

Typically, we use Entity Framework Code-First approach for data access layer, which simplifies the maintenance of database structure via migrations.

Then we develop a service layer that incorporates business logic and introduces dependency injection technic that allows unit testing of business logic.

Then we develop Web API and use ASP.NET MVC or AngularJS (for single page web solutions) to build front end.

We typically use bootstrap to make solution mobile-friendly and responsive.

Web API + AngularJS works better for solutions that need mobile supports well, since it can be easily wrapped into mobile hybrid apps using Ionic and Cordova frameworks. Unfortunately, hybrid apps are still slower than native in term of performance and hardware interaction, so in some cases, we recommend switching to native apps.

In order to get (and keep!!) high-quality level we do covering of business logic layer by unit tests. Typically, we use the Microsoft Unit tests framework. Another important aspect is to test UI, and we do that by applying automated UI tests. Selenium framework works the best here for us.

For software as a service, there is another crucial aspect – overall performance of the system in high load scenario. For stress testing, we use JMeter tool and ensure that our solution is performing well on the targeted number of users.

And final part for successful releases and support of the product is continuous integration and release automation. We typically use Team City as CI, Git as source control and appropriate tools for deployments (MSBuild, PowerShell, IIS Web Management).

What tools and technologies we recommend for UI implementation

Some time ago, we have done a general analysis of what tools to use when implementing UI for an updated software and made some conclusions.

jQuery approach

Our software architects suggest using jQuery and Bootstrap UI alone with lightweight client-side libraries like KnockoutJS.

Pros:

  1. Simple solution, easy to implement.
  2. Widely used technology, so there is no shortage of developers who can support jQuery based solution.
  3. Great range of quality Bootstrap UI or pure CSS themes to choose from supporting all modern UI components.
  4. Easy to customize the UI.  All Bootstrap CSS themes are very expandable and fast to implement.
  5. jQuery solution including Bootstrap UI provides good web page performance.

Cons:

  1. A bit outdated solution. Works good for small projects but not scalable enough to support midsize or large web application.
  2. The implementation effort in the midsize project is higher because of the jQuery is not a full-size framework but rather an Ajax library useful for small projects or Ajax communication.

Single page application using client-side framework ReactJS

Pros:

  1. ReactJS is a full-size client framework for creating fast web applications designed to be integrated with REST API.  It’s a modern up-to-date solution, so it won’t become a legacy soon.
  2. We can implement great application performance as the framework is designed to transfer minimum data through the internet and use latest web browser features to support good performance (using local data caching, optimizing HTML rendering and JavaScript).
  3. The solution that we implement using JavaScript OOP approach is designed for scalability without losing the high performance.

Cons:

  1. It’s a new technology, so we have limited resources available.
  2. Web developers with jQuery skills and front-end background will require some learning period.

Solution based on UI Components like Sencha, Telerik, DevExpress

Pros:

  1. Those are full-featured web components packs designed to implement all types of controls and are suitable for solutions with a lot of forms and page elements.
  2. Very useful for migrating Windows applications to the web as they allow implementing the similar look and feel of the legacy desktop application and still support all advantages of web solution.
  3. Implementing solutions using such components takes relatively less time since you can use the wide range of components they provide with small implementation effort.
  4. Components are very popular, so it’s relatively easy to find resources with such experience.

Cons:

  1. Average web page performance. UI Components like Sencha, Telerik, DevExpress are heavy with a lot of styles and JavaScripts slowing down the overall web page performance. This is a result of providing rich component functionality which we might not always need.
  2. Not easy to customize. Components support multiple design themes to choose from which replicate the look and feel of most popular designs (Windows UI, Flat UI). However, when we need to customize something further it will require additional effort.
  3. Will become a legacy in the near future and industry is moving to client-side frameworks like ReactJS.

Real-time web application using web-sockets

Based on SignalR .NET Framework

Pros:

  1. Great real-time web page experience. This solution provides the best performance comparing to other approaches as it leverages Web-socket both sidereal time communication.
  2. It’s often used in solutions where performance is critical like online real-time games or stock exchange, Forex applications where the information has to be delivered to all user simultaneously and immediately.
  3. The relatively small learning curve required for the experienced .NET developer as it’s another .NET web extension library which has official Microsoft support and learning materials.

Cons:

  1. If real-time performance is not a critical point for your app then using SignalR might be the unnecessary effort for you as other solutions still provide good or acceptable web page performance.

Abto Conclusion

The best choice depends on a size and requirements of the product.

  1. For a small or mid-size modernization project, the jQuery solution with Bootstrap UI is the best option.
  2. Solution based on Sencha, Telerik, DevExpress web components is perfect if the customer is about to upgrade a solution with minimum effort as we can use a wide range of rich components they provide and the customer is fine with sticking with some of the existing design themes they provide.

Also, we need to consider the average web page performance of such heavy components as they are not very customizable. However, if the project is large and the customer wants to go with the latest technologies on the market because he/she wants to sustain and extend the project for a long time without refactoring the legacy code for years – the ReatJS is the right choice. And SignalR real-time application will make sense if the performance is crucial and the app has to deliver an immediate response (in a meter of milliseconds).

If you are still undecided on what will work best for you, send us a message.

Insert math as
Block
Inline
Additional settings
Formula color
Text color
#333333
Type math using LaTeX
Preview
\({}\)
Nothing to preview
Insert