[PatternFly] Strategies to convert AngularJS apps to React

[Karel Hala]

React2angular is great library to help you reach your goal!

As about react, you can easily do that by including CDN link and you are
good to go [1].

[1]
https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f

On Tue, Aug 20, 2019 at 3:47 PM Alexandre Briani Kieling <
abrianik at redhat.com> wrote:

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


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