"React Now Looks Like PHP" They Said

Yeah, welcome to this presentation about React looks like PHP, they said. I'm very happy to actually present at React Summit, and I'm excited to share my learnings. Traditionally, I'm coming from the PHP community, adopting React since a couple of years.

My thought was really to bring the PHP and JavaScript community closer together. I want to say I don't want to hate about React Server Components or PHP or whatever framework. For me, it's really about sharing information, build cool stuff together. That was the motivation to make this call and this session.

And maybe you remember this slide or this visualization when next JS14 came out, there was quite a bit of a rant that React now is like PHP. And so that also made me interested because traditionally, I came from PHP, as I just said. Because it was very hilarious and funny. And actually, I looked up a couple of memes back then, for example, that one on the right, I like a lot. So React, def looking at next JS and actually it's like PHP. I don't know.

So I decided to actually make a presentation out of it and give a little bit of context of my experience in the past. Because when I started and actually I started in 1999 when I was, I don't know, 16, 17 years old, I went came into web development. Personally, I started with Perl back then. And soon after, I adopted PHP and literally, I wrote my first PHP server side code in 1999. And I want to actually show you a lot of code today to make this comparison, why people say React looks like PHP today. So I will show a code example from 1999 and show how modern PHP looks like with its symphony components and how actually the back end PHP code comes closer to the front end. Then I will show a traditional single page application and then show how the React framework actually is going towards the back end.

A little bit about myself. So my name is Lucas. I'm can be found on Twitter with Lucas Fisher. I'm the founder and run Netnode, a digital agency here in Switzerland. And I also founded NodeHive as a startup. NodeHive is a headless content management system. Check it out. It's very cool. And it's very much built for Next.js in the front end. So what we're going to build today in four different versions is a guestbook.

And maybe you remember the good old times. Maybe not. But this was very popular around 1999 to maybe 2003 or so. Every website had a guestbook. So there was no social media. There was not even a blogosphere or something like that. And so going onto a website was very boring. The only thing you could probably do is sign the guestbook on the website.

So what it is a simple form. And then you have a list of the guestbook entries on the website. And I will show how that's built in PHP as of 1999. So I prepared here four versions of the same application. And I quickly explain how that looks like. So I just go into the folder. And then I run the server. So when I open it, this is our wonderful 1999 guestbook. So you see here a listing and then the form. I fill out the form. Hello. I submit it. And then it says thank you. And I can go back. I only made a mock. So there is not really a database in the back. So we don't save it.

So how is that built using traditional PHP? So let's dive into the code. First of all, we have something like index PHP. And when you look at it, so we have the HTML. We have a little bit of CSS. And then we include the form, the upper part, and then also the listing.

Let's quickly open up the listing. If you go here, we basically on the server side, we load the data from the database. Then we iterate through it and list. And output basically the variable from that. So it looks very much React-like already. And so we actually output it. And then we also have the form.

So we go back the form at the top. So here we have the guestbook form. And this is simply a table. And then the interesting part is here. So we have the action. And here we have the guestbook save. So when you hit submit, obviously it sends the post HTTP request to the backend, to this guestbook save. And this one will then, in PHP, we have this post variable. By the way, this is not how you do it. It's very insecure code. But just in terms of a demo, then you just look up the variables from the post. And then you insert it to the database. So very much server side. Zero JavaScript. And since it's a super simple lightweight script, it's also very snappy and fast.

That's the 90-99 example. Let's go on how modern PHP looks like. So for that, I open it up. For this, I run a Drupal application. Drupal is a content management system. And it's actually Node-Hive. Our solution is built on top of that. So also here I do run.

So it's opening up. And here I have the guestbook. And again, you see in the upper part, the form and below the guestbook entry. Here I can also say, hello, nice website. I hit submit. And then you see it's immediately, reactively updating the guestbook entry. Also, I can hear, for example, search for John. And it's interactively updating it.

