Project Overview

Welcome to our mid-term blog post, where we share exciting updates about the migration of KomMonitor to Angular. Let me provide a small overview of KomMonitor, which is the brainchild of a research project initiated at Bochum University of Applied Sciences. The current version of KomMonitor has been developed using AngularJS, which serves as a reliable foundation for its functionalities and services. Over time, it has grown to be an invaluable tool for urban planning, environmental management, disaster response, and more. By combining the power of Geographic Information System (GIS) and statistical data, KomMonitor simplifies the monitoring and analysis of geo-spatial information, enabling data-driven decision-making.

Migration Goals

The main goal of the migration is to refactor the existing Infomodal and Version Info Modal components to improve performance and maintainability. We decided to prioritize the migration of the Info Modal components because the existing Infomodal and Version Info Modal components are crucial parts of the user interface. The Infomodal is designed to deliver contextual information at relevant points in the user journey. It helps users understand specific features, actions, or any significant changes that might affect their interactions within the application and provides a guided tour. The Version Info Modal ensures transparency by presenting concise release notes and updates about the current application version.

 

 

 

Challenges

Throughout the migration process, I have  encountered a few challenges that required careful consideration. Some of the major hurdles included:

1. Developing a Hybrid Application
   I neede to make sure the current build of the AngularJS version of the KomMonitor web-client doesn’t get affected by the migration of the Angular application. To overcome this, I used ngUpgrade to bootstrap the Angularjs components into the Angular application.
2. Decoupling dependencies
   The existing components had tightly coupled dependencies, making it difficult to modify or extend individual functionalities.
3. UI/UX considerations
   The previous web client version had been using the traditional Bootstrap CSS framework along with custom JavaScript implementations to handle various UI interactions and components. ng-bootstrap provides Angular-specific directives for Bootstrap components, which allows us to seamlessly integrate Bootstrap elements into our Angular application. Since ng-bootstrap directives were native to Angular, we reduced the need for custom JavaScript implementation. ng-bootstrap provided us with a range of styling options that we could easily customize.

Accomplishments

Understanding the existing codebase
I thoroughly examined the codebase of the Infomodal and Version Info Modal components to identify AngularJS-specific constructs and dependencies. This helped me understand the scope of the migration and which parts of the code needed to be addressed.

Checking for breaking changes
After updating to TypeScript, I carefully checked for any breaking changes or deprecations in the new version. I reviewed the TypeScript release notes and official documentation to identify any potential issues that might affect the existing codebase.

Fixing type errors
As TypeScript provides static type checking, I addressed any type errors that surfaced during the migration. This step was crucial for ensuring type safety and catching potential bugs early in the development process.

Creating Angular modules
To improve code readability and maintainability, I created separate Angular modules for the functionalities of the Infomodal and Version Info Modal components. These modules encapsulated the related components, services, and other resources, making them more manageable and easier to maintain.

Identifying shared dependencies
During the migration process, I identified common dependencies that were used by both components. By extracting these shared dependencies into separate Angular modules, I ensured that they could be easily reused throughout the application.

Adapting Angular components
With the smaller, reusable modules in place, I migrated the existing Infomodal and Version Info Modal components to Angular components. This involved updating the component syntax, templates, and bindings to align with Angular standards.

Migration architecture
The migration architecture was designed to ensure a smooth transition from the legacy components to the new and improved ones. The diagram below shows the implementation. The existing Info Modal component is written in AngularJS. A Hybrid Application, integrates both AngularJS and Angular components. The Upgrade Module acts as a bridge between AngularJS and Angular components. The diagram shows the Info Modal component rewritten in Angular. It includes Angular-specific syntax, components, services, and templates.

ngUpgrade was used to bootstrap the AngularJS components to work with the Angular application. It provides a tool called UpgradeModule that provides utilities to bootstrap and manage hybrid applications. Internally, what happens on top of this is that components and services managed by one framework can interoperate with those of the other framework, mainly in areas like dependency injection, the DOM, and change detection.

Next Milestones 

• Migrate other selected components from the current AngularJs version to Angular.
• Ensure that the application works in a bootstrapped version that will serve as an important base for additional component migrations.
• Work on a documentation providing best practices for further component migration of the Web Client.