[PatternFly] Strategies to convert AngularJS apps to React

[Karel Hala]

Hello,

this thread can potentionally be interesting for others as well. I would
propose incremental upgrade, you would take each page and replace parts of
screen with react components.

Hopefully you can mix React and AngularJs apps together - it's not ideal,
it's going to eat a lot of resources and it's not going to be efficient,
but it's the optimal way.

You can have multiple angular apps on screen and render them to different
DOM elements using bootstrap [1], similiar aproach can be achieved by
ReactDom render[2].

The biggest downfall would be data communication, we have faced some
similiar problem in ManageIq project
 * redux - not ideal for AngularJs and I am not sure if you can hook react
to already initiliazed redux (but you can give that a try)
 * Rx.js - this would probably be ideal and you can use Subject to work as
a message bus for data updates in React and Angular app

[1] https://docs.angularjs.org/api/ng/function/angular.bootstrap
[2] https://reactjs.org/docs/react-dom.html#render
[3] https://rxjs-dev.firebaseapp.com/guide/subject

On Mon, Aug 19, 2019 at 7:26 PM Alexandre Briani Kieling <
abrianik at redhat.com> wrote:

> Hi,
>
> I'm doing some research on strategies to convert AngularJS apps to React.
>
> My AngularJS app has the following characteristics:
>
>    - Based on AngularJS 1.7
>    - Uses Angular PatternFly components
>    - Doesn't use any modules system (the dependencies are accessed via
>    global variables)
>
> You can try ParcelJs[4], it's bundler that will not require any
configuration, but it's limited. Once you get used to all files bundled
together you can try webpack for further improvements.


> The ideal solution would allow me do run both apps at the same time so i
> don't miss any features during the process of incrementally converting each
> feature to React.
>
You can do that with Angular's bootstrap method and ReactDom render.


>
> What do you think of showing parts of the AngularJS app inside iframes in
> the React app?
>
Not really needed honestly, you'd have really hard time sending data from
parent frame to iframe. You can use postMessage[4], but that's going to be
a lot of code and hard to communicate.

[4] https://parceljs.org/
[5] https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage


>
> --
>
> Alexandre Kieling
>
> Fuse Engineering
>
> Red Hat <https://www.redhat.com/>
>
> Remote, Brazil
> <https://www.redhat.com/>
> _______________________________________________
> PatternFly mailing list
> PatternFly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>


-- 
Karel Hala
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20190820/3ae15305/attachment.htm>