Transitioning from AngularJs framework to Angular framework

Sterling Store Engagement is developed by using AngularJS framework. AngularJS is an open-source, JavaScript-based, and a front-end web application framework used for developing dynamic web applications.

The front-end architecture of the application follows a MVC (Model-View-Controller) design that helps to leverage the secure MVC data binding feature of AngularJS to make the application performance dynamic. However, AngularJS was not built with mobile support in mind, and therefore, lacks support for mobile browsers. AngularJS is an efficient framework and has benefits in terms of it being flexible and lightweight for building smaller applications. With addition of new features in Sterling Store Engagement, the code base became complex and impacted performance due to higher number of scopes and slower two-way bindings.

With the objective of building a future-proof architecture by following modern development principles, it was decided to move from an MVC-based architecture to a modern micro-frontend architecture by using Angular and Single-SPA framework. Some of the business benefits, which can be leveraged with this re-architecture include code optimization, ease of maintenance, and cost optimization (minimal dependency on third-party tools).

The micro-frontend architecture splits monolithic application into smaller and logical modules called as micro-frontends. At the same time, retains user experience similar to using a single application. In the new micro-frontend based architecture, the application is composed of multiple angular application modules and leverage single-spa framework as a high-level router. When an URL becomes active, single-spa loads specific angular application based on the route. The Angular framework allowed developers to build the new application faster, make them highly efficient with smaller bundle, resulting in fast loading of applications.

Customization

The Sterling Store Engagement (next-generation) solution supports the customization of UI by using both Differential and Override extensibility methods. Due to the change in architecture, you can expect changes in setting up a local development environment, code structure, developing and extracting customizations. However, the core support of customizing the UI by using Differential and Override extensibility is retained. But, the way to write customization changes.

Note:

You can debug the application-provided source code and customization code only in the local development environment.
The appMode=dev property is not supported.