Software Modernization: Case Study

Legacy Application Modernization: Success Story

Doing our job, we witness user 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 in the digital market.

Not surprisingly the trend for software modernization is on the 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 to think of the proper maintenance or 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:

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. The creation of the feature resulted in 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

  • Thousands 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

    Get a free consultation

    Take the first step to a powerful product


    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. 

    5. Easy update to the latest version. Working on the project modernization, we started from Angular 7 (the latest available Angular version for the moment). Now, after a long-awaited release of Angular 9, it’s possible to update from Angular 7 and Angular 8 effortlessly using the Angular update guide. This tool shows you a comprehensive set of actions to take before, during, and after the update, depending on the app complexity and other dependencies.

    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

    Application modernization 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 project (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. Modernize the main login page (as Zeno.PM provides various login experience to a user: QR code, SSO, Azure AD, mail, etc.)

    4. Improve performance and page loading speed. We’re splitting the application into modules & implementing lazy loading to make them load per request. Thus, the page isn’t loaded until a user goes directly to it.

    Modules

    Home Dashboard

    Home dashboard is the first thing a user sees after logging in/ signing up. The dashboard includes four tabs to provide a comprehensive overview of the projects (My Projects), current tasks (My Work Area), all boards (My Zeno Boards), and search (Search Projects).  

    Home dashboard written in Angular 9 using Angular Material
    Home Dashboard of a Project & Portfolio Management application

    Admin Portal

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

    Admin Panel written in Angular 9 using Angular Material
    Admin Panel of a Project & Portfolio Management application

    Hours Editor

    Hours editor is one of the modules, missing in the core app. It has been created using Angular 9 to decouple resource data from the budget data into its own table structure. The customer has a similar resource & budget management table in the JavaScript application version but we’ve taken a decision to simplify this tool by splitting it into two parts. As a result, a user gets a smaller table to manage resources easier and quicker.  

    Hours Editor table written in Angular 9 using Angular Material
    Hours Editor table of a Project & Portfolio Management application

    Tools

    Akita state manager

    State management is difficult: from page filters to the data stored locally for further use, the state manager allows continuously taking control over all the processes, simplifying working with the application.

    Thus, we’ve chosen Akita as a state management pattern over ngrx and ngxs, inspired by React’s Redux to keep up with the best Angular practices and encourage simplicity.

    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!

      Subscribe to Our Newsletter

      No spam, only hot&fresh posts from Jellyfish.tech team

      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 in 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.