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:
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.
- Project overview
- Reasons to modernize the application
- Why Angular
- Application modernization process
- Bottom line
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.
- 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
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.
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
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.
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.
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).
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.
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.
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!
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.