As you may know, AngularJS framework is no longer supported. Creating new pages using that framework is discouraged.
How can we handle existing pages, written with older framework? How can we handle new pages?
There are different strategies that can be used to obtain this goal (at least partially)
When you need a new library or external capabilities, most libraries (Angular wrapper etc.) are now only targeting Angular 2+. Angular offers a series of built-in tools for efficiently migrating AngularJS projects over to the Angular platform, a piece at a time.
One of the keys to a successful upgrade is to do it incrementally, by running the two frameworks side by side in the same application, and porting AngularJS components to Angular one by one. This makes it possible to upgrade even large and complex applications without disrupting other business, because the work can be done collaboratively and spread over a period of time. The upgrade module in Angular has been designed to make incremental upgrading seamless. A detailed guide is on https://angular.io/guide/upgrade.
Built-in APIs offered by Angular are described here: https://angular.io/api/upgrade. They supports the upgrade path from AngularJS to Angular, allowing components from both systems to be used in the same application.
There are different migration strategies, but the most preferred one is to run side by side with Angular being the main application.
The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface.
Something often not mentioned in discussions is that micro-frontends can be split horizontally or vertically.
Horizontally would mean the case described here: Multiple independent apps on one view. I really don't want to see the resulting bundle-size for this approach.
Vertical splitting means you have one app for one view, and separate e.g. by subdomain where login.app.com, news.app.com, editor.app.com each have their own app. DAZN works like this, for example.
There is a recommended setup, to boost code performance and bundle size. You also have the possibility to interactively configure the Single SPA entry point, with a playground. A bunch of tutorials and coding examples are available here.
Most interesting features:
Here is a Proof of Concept about utilization on the same single page application of multiple (separated) frontend application: https://github.com/Pragmatists/microfrontends
In that POC there is also an example of applications communication, performed by using global events, where data exchange is supported. Also other sharing mechanism are possible.
Working on legacy AngularJS projects, you will soon start to elaborate a migration strategy to a modern framework.
If you are thinking to switch to Angular, React or VueJS, there are different strategies you can follow, depending on both technical and business requirements.
There is an optimum way, that is writing from scratch the entire application. It can be very time-wasting and I am sure that your boss will not easily give you so many time to rewrite something that more or less works, w/o adding any customer value.
Angular’s Upgrade APIs represents a good compromise, that can be leveraged only if you are thinking to migrate to Angular.
The Micro Frontends strategy allow you to create the right abstraction between a specific application implementation, which is highly coupled with a framework, and its functionalities that should be exposed with the outside world. The community, overall, is going in that direction.
The last suggestion that I want to give you is: while you are migrating an application or you are adopting an hybrid approach, why don’t you encapsulate your components/services with Web Component standard? Next time that the framework will change, it will be more easy to perform an upgrade.
Did you like this article? Consider becoming a Patron!