The interesting part about modern PHP is you don't write front-end code. But you write it in the backend. And the backend will deliver all the needed JavaScript out of the box. It's actually taken from Livewire in Laravel. And this one is using Drupal wire, which is built in a similar way like Livewire in Laravel. There is also a Symfony component called Live Components, which works exactly the same.

So let's quickly dive into that code. And this is much more complex and more advanced in terms of the PHP application. So Drupal provides a way to create custom modules. And I created that one. And I only show the interesting parts. First of all, we have a controller. The controller is basically just spinning up this page. And then we load here two components, two wire components. One is the form. And the other one is the guestbook listing. So if we look up the guestbook listing first, here we have a component. It's called, it's extended from wire component. And then I just close the boring stuff here. Or I just show the interesting part. The interesting part is actually here. There is a render function, much like React render, you could say, which then loads the template.

Quickly open up the template. Also, it's this one. And here you see, again, we iterate through the results and actually output the comments below. Also the form. So let's go back here to the controller. Then we have the form, the form component. Form component has to have a way to save it. So this is the save function and then the render function as well. And by the way, if I would say, very similar to React actually, so we have here the title and we have here the body. I save that and I refresh that. It's automatically set here. So these values are kind of binded in that sense. And the interesting part is now how does that work that it's reactive in the front-end, even though we are writing back-end code. And this is the magic of the wire component, which is using Alpine JS to deal with the front-end part. And there is, I mean, I won't explain how that works now, but this is just the way you can write in PHP reactive applications in a component-based way. And it's actually very fun to write developer experience is awesome. And also the user experience from the client perspective is also awesome. So PHP kind of grew also in that front-end part. Laravel is on the forefront on that. Also, there are tools from Drupal and also from the symphony ecosystem.

So that's the PHP 2024 example. So let's close that. Now, let's look at React 2017. And here I will only show the code. It's not a running example, but you know, obviously React was invented to build reach front-end interactions. And soon after, it's not only about single simple components, but actually full-blown single-page applications. So what do you actually do when you spin up a traditional React application is you have an app.js inside there, you import a couple of components. In that sense here, it's the form. And then you have the guestbook listing. Let's open up the guestbook listing again.

And that's the crucial part here. Since traditional React is front-end only, we have to pull in the data from the back-end. I mean, this is stuff you did in the past years all the way down. So we are using here Axios, calling the back-end API to actually load the entries. And then we iterate through the entries. Exactly the same as the form here again. We have author and message. And then we have the form up here. We have a handle submit function. This one is then posting that data to the back-end. So very nice, rich interactions. So there is no flickering reloading of a page. That was awesome in 2017. But the downside of it, you not only need the front-end, but you also need a back-end service. So here I just mimicked it with a small PHP library. So we have these two rounds. And then we have basically the implementation of loading stuff and saving a guestbook entry. So that means at least you have to maintain two code bases, the front-end and the back-end. Which then led into the idea of React server components.

And now let's look at this example. And for that, I open up again the example. So this is React 2024. And actually demo and a next application. And so the next application looks like this. Next.js. So again, we have the form at the top and the guestbook below. Then I can add a new comment. I'm also mocking the DB so there is no saving or true loading from a database. But it's redirecting to the Thank You page. And then I go back to the guestbook overview.

So how is the implementation done here? So here again, we have a global layout. Then we have the page loading again to components. And here are the components. This is the form. I will come back to the form in a second. This is the guestbook listing. And compared to the traditional React application, we now have the ability to load data on the server side. So here we can directly load data within that JavaScript or JSX component and directly run that. That's actually completely fresh and kind of a different model within the React community.

And this is exactly why people say, hey, this looks really much like PHP. Again, of the form, the interesting part here again is how is this post of the action actually triggered? How is that sent back to the back end? And that's when React server actions come in. So you import that one guestbook save. So let's open up that action. Action looks very simple. So we get the form data. We can basically take it out of the form data and save it to the database. And if we want to, we can write redirect to the thank you page, which then simply renders here as thank you. So you already see where I'm going to. I go back to the presentation.

