Automated Migration of PowerBuilder Desktop Applications to Web

Recently more and more enterprises are going to migrate their business applications from the desktop to the Web.

This decision is usually driven by the inability of desktop-only apps to support new innovative features and high cost of desktop application support. Your enterprise will make gains from accessibility, functionality, performance, and web development best practices. Clients become more engaged in innovative and creative application usage.

But a successful desktop application migration requires a scrupulous and all-embracing scenario. That’s where an intelligent solution is required.

At this stage we want to share our experience in migration of PowerBuilder applications to the web. We‘ll show you the most adequate solution for this task (and the code as well).

We had tried out many potential target ASP.NET and Java web technologies, such as ASP.NET WebForms, ASP.NET MVC, ASP.NET Web API / Java Spring Boot REST API + AngularJS / ReactJS, JSP, Java Spring, etc.

We took care of the availability, scale and infrastructure management of the app while working on the right solution. Careful research and analysis resulted in the most adequate approach development. It has met our architectural and performance requirements.

PowerBuilder to ReactJS automated migration solution

Below you can see PowerBuilder standard demo application looks in its original desktop and migrated web SPA version:

Basically, the solution implements 2 main technical parts:

User Interface (UI) and business logic  is located on a client side (JavaScript ReactJS).

Stateless REST API server (it can be C# or Java Spring Boot) with calls to database (ADO.NET, Entity Framework or Java Hibernate, JDBC).

Benefits of adopting an SPA Architecture

Understanding the advantages of Single-Page Application (SPA) starts from the simplicity of using and implementing them.  But there much more:

• Similar-to-desktop architecture allows to achieve a high conversion automation level.
• Fast, as most resources (HTML+CSS+Scripts) are only loaded once throughout the lifespan of application. Only data is transmitted back and forth.
• The migration and further development is simplified and streamlined. There is no need to write code to render pages on the server.
• Easy to debug with Google Chrome web browser, as you can monitor network operations, investigate page elements and data associated with it.
• Can cache any local storage effectively. An application sends only one request, stores all data, and then it can use this data and in some cases work even offline.

Essential Features of the solution

• Latest JS frameworks are used on client’s side- ReactJS, Redux, Redux Saga, Material UI.
• Flux architecture with unidirectional data flow.

Note. Flux is the application architecture that Facebook uses for building client-side web applications.

• Only popular/well maintained library packages are being used.
• No custom “frameworks”, low number of additional custom components/functions.
• Most of PFC functionality is covered by the target technology stack out of the box.
• Inheritance to composition conversion.

Note. Inheritance and composition are two programming techniques developers use to establish relationships between classes and objects. Whereas inheritance derives one class from another, composition defines a class as the sum of its parts.

• Variables renaming from underscore with Hungarian notation to camel case.
• Easy-to-understand and maintain the file structure.
• Using virtualization for long lists.
• Thin Data Access Layer (REST API + DB).
• The server part can be done using .NET or Java.
• Modern Web interface with basic adaptive (resizable) layout.
• Reports styles can be downloaded and remain the same as in PowerBuilder.
• High percentage of conversion automation level was reached. Nevertheless, conversion accuracy and coding best practices were of the most concern, rather than 100% automation level.

Top 4 important issues to consider:

• More JavaScript, less C# or Java code.
• Initial loading of the resources can be not so fast but it can be optimized further by using code splitting/chunks.
• Some of PowerBuilder’s Describe()/Modify() cases are still not well automated.
• Additional manual work for applying coding best practices:

1. Adding IDs, paging, sort/filters (will be implemented on server or database side, not automated) to SQL queries.
2. Entry point, main page frame, database connection, authorization/authentication, user roles, advanced layouting.
3. All transaction cases should be reviewed and adapted to the current architecture.

Technical challenges resolved:

• Complex inheritance and most of the conversion already automated in conversion tool.
• Implemented analogs of PowerBuilder controls and usage of Material UI, settings and styles of controls gathered in one place.
• Adaptive layouts, controls, modern web UI.
• Separate editing a particular record in DataWindow for better user experience and performance.
• Performance optimization for many data and records to load: virtualization, paging, adding custom stored procedures to database. DDDWs, search, filtering, etc.
• Reports migration and their exporting to HTML and Excel, PDF, CSV, etc.
• Parsing and loading of custom formats. Work with MS Word features (bookmarks).
• Authentication via JWT (JSON Web Tokens).
• Work with custom SOAP services.
• Special dispatcher for Windows.

Conclusion: If you are considering migration of your legacy PowerBuilder application (with or without changing your database) we strongly recommend you to put your attention to this ready battle-tested PowerBuilder to ReactJS automated migration solution. 
The approach describes above has been successfully applied to the following 2 commercial migration projects.