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 <[email protected]> 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 < > [email protected]> 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 >> [email protected] >> https://www.redhat.com/mailman/listinfo/patternfly >> > > > -- > Karel Hala > _______________________________________________ > PatternFly mailing list > [email protected] > https://www.redhat.com/mailman/listinfo/patternfly >
_______________________________________________ PatternFly mailing list [email protected] https://www.redhat.com/mailman/listinfo/patternfly
