This is it – the last blog post of my Google Summer of Code project. After months of coding, debugging, and even more coffee, I have finally finished migrating Kommonitor components from AngularJS to Angular. What an exciting journey it has been! At first, I was scared that the task ahead of me was too big to handle, but my outstanding mentors Christian and Sebastian were there to help and show me the ropes. Their guidance allowed me to complete this mission successfully and now the application is a hybrid one. These changes will guarantee KomMonitor’s enduring success for years to come. Here is how I migrated KomMonitor to Angular and what I learned in the process.

Introduction

After years of building KomMonitor on AngularJS, it was time for an upgrade. Migrating to Angular ensured KomMonitor stayed up-to-date and secure. The syntax and architecture of the Angular framework compared to AngularJS are quite different, so the migration required rewriting most of the codebase. However, the benefits of Angular made the effort worthwhile. Some of the major improvements include:

 

• A faster render engine using a virtual DOM. This improved KomMonitor’s performance and responsiveness.
• A robust CLI tool for generating components, services, pipes, and more. This sped up development and ensured consistency across the app.
• A stricter, more robust template syntax. Angular’s templates are parsed into an abstract syntax tree, enabling advanced features like template type-checking.
• A wider range of tools and libraries. The Angular ecosystem is vast, giving us more options to choose from.

Goal

The decision to migrate from AngularJS to Angular was to increase the further capabilities of the KomMonitor and create a better application. This was was supported by several noteworthy factors:

• Improved Performance and Efficiency: Angular’s promise of faster and more efficient user experiences as it depends on the virtual DOM
• Enhanced Modularity: Angular’s component-based approach was found to be more advantageous and modular compared to the AngularJS framework and the Angular community provides long term support
• Access to Modern Features: Angular brought a wealth of modern features to our doorstep. The adoption of reactive forms and improved dependency injection elevated our codebase’s quality and our development experience.

 Challenges

Our migration journey was not without its share of challenges, but each obstacle we encountered was a stepping stone to our ultimate triumph. The KomMonitor migration journey involved a lot of challenges and provided me with a great learning curve too.

• Compatibility Issues: The challenge of bridging the gap between AngularJS and Angular was formidable. It was necessary to create a hybrid App so that the components that were developed in AngularJS can work with those developed in Angular. This was the best approach, rather than creating a entire application from the scratch. We tried to use certain built-in Angular libraries like NgUpgrade and NgDowngrade for attaining the goal.
• Deprecated Features: We embraced change by reimagining our codebase and aligning it with Angular’s vision. Each deprecated feature became an opportunity for improvement.
• Component-Based Transition: Transitioning from controllers to a component-based structure required a change in mindset and code transformation. Unlike AngularJS, Angular works on component based approach so a separate set of components is used to encapsulate the logic and view for different parts of the application
• Integration of Third-Party Dependencies: Migrating third-party libraries was a daunting task, but our resourcefulness prevailed as we integrated them successfully into the Angular environment. At the same time, we were not able to implement certain libraries, such as ng-Bootstrap, into the application.
• Services Integration:The integration of services into our hybrid application during the migration from AngularJS to Angular was a significant challenge. We addressed this challenge by adopting a service factory pattern, enabling us to dynamically instantiate services based on the runtime context. This approach provided flexibility, streamlined testing efforts, and maintained data consistency, all while ensuring code maintainability.
• Environment Variables: Certain environment variables were dynamic. It was a bit challenging to overcome this hurdle. Our solution was to create a static configuration of the files that stores the variables. This approach simplifies the management of dynamic configurations, ensuring smoother hybrid app deployment.

Creating Comprehensive Wiki Documentation

In our journey towards enhancing the KomMonitor for Future development, we’ve curated a valuable resource – the Wiki Documentation. This documentation serves as a recipe book. It suggests best practices for upgrades and development, providing a roadmap for developers to navigate and unlock the full potential of the KomMonitor and drive excellence in future development.

Migration of Services and Components

The migration of services and components was a remarkable milestone in our journey. The file structure of AngularJS to Angular has been classified into creating components, modules and services, aligning with Angular’s best practices. I worked on the migration of a few of the services, such as ConfigStorageService, ElementVisibilityHelperService, DiagramHelperservice. I also set up a few others services in a hybrid fashion with help of service providers.

The KommonitorConfigStorageService serves as a crucial component for managing configurations within an application. It handles the Keycloak, controls, and app configurations from a storage server. In addition, it uses Angular’s HttpClient and Observable to ensure that the configuration management is efficient as well reliable.

Another crucial service is the KommonitorElementVisibilityHelperService. It manages the visibility of elements in an application and allows for fine-grained control over which elements are displayed based on user roles and configurations. This service is particularly useful for creating responsive and role-based user access.

Of  all the services, KommonitorDiagramHelperService is a particularly crucial and versatile utility service designed to help out with the visualization and management of data diagrams within an application. It provides a wide range of functions and options for handling indicators, maps, and charts, etc.

The infoModal is designed to display important information about the application along with information about its version. The modal has multiple tabs, allowing users to switch between different sections of information. It contains details about KomMonitor’s purpose, data visualization capabilities, and contact information for support and collaboration.PR#47  

The KomMonitor Diagram component that displays dynamic charts for data visualization is based on Echarts. It begins with a loading overlay that appears when data is being fetched, enhancing user experience by indicating data retrieval processes.

The dynamic Indicator radar chart is a component that empowers users to interactively select and visualize data. Users can choose from a variety of indicators, specify timeframes, and instantly generate radar charts, providing a powerful tool for gaining insights from spatial and temporal data.

The Regression Diagram Component  interface provides a choice between different indicators for the X and Y axes, enabling users to explore relationships between data points. It also features a responsive chart section that displays the linear regression chart and computes the Pearson correlation coefficient for the selected data and  other components. Each of the above components has also been implemented with modules too for easier injection of libraries or services into the components.

Future Work

I’m enthusiastic about the work that lies ahead. In the perspective of GSoC, we have completed the migration of a few of the core components, services and other modules. While we’ve achieved significant milestones, there are still several key components and services that I’m eager to tackle to further enhance our application’s functionality and user experience. The completed components represent a solid foundation for our project, and I’m proud of the progress we’ve made thus far. However, I’m looking forward to expanding our capabilities by focusing on the following components and services.

• Points of Interest (POI) Component
• Reachability Component
• Filtering System
• Visibility Helper Service
• Keycloak Authentication Service
• Data Exchange Service

Conclusion

In short, the transition of KomMonitor to Angular has been a journey of growth and development. While there were obstacles to overcome, we have managed to traverse the learning curve and make significant progress. During this process, I gained important knowledge and strategies that will be beneficial for upcoming projects. By migrating to Angular, the performance and scalability of KomMonitor, as well as the user experience, were improved. It is now equipped for future success. The migration to Angular is an example of 52°North’s dedication to innovation and capacity to overcome challenges. All in all, the transition to Angular has been a transformative experience for KomMonitor, setting up a path for ongoing innovation. And I would continue contributing to the project and still be involved in open source.