NetZero Platform Re-Engineering: Upgrading from AngularJS to Angular
NetZero Platform Re-Engineering: Upgrading from AngularJS to Angular
ETA+ is a cloud-based platform that helps building owners and managers increase energy efficiency based on a digital twin for each building, which includes all facilities and devices.
Germany
18 months
Renewables & Environment
2x Front-End Developers
2x Back-End Developers
1x PM
Web Development
Team Extension
Re-Engineering
.NET
ENTITY FRAMEWORK
.NET
ENTITY FRAMEWORK
ANGULAR
PRIMENG
MS SQL
MICROSOFT AZURE
ANGULAR ELEMENTS
NX MONOREPO
ETA+ is a sophisticated and expansive platform with numerous integrations and vast amounts of data. Its primary function is to aggregate data from various smart home apps and devices, processing it to create reports for building owners and managers regarding building efficiency.
Built using the outdated AngularJS framework, the system became outdated and vulnerable, necessitating re-engineering. Over time, the large and monolithic solution could not keep pace with the growing business needs, which included a huge increase in users and integrations.
After working dozens of years on big IT projects, I found myself thinking, "I want to do something meaningful." We thought about the biggest challenge for us as a society and it was the climate problem. In the EU alone, 35% of all CO2 emissions stem from buildings, encompassing both development and operational carbon. So we created ETA+ to help people fight climate change. Our platform helps building owners and managers optimize their utilities costs and decrease CO2 emission. We deliver properties as digital twins and the team from OTAKOYI is helping us a lot to reach our goal.
Migrating a platform with a significant amount of data and users requires careful handling. We opted for a section-by-section migration approach, utilizing two primary tools: Nx Monorepo and Angular elements.
With Nx technology, we transitioned from a monolithic structure to microservices, rewriting each component using the latest Angular17 framework and encapsulating them into Angular Elements. This approach resulted in a flexible system compatible with most modern technologies.
| Feature | Monolithic Architecture | Microservices Architecture |
Structure | Single, tightly integrated application | Comprised of loosely coupled, independently deployable services |
Scalability | Limited scalability | Horizontal scalability due to the ability to scale individual services |
| Deployment | Single deployment process | Individual services can be deployed independently, enabling faster release cycles |
| Fault Isolation | Single point of failure | Failures in one service don't necessarily affect the entire system, improving fault isolation |
| Resource Efficiency | May lead to resource underutilization | More efficient resource allocation as resources can be scaled based on demand for specific services |
| Dependencies | Tight coupling between components | Loose coupling between services, reducing dependencies |
Angular's guidelines suggest gradual migration by enabling AngularJS and Angular components to coexist within the same application. ngUpgrade provides APIs for interoperability between AngularJS and Angular, allowing them to communicate and share data. Essentially, you connect new components and link them to the old ones. However, we rejected this scenario as it couldn’t resolve the client's scalability and interoperability issues.
Angular Elements allows developers to create standalone Angular components that can be used in any web application, regardless of the underlying framework.
This approach enables the creation of a fully upgraded platform without the old AngularJS code lingering under Angular 17. Angular Elements takes an Angular 17 component, compiles it into a standalone custom element, and exports it as a JavaScript that is compatible with a wide range of technologies.
As always, there are multiple upgrade options available, and the choice is dictated by the business goals. We opted for an option that enabled us to modernize the platform by making small yet important changes to the architecture, components, and database.
Initially built monolithically, ETA+ had outgrown it, requiring increased capacity to accommodate its expanding operations. In response, the client decided to address all system constraints during the migration process, making the best choice for their business.
The platform comprises two databases housing various types of information crucial for the client's operations. With ETA+ aiming to connect 1,000,000 devices to the platform by the end of 2024, efficient data storage became crucial. To address this, we migrated certain calculations from the database to the backend, implemented indexing to expedite request processing, and optimized the number of requests made by pages, some of which reached up to 100.
The data is now well-structured, the database operates swiftly, and only necessary requests are processed at any given moment.
Migration from AngularJS became highly demanded when support for this version was terminated by Angular. The ETA+ case serves as an excellent example of how migration can mark a new beginning for software. Firstly, transitioning to microservices enabled us to scale the platform efficiently, which was crucial given the rapid growth in users and data. Secondly, we optimized certain backend components, resulting in improved solution speed. Thirdly, automation of data collection enhanced platform independence and ease of maintenance. We continue to work closely with the client to achieve even better results.
We have a proven track record of building high quality solutions for customers all over the world.
