[PatternFly] Strategies to convert AngularJS apps to React

Tue Aug 20 14:41:50 UTC 2019

Karel,

I noticed that react2angular doesn't provide a build that supports global
variables and it's not available at cdnjs.com.
I suppose I would need to fork the project and add support for it, right?

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

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

-- 

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/61a1ba0b/attachment.htm>