[PatternFly] Strategies to convert AngularJS apps to React

[Walden Raines]

Also worth mentioning are the various libraries that help with using react
in angular and vice-versa.  You can import angular 1 services, etc. into
react with ngimport [1], you can use react in angular with react2angular
[2] and you can use angular2react [3] to use angular components within
react.

You should definitely be able to accomplish what you desire without an
iframe.

We used an older, no longer supported library to use a react component
within our angular 1 application and it works great.

Cheers,
Walden

[1] https://github.com/bcherny/ngimport
[2] https://github.com/coatue-oss/react2angular
[3] https://github.com/coatue-oss/angular2react

On Tue, Aug 20, 2019 at 4:16 AM Karel Hala <khala at redhat.com> wrote:

> 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
> _______________________________________________
> PatternFly mailing list
> PatternFly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20190820/605e0953/attachment.htm>