[PatternFly] Strategies to convert AngularJS apps to React

Tue Aug 20 15:24:02 UTC 2019

Yes, sadly you'd have to fork it and work around it. I tried using unpkg.com,
but without any luck because this library relies on some new ES6+ goodies.

But, you should be able to include React components in Angular components
without the need of this libray, you'd just have to try and work with data
flow somehow between angular and React, as I pointed before Rx.js should
help you with that.

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

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

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