<div dir="ltr"><div class="gmail_default" style="font-size:small">Karel,</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small">I noticed that react2angular doesn't provide a build that supports global variables and it's not available at <a href="http://cdnjs.com">cdnjs.com</a>.</div><div class="gmail_default" style="font-size:small">I suppose I would need to fork the project and add support for it, right?</div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Aug 20, 2019 at 10:59 AM Karel Hala <<a href="mailto:khala@redhat.com">khala@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">React2angular is great library to help you reach your goal!<div><br></div><div>As about react, you can easily do that by including CDN link and you are good to go [1].</div><div><br></div><div>[1] <a href="https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f" target="_blank">https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f</a></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Aug 20, 2019 at 3:47 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 class="gmail_default" style="font-size:small">Karel and Walden,</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small">Thanks for the very helpful information.</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small">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?</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small">Also, my AngularJS app doesn't use JavaScript modules. Isn't that an issue when writing the React components?</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small"><br></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Aug 20, 2019 at 10:15 AM Walden Raines <<a href="mailto:wraines@redhat.com" target="_blank">wraines@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">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.<div><br></div><div>You should definitely be able to accomplish what you desire without an iframe.</div><div><br></div><div>We used an older, no longer supported library to use a react component within our angular 1 application and it works great.</div><div><br></div><div>Cheers,<br>Walden<br><div><br></div><div>[1] <a href="https://github.com/bcherny/ngimport" target="_blank">https://github.com/bcherny/ngimport</a></div><div>[2] <a href="https://github.com/coatue-oss/react2angular" target="_blank">https://github.com/coatue-oss/react2angular</a></div><div>[3] <a href="https://github.com/coatue-oss/angular2react" target="_blank">https://github.com/coatue-oss/angular2react</a></div></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Aug 20, 2019 at 4:16 AM Karel Hala <<a href="mailto:khala@redhat.com" target="_blank">khala@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>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="gmail-m_-1812626781862378350gmail-m_-2759311197734070815gmail-m_-1071049184145568972gmail-m_1737604592388291724gmail-m_-921503822268853889m_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="gmail-m_-1812626781862378350gmail-m_-2759311197734070815gmail-m_-1071049184145568972gmail-m_1737604592388291724gmail-m_-921503822268853889m_2204419086704153462gmail_signature"><div dir="ltr">Karel Hala</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>
</blockquote></div><br clear="all"><div><br></div>-- <br><div dir="ltr" class="gmail-m_-1812626781862378350gmail-m_-2759311197734070815gmail-m_-1071049184145568972gmail_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>
</blockquote></div><br clear="all"><div><br></div>-- <br><div dir="ltr" class="gmail-m_-1812626781862378350gmail_signature"><div dir="ltr">Karel Hala</div></div>
</blockquote></div><br clear="all"><div><br></div>-- <br><div dir="ltr" class="gmail_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>