Software Modernization: Case Study

How We Modernized Legacy Application

Doing our job, we witness client requirements moving on following the immense progress the technologies make day in and day out. Stability of future project maintenance and up-to-date design are the must for every project, launched on the digital market. 

Not surprisingly the trend for software modernization is on rise as it’s crucial to use new technologies and functionality that are relevant for your target audience to stay afloat. Here a business runner may face quite a serious problem. Out-of-date technologies that were popular, available, or conventional (choose your option) at the moment of project building, turn out to impose restrictions on a project:

  • speed;
  • security;
  • scalability; 
  • structure; 
  • design. 

For the seasoned project, it’s frequently hard to beat young competitors on these criteria. One of the best options to manage this problem is thinking of the update your project might need. Consultation with a dedicated web development team is highly recommended to get a professional and scalable look that will become the first step towards the increase of your competitive advantage. 

Contents:


Our Experience of Software Modernization

Project Overview

When our team started working on this project, we had the task to build only one feature for an ongoing PPM application written in JavaScript (JS was the best solution for creating a similar functionality at the moment). Creation of the feature resulted in the long-term cooperation, during which we were mostly working on adding new functionality to launch the product, having no free minute for reviewing and upgrading the code.

This project grew to a large JS application that provides multiple functions from the Gantt Chart to messaging with more than 30 active users-huge corporations and companies. The new functionality is added as well upon user requests.

Reasons to Modernize the Application

  • Hundreds of lines of code. At a certain point, our team realized that despite the JavaScript possibilities, it forces us to write too many lines of code that would be difficult to support in the long term. 
  • Increase in users’ requirements. As the application has scaled up from 100 users to 1000, the requirements have increased as well, insisting on boosting the speed of web development. This was exactly the moment to start using the framework instead of writing the typical components & elements ourselves.
  • Change in developers’ preferences. The front-end team has been replaced by the developers, who’ve taken the fresh look at the project bearing in mind the latest technology updates.

We’ve evaluated the situation and estimated the risks to pick up Angular as the main front-end language for application modernization and offered a software modernization solution to a customer.

Some of the ‘not so sexy work’ has been a major refactoring of code and system architecture that allows the application to scale from 100s of projects and users to 1000s. This has been successfully undertaken and not impacted existing system users in part due to Jellyfish.tech’s work.

from Clutch customer review

Why Angular

Mostly, the reasons are the same as for choosing this JavaScript-based framework a part of our stack of technology: 

1. Progressivity. In addition to having numerous libraries, Angular is continuously updated, thus, it provides a plethora of excellent possibilities to developers. For example, certain libraries reduce the time for template elements creation, thus, allow focusing on new features. 

2. Universality. It will be much easier for us to expand the team of developers offering to candidates working on the Angular project rather than JavaScript applications. In addition, further maintenance and scaling-up are possible only in the Angular environment.

3. Reusable components. This Angular feature allows using the standard set of components (login, sign up, etc.) multiple times. 

3. Strong expertise.  Our developers have great experience in working with Angular, thus, we’ve taken a logical decision to use the expertise to build a powerful app for our client. 

We’d like to update the technologies used for our tool. We don’t work on the principle of “whatever happens with the project in the future, it’s not our problem”. Our main objective is to deliver a successful project that meets all the demands of today’s digital world. Ultimately, this update is inevitable, the only question is how much could we save for our client by doing it now, not in a month or year. The sooner will we do it, the quicker our client will benefit from the update.

Alex, Frontend Tech Lead

Process

Our primary goal is not only to refactor the code. We work on constant UX enhancement and use the best practices to improve UI. We take the old code only as an example of the functions that should be implemented.

The turning point of making the decision to modernize the application was our proposal to change the backend strategy by turning to asp.net.core that will basically result in deep architecture modification aimed at the creation of a flexible functionality, SSO (Single Sign-On) implementation and Azure Ad join.

Plan

In so doing the project should have to go through the front-end modification to get a better structure. 

So, what we’ve done to update the project:

1. Start the projects (we manage both frontend and backend modifications) by creating an Angular environment for the frontend. 

2. Set out structure and routes that are actually a kind of sitemap. As the project is large, we started by building the basic system to manage the parts, highly demanded by users. 

3. Main login page (as Zeno.PM provides various login experience to a user: QR code, SSO, Azure AD, mail, etc.)

4. Project selection interface that a user sees right after signing in.  

Modules

Templates

As I’ve mentioned before, one of the biggest Angular advantages is the possibility to create one template for all typical elements an app has so that a developer does not need to reinvent the wheel each time. 

State manager

The complex yet necessary component of a large application that helps track the app state. From the page filters to the data stored locally for further use, the state manager allows taking control over all the processes, thereby simplifying working with the application.

Admin panel 

In close collaboration with the customer, we’ve prioritized the application components modernization–admin panel was the first. For now, our team continues modernizing the admin pages transferring its functionality as well as working on its configuration and different services. 

Special features of the update

The biggest particular feature of this project is the live audience, thus, we develop new functionality and rewrite the old code simultaneously. This process is designed in a way that allows involving only certain modules in time without interfering in the project viability. What is more, we have a good chance to involve the real users to test any updates, in this way, we get valuable real-time feedback from a live audience that helps us introduce the improvements right away based on customer experience. Although not every user has access to the Angular admin panel, for now, its release is eagerly awaited!

Bottom Line

The expertise of our developers’ team enables us to provide the most appropriate solution based on your type of project, budget, demands, and general expectations. 

Jellyfish.tech cares about your project not only during the development process itself, but further maintenance, viability, and perspective of a project we take do matter for us as well. In our humble opinion, this is the only approach that has a right to exist on the digital market of today. We do not deliver poorly designed apps, we don’t take projects only for making money, we don’t let things slide. Creating a quality project for you that will be bound to succeed is above all.