Is it possible to use Polaris React with PHP backend?

Highlighted
Tourist
5 0 1

Hi all,

I'm quite new to all the modern front-end development, all I'm used to is good old jQuery. For now, I use CDN-hosted Polaris CSS at my app.

But now I want to use Polaris React components, but I've found myself in a huge mess here. I was able to install Node.js on my development machine and play around a bit. I see how to use all that in the Node.js environment, but I'm totally confused about how to make it work with the backend.

For example, the simplest thing ever: let's say, I have several announcements in my DB, which I want to show to my app users as banners on the main page of my app. How I do it now: I query the DB on the PHP backend, then feed the results to the frontend (to the view), where I iterate through them (also with PHP, foreach) and display with simple HTML, like <div class="Polaris-Banner... etc.

But how can I feed this PHP array of messages to React, if all the React code is in JS, and runs on Node.js only? I've tried to make a bundle with Webpack, but it only displays what was predefined in the JS code, and no connection with PHP backend is possible.

I've read all the documentation, both on React and Polaris, and I've totally broken my mind, the solution seems to be non-existent :( Please, help.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
905 120 129

Hey @PersistentDev,

 

If you're using React, your PHP backend can act as an API.

 

Consider running through some React tutorials to solidify the frontend/backend concepts.


Here's a basic AJAX walkthrough: https://reactjs.org/docs/faq-ajax.html

0 Likes
Highlighted
Tourist
5 0 1

Hey @scottydont ,

Thanks for the reply!

 

Yeah, I've thought of that, but it means I'll have to restructure the whole app, which is a *huge* amount of work, which will take even longer since I'll have to familiarize myself with the new technology, which I can't afford now since feature updates are due.

 

So is it the only option?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
905 120 129

Alternatively, don't use React. If you'd still like to have the Polaris look, you can use the CSS classes (but you'll need to take care of the functionality yourself with JavaScript).

0 Likes
Highlighted
Tourist
5 0 1

Yeah, I already use Polaris CSS, as I mentioned in the start post. The problem is that not every component is usable with this approach, for example, the Datepicker: it's completely useless without JS code. Yeah, it's possible to program it from scratch, but once again, it's a hell lot of work, doesn't seem practical at all.

 

It would be really great if, for example, plugins for jQuery were available for such components.

1 Like
Highlighted
Shopify Staff
Shopify Staff
905 120 129

The problem is that not every component is usable with this approach

That's right. You'll need to write your own JS if you're not using React.

 

Yeah, it's possible to program it from scratch, but once again, it's a hell lot of work, doesn't seem practical at all.

That would be a lot of work. It seems like Polaris isn't a good fit for this project.

 

If you're eager to use Polaris, learning the React basics might be quicker than rebuilding the components with jQuery.

0 Likes
Highlighted
Tourist
5 0 1

If you're eager to use Polaris, learning the React basics might be quicker than rebuilding the components with jQuery.

Indeed, that's what I was thinking first. But, as I've already mentioned, it means that my whole backend will have to be completely rebuilt. Which is also neither quick nor practical.

 

Anyways, thank you for your answers.

0 Likes