<div dir="ltr"><div>Hello,</div><div><br></div><div>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.</div><div><br></div><div>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.</div><div><br></div><div>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].</div><div><br></div><div>The biggest downfall would be data communication, we have faced some similiar problem in ManageIq project</div><div> * 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)</div><div> * 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</div><div><br></div><div>[1] <a href="https://docs.angularjs.org/api/ng/function/angular.bootstrap" target="_blank">https://docs.angularjs.org/api/ng/function/angular.bootstrap</a></div><div>[2] <a href="https://reactjs.org/docs/react-dom.html#render" target="_blank">https://reactjs.org/docs/react-dom.html#render</a></div><div>[3] <a href="https://rxjs-dev.firebaseapp.com/guide/subject" target="_blank">https://rxjs-dev.firebaseapp.com/guide/subject</a></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Mon, Aug 19, 2019 at 7:26 PM Alexandre Briani Kieling <<a href="mailto:abrianik@redhat.com" target="_blank">abrianik@redhat.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div style="font-size:small">Hi,</div><div style="font-size:small"><br></div><div style="font-size:small">I'm doing some research on strategies to convert AngularJS apps to React.</div><div style="font-size:small"><br></div><div style="font-size:small">My AngularJS app has the following characteristics:</div><div style="font-size:small"><ul><li>Based on AngularJS 1.7</li><li>Uses Angular PatternFly components</li><li>Doesn't use any modules system (the dependencies are accessed via global variables)</li></ul></div></div></blockquote><div>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.</div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div style="font-size:small"><div>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.</div></div></div></blockquote><div>You can do that with Angular's bootstrap method and ReactDom render.</div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div style="font-size:small"><div><br></div><div>What do you think of showing parts of the AngularJS app inside iframes in the React app?</div></div></div></blockquote><div>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.</div><div><br></div><div>[4] <a href="https://parceljs.org/" target="_blank">https://parceljs.org/</a></div><div>[5] <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage</a></div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div><br></div>-- <br><div dir="ltr" class="m_2204419086704153462gmail-m_8083456530454991074gmail_signature"><div dir="ltr"><div><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><p style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-weight:bold;margin:0px;padding:0px;font-size:14px;text-transform:capitalize"><span>Alexandre</span> <span>Kieling</span><span style="text-transform:uppercase;color:rgb(170,170,170);margin:0px"></span></p><p style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-size:12px;margin:0px;text-transform:capitalize"><span>Fuse Engineering</span></p><p style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;margin:0px 0px 4px;font-size:12px"><a href="https://www.redhat.com/" style="color:rgb(0,136,206);margin:0px" target="_blank">Red Hat<span></span></a></p><div style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-size:medium;margin-bottom:4px"><span><p style="font-size:12px;margin:0px">Remote, Brazil</p></span></div><div style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-size:medium;margin-top:12px"><table border="0"><tbody><tr><td width="100px"><a href="https://www.redhat.com/" target="_blank"><img src="https://marketing-outfit-prod-images.s3-us-west-2.amazonaws.com/f5445ae0c9ddafd5b2f1836854d7416a/Logo-RedHat-Email.png" width="90" height="auto"></a></td></tr></tbody></table></div><table border="0"><tbody><tr></tr></tbody></table></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
_______________________________________________<br>
PatternFly mailing list<br>
<a href="mailto:PatternFly@redhat.com" target="_blank">PatternFly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman/listinfo/patternfly</a><br>
</blockquote></div><br clear="all"><div><br></div>-- <br><div dir="ltr" class="m_2204419086704153462gmail_signature"><div dir="ltr">Karel Hala</div></div></div>