So now if you put the PHP 99 code side by side with React 2024, you can pretty much say it's equal to db.php, which is handling the database abstraction can be the db.js on the app. The guestbook form is the guestbook form component. Guestbook overview is the guestbook itself. Saving the guestbook is the server action. And the index obviously is the page. Pretty crazy. It took 25 years to reinvent the wheel as we had 25 years ago. Pretty crazy. Obviously, it's not only just copying that model. There is much more to that component. I will come back to that in a second.

As a conclusion, and I already talked about it a little bit, PHP 1999 was just backhand. In my example, there is zero JavaScript. Why? Well, back then, there was not a lot of JavaScript. JavaScript was still in heavy development. ECMAScript 2 and 3 just came out. Browsers at that time was like Internet Explorer 5.5 and Netscape. So there was no modern way of doing JavaScript interactions. No JavaScript whatsoever. Today's world, obviously, we have modern browsers. We have lightweight JavaScript front-end frameworks, which integrate nice with these approaches of Livewire in Laravel, or DrupalWire in Drupal, or also the hyped topic of HTMX is exactly that concept. Whereas React single page application is really front-end driven. So you mainly build your app on the front-end. And obviously the React community said, hey, we actually have to get that benefits from the back-end. And let's adopt these good old concepts, basically, and integrate it in the React ecosystem. And I'm very excited about that as a PHP developer, because for me it now feels very natural to use React and have all the benefits from back-end development, as well as the front-end benefits.

Obviously the benefits from server-side rendering is in total, you could say it's a much simpler architecture. Why? Well, in traditional single page applications, you have the front-end application, then you need to build all the APIs, and you actually maintain two different applications. Also data fetching, security, caching, performance. There are many aspects where you benefit a lot when you can solve the complexity of your application in the back-end.

I won't go into much detail here. But of course, if you go with React and React Server components, you have more benefits than just going with raw PHP, or even with modern PHP frameworks. For example, you have isomorphic rendering, what it means you only have one language for front-end and back-end. You literally use the same component. You can use it on the back-end, render it in the back-end, or you can also use it in the front-end. That's not possible with PHP at all. And because React is or was a front-end framework, we can use all the client-side browser features like Canvas, WebGL. Obviously, this is not possible when you go with a PHP application.

And yeah, it's kind of a different approach. Also, there is a rich NPM ecosystem in PHP. You also have the Composer ecosystem where you also have tens of thousands of libraries. Obviously, we all love and like the NPM ecosystem and all its libraries, and it's easy to use developer experience. So when you compare that, it's not only about the architecture, it's also about programming languages and also the ecosystem that come with the solution.

Just our approach as an agency and also from the NodeHive way, obviously your application is not a solitary architecture. It's typically part of a wider digital ecosystem. And our approach and our thinking is, so let's say we have a Next application or we have multiple Next applications here, and we do a lot of headless, content management, and we do a lot of headless, content management applications and websites. And now since we have a backend on the frontend, you could say we can make this interaction between the headless CMS and the actual frontend website much simpler and more secure. As well as if needed, we can directly from the frontend access a microservice which is not even part of the headless core platform. So that means the frontend application has more flexibility to pull in data from various data sources. I'm not saying that this is the perfect way to architect the site, but just in general, in terms of possibilities, how you do that. And that's very, very powerful.

So you don't need to build your own API layer between the frontend application and several microservices in the back. And with this architecture, we have a big success. It simplifies projects and makes it much more, yeah, faster to develop and much more feature-rich and easy to integrate. Yeah, with that said, again, I want to build awesome stuff and I'm excited for React Summit. I will also be there. Let's share about JavaScript and React and PHP and Drupal. I'm there and I'm very excited to see what you think. And I hope next release of Next.js, we can say, hey, we actually learned a lot from PHP. And in the next Drupal release, we can say, hey, we learned a lot of React. Thank you very much for your interest. And yeah, I'm around. Come to me and ask questions. See you next time. Bye.