What is the best solution for React-based UI's?What is the best solution for React-based UI's?https://liferay.dev/en/c/message_boards/find_thread?p_l_id=119785333&threadId=1178363742024-03-29T05:46:31Z2024-03-29T05:46:31ZRE: What is the best solution for React-based UI's?Jack Bakkerhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1178619832019-11-22T18:03:11Z2019-11-22T18:03:11Zyeah, up to the frontend app to construct the so-called 'page' (view) built including using 'stuff' it might get through the api ; I think that is to be expected/preferred in decoupled frontend from backend Jack Bakker2019-11-22T18:03:11ZRE: What is the best solution for React-based UI's?Christoph Rabelhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1178616362019-11-22T17:29:50Z2019-11-22T17:29:50ZThe new headless APIs are certainly useful in that regard, but you also lose a lot of the features. So, it is a tradeoff. I probably won't use it to fetch "full pages" in the near future, but we already used it to fetch news from one system to show it on another one. They are certainly useful and I am really glad that that approach is possible now with the newer Liferay versions.Christoph Rabel2019-11-22T17:29:50ZRE: What is the best solution for React-based UI's?Jack Bakkerhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1178589002019-11-22T16:01:57Z2019-11-22T16:01:57ZI am exploring decoupled 'pure?' front-end pwa (lit-html based building for modern/legacy browsers using open-wc) where the front-end app interfaces with the new Liferay v7.2 GraphQL apis (<a href="https://liferay.dev/blogs/-/blogs/new-graphql-apis-in-liferay-7-2">https://liferay.dev/blogs/-/blogs/new-graphql-apis-in-liferay-7-2</a>). In js I am using <a href="https://github.com/gucheen/FetchQL">https://github.com/gucheen/FetchQL</a> because it has es module support which saves me much webpack/rollup plugin hassles. For a React front-end app: GraphQL using apollo client is likely a good choice. I currently am just kicking the tires of the new GraphQL support in Liferay, but so far it looks pretty darn 'cool' and should only get better.Jack Bakker2019-11-22T16:01:57ZRE: What is the best solution for React-based UI's?Christoph Rabelhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1178585592019-11-22T15:43:30Z2019-11-22T15:43:30ZWell, I am not sure about that. Portlets bring a nice set of features with them and it is a pretty sane approach to bundle a new component into a portlet, to take advantage of those features. On the other hand, from a developers point of view, you care about getting your component (be it React, Angular, vue, ...) into Liferay *without* the need to know a lot about it.<br />Honestly speaking, do you really care that a portlet provides your React module to Liferay instead of a "ReactComponentProvider" (a thing, I made up just now)?<br />That said, I have used a different approach before. We have our own webpack bundler, you can find a few things about it here.<br /><a href="https://liferay.dev/blogs/-/blogs/developing-javascript-frontends-with-webpack">https://liferay.dev/blogs/-/blogs/developing-javascript-frontends-with-webpack</a><br />But I am actually thinking about moving into the Liferay direction, I hear the fragment builder will support npm in future versions too. The big advantage of webpack is hot reload, but the bundler/loader of Liferay allows me to create microfrontends. And that's also very neat.Christoph Rabel2019-11-22T15:43:30ZRE: What is the best solution for React-based UI's?Olaf Kockhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1178596092019-11-22T15:32:26Z2019-11-22T15:32:26ZWithout being too much in the Frontend world myself: Isn't the portlet just a generic portlet that can be configured with <em>any</em> react app? As Liferay, in its root, combines different portlets to a common UI anyway, this doesn't seem too bad, especially when there's a generic portlet for all react apps. Yes, it could be in Fragments as well, but wouldn't that mix apps and content? <br />Note: this is neither positive nor negative, just an alternative way to look at it. I'm typically distancing myself from the frontend as much as I can - others are quicker to produce nice results. <br />This is also nitpicking of the "best solution" question, where I can't resist asking back: "Best <em>for what</em>?" In the end, the various solutions won't be too far away from each other.Olaf Kock2019-11-22T15:32:26ZRE: What is the best solution for React-based UI's?Matt Krusehttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1178578912019-11-22T14:53:35Z2019-11-22T14:53:35ZThis looks like it's still building a portlet that needs to be deployed to Liferay. Seems like over-kill for a front-end-only solution, doesn't it?I'm experimenting with including React into the theme, and then building React (or Vue) Components directly into a Fragment. This seems like a more sane approach than toolkits and generating portlets.Matt Kruse2019-11-22T14:53:35ZRE: What is the best solution for React-based UI's?Christoph Rabelhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1178451232019-11-21T20:14:19Z2019-11-21T20:14:19ZLiferay has some nice infrastructure for that. Basically, you create the react app, use a little Liferay called liferay-js-generator tool to "name & package" it and use it in Liferay. (Or you create it directly with the generator)<br />There was a presentation about that on Devcon a few days ago, the presentation explains the steps.<br /><a href="https://www.liferay.com/documents/231927853/238977089/D1_A_06+-+The+Frontend+Developer%27s+Guide+to+the+Galaxy+-+Rodolfo+Miranda+%26+Carlos+Lancha.pdf/df656248-3135-3075-60ff-561fffebc5bd?t=1574184372619">https://www.liferay.com/documents/231927853/238977089/D1_A_06+-+The+Frontend+Developer%27s+Guide+to+the+Galaxy+-+Rodolfo+Miranda+%26+Carlos+Lancha.pdf/df656248-3135-3075-60ff-561fffebc5bd?t=1574184372619</a><br />Here's the repository with the code:<br /><a href="https://github.com/carloslancha/spaceship-react">https://github.com/carloslancha/spaceship-react</a>Christoph Rabel2019-11-21T20:14:19ZWhat is the best solution for React-based UI's?Matt Krusehttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1178363732019-11-21T00:39:44Z2019-11-21T00:39:44ZLet's say I want to create a number of comp