[PatternFly] Strategies to convert AngularJS apps to React

Tue Aug 20 13:46:48 UTC 2019

Karel and Walden,

Thanks for the very helpful information.

When following the strategy that mixes React components in an AngularJS app
using react2angular, at the end of the migration process the AngularJS app
is replaced by a new React app, right? Have you had any issues with that?

Also, my AngularJS app doesn't use JavaScript modules. Isn't that an issue
when writing the React components?

On Tue, Aug 20, 2019 at 10:15 AM Walden Raines <wraines at redhat.com> wrote:

> 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
>>
>

-- 

Alexandre Kieling

Fuse Engineering

Red Hat <https://www.redhat.com/>

Remote, Brazil
<https://www.redhat.com/>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20190820/3c99c910/attachment.htm>