0

We are building several applications that will eventually be one front-end application. It is split up into several projects at the moment where each project is managed by its own scrum team.

The older applications were built on Angular 1, while the newer ones were built on React. The result is inconsistency in the look-and-feel, diversity among developers that use Angular and React, and lack of re-usable components between different frameworks (Table built in React cannot be used in Angular and vice-versa).

The decision of the higher-ups was to port React applications to Angular 1, which made a lot of React developers and even some Angular developers furious, knowing that React helps us produce better code and is easier to reason about than Angular 1. It is newer too, while Angular 1 would need a complete re-write anyway to Angular 2. However, React could be replaced by something newer in the future anyway and will be eventually old, too.

How could this situation be handled in general - where two or more javascript frameworks become dated and eventually replaced by something new while maintaining a consistent look-and-feel, and if possible, reusable components between different frameworks? Is it possible to run, as an example, Angular 1 and React on a single application?

  • What is your definition of a single application? Something like Salesforce.com may appear to the user as a single application, but it's probably not. – JeffO Jun 2 '16 at 12:06
  • Single application, like an eBanking website where there are functions for Accounts, Loans, Payments. Same look and feel across, shared navigation menu. Imagine Accounts and Loans built in Angular 1, Payments in React. – ailveen Jun 2 '16 at 17:39
  • You could do it and the user would never know. – JeffO Jun 9 '16 at 18:56
1

There is no clear-cut answer, only a number of options:

  1. Choose one particular framework / framework version and keep developing on that for the lifetime of the project.

In this case, that means sticking with angular 1 forever. It is not necessarily a bad thing. It is open source, standards-based, reliable and well documented, so essentially you can keep using it for decades even if you end up doing your own maintenance on the framework's code. The two downsides are that newer frameworks may be more productive / more powerful, and that it eventually becomes hard to attract and retain developers because you're using such dated technology.

  1. Allow multiple frameworks, but have common conventions for UI design and inter-framework communication.

You could for example standardize on a react table and use it from the angular codebase by wrapping it in an angular component. You can also unify the styling across the solutions. The upside is that you can integrate new technology, the downside is that you have quite a bit of overhead in ensuring everything looks the same and reuses the same components.

  1. Do a legacy/modern transition every X years

Retain your back-end services, but rebuild the front-end every few years on a newer technology. You allow the customer to switch to the "new layout" on login, and in the beginning it will have missing features, but what it has it may do better than the old UI. The upside is that every few years you get to start over, build it to modern standards and get rid of poorly designed features. The downside is that this rebuilding project is costly and while incomplete it means building every new feature twice (unless you can ask your users to ping-pong between legacy and new front-ends).

In all of these cases, a critical factor is that the technical choices must be made by technical people to achieve business goals set by the higher ups. A manager should not be making the call whether to standardize on angular 1 or react, just make the call that they wish to have a unified UI and set of development skills, and task the technical leads with making technical decisions that achieve that, which may include standardizing on angular 1. The decision only needs to escalate to management if the technical team does not manage to make a decision.

  • Thank you for the answer - it is just painful to accept. I was on the React team that now has to port back to Angular 1. I just wish the front-end has a micro-services framework/pattern that makes it easier to integrate React and Angular running on the same browser. I was leaning on your answer #2 but we couldn't find a solution to make that work across teams. – ailveen Jun 2 '16 at 8:53
1

I know this is an old post but I want to share my findings in case someone is looking for the same information.

As you can read in this article:

https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16

the road to integrate multiple js frameworks in a single page application is called micro frontends.

The metaframework suggested in the article is single-spa (https://single-spa.js.org/).

You should also take a look to html custom elements (in angular they are called "angular elements"). They are custom html tags that allow to load a micro application inside (angular, react and vue support them).

  • 1
    Very interesting, thanks for sharing this. We have learned to suffer this - we went back to AngularJs from React for a year since I asked the question! But after that and until now, we have all moved to a single Angular5 framework for everyone. It is still, very valuable, might even try it on my own time. – ailveen Oct 24 '18 at 12:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.