webdesigners

Recently we did a project where we had to migrate a big desktop client written in Visual Basic 6 to .Net ASP.NET MVC website for Swiss charity organization. It was performed in several stages with big time gaps between them.

During the first phase, we have converted VB application to .Net Windows Forms written in C#. We were very limited by 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 a second phase, we extracted 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 planned was the extraction of the business layer, but, once again, due to the budget limits, we converted to the web without extracting it. The phase was completed by five developers and one QA within 7 months.

Current architecture requires only simple PC and internet connection in the office. It provides much more secured 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.

Typical architecture and development approach

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 maintenance of database structure via migrations.

Then we develop 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 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 targeted number of users.

And final important part of 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).

More general UI approaches analysis and recommendations

Some time ago, we have done some a more general analysis of UI approaches and made some conclusions.

jQuery approach

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 designed to create 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 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 implemented using JavaScript OOP approach, so it’s designed to build larger web systems without losing the web page performance and scale them on demand.

Cons:

  1. It’s a new technology, so we have limited resources availability. But it is growing very fast.
  2. Web developers with jQuery 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 heave solutions with a lot of forms and page elements.
  2. Very useful for moving Windows applications to the web as they allow to implement the similar look and feel as the original Windows application and still support all advantages of web solution.
  3. Implementing solutions using such components takes relatively less time as they allow to 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. Those components 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 solution 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 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 project, the jQuery solution with Bootstrap UI is the best option.
  2. Solution based on Sencha, Telerik, DevExpress web components are perfect if the customer is about to build 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.

And it is also needed to take into consideration the average web page performance of such heavy components and 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 having a need to refactor 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 immediate response (in a meter of milliseconds).

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