 So hi everyone, my name is Djagur and I'm going to present today Palace WordPress we've react first of all feel free to Interrupt me at any time if you don't understand something I say Yeah, feel free just raise your hand throw something here It's fine. So So first of all about me The boring section that each presentation has so that's me that's a That cute kid with some with a lollipop addiction I have some experience with WordPress. I'm not React specialists I've done like one or two projects with it. I think it's really cool. It's really promising a lot of possibilities and Using both really like it's it's something that I feel it's not being explored as it should by the WordPress community And there's a lot of potential there too. I'm a freelancer and in this presentation, there'll be some code available and It's in my github repo and I'll post it all on my Twitter Everywhere I can put it. It's all public. So feel free to if you have any question. You can also send me an email Write me on Twitter or something like that. It's fine So the agenda for this talk is so first of all I'm going to try to explain what is what's hell is WordPress if you guys are not usually familiar with this term and then The advantages of this architecture of pusing Hellers WordPress and and react Then the architecture itself One of the possible ones that there are many ways of doing the same thing I'm going to do in this presentation This is just one of the approach is not the best one. It's just one of them I'm going to show you guys a sample application very simple Quick and dirty code But it's going to show important concept. I think that's an important part and The last part of the presentation is when things get a little bit crazy it's going to show it's possible to do WordPress without WordPress and And what are the possibilities in what? using using this specific architecture of Hellers WordPress and react So first of all, what is the hellers WordPress? So if you analyze the classic model of WordPress That's how we do it. That's how both most WordPress instances are used So we we have where's my pointer here. We have third-party systems like Akismet Talking to WordPress to our that's our WordPress box. We have an admin or a content person constantly injecting content in the WordPress box We have our template system responsible for presenting the content to to these users and The users interact they do the request they get back their nice HTML from from a WordPress box here This instance can be like, I don't know whether information WordPress can consume a lot of this too So when you use this box here You get a lot of nice stuff for free which is All these blocks here really which makes WordPress not only something to blog but CMS like a complete CMS in that sense it they can build anything upon it like on it So you have all these blocks that we love some of these blocks more than others and If I had to pick two of these blocks that I had Hardest time with not saying that they're bad implemented or anything like that but if I had to pick two of them that Gave me a hard time And it was hard to Give me some sort of limitation I won't tell it now. I want to see a show of hands for that so you guys have to pick two Think about it and Would you pick admin interface? No, okay the crown No Db abstraction. I have a hard time with those queries sometimes, but okay Future actions this one everyone loves like I don't believe anyone would have a problem that Template system There it is. Yes. Yes. Me too. So that's our first one The fact that you can create Cred create Retrieve update delete. Yeah that part of WordPress. It's fine, too. I don't know but anyone with that part No, go caching Two three Internet I Thank you It's hard to do to say it for me, but not to deal with it like it's it's pretty simple for me But for anyone here probably that no cool HTTP abstraction Never had to use it that much, but it's there cool Multicite Nope Rest API And routing I'm on that one That's my second one and I think that using a headless WordPress With react you're kind of removing this block from your build and using something that You're more familiar with or it's something more kind of modern So that's kind of the idea of this talk So that's the classic model again and So what we're going to do here We're going to remove the template system. It spins and goes up. Yes, and then We're going to replace it with the rest API That's our first step and then Reacts falls from the sky So now we have a react in the middle of these interactions of the clients in the site And our react site will be consuming the rest API For the people they're not really used to the rest API It's cool, there's a lot of cool stuff you can do with it and it's been Enable and default on all WordPress since version I think 4.6 is it 4.6? I'll have this information later. But anyway, it's there for you. It's easy to use It's not that complicated and Another thing is that this architecture here that using a headless WordPress, it's not something really new and The react part is not really necessary here. It could be vanilla JS. It could be Angular it could be view. It can be anything you can have any sort of HTML and JavaScript being this layer here and Consuming the rest API so all the information you can find in the admin usually the the rest API Well, you're just going to it's going to be there with all the information So and if it's not there you can also create your own rest endpoints Okay, the advantage of this architecture here. Let's go through the list of it Think the first one is separation of concerns By using this guy here, you're kind of making sure that The view logic only goes here And why this is important I think when we work on large WordPress There is usually this confusion of Code that shouldn't be in the in the template part that is very like Business logic shouldn't leave there should list somewhere else either in the plug-in or they're in the class or something like that Something more elegant than that you want to it's a good practice to not Leave heavy logic and the in the view layer in this guy here So by using this by using these architecture you kind of forcing your your team or yourself that's the biggest threat of Writing Core business logic in the view part so and at the same time making sure that your rest API Is only exposing important data To the to this layer here to the view layer the react layer Another advantage of using this architecture here is that now that you separate it into parts your WordPress your CMS You can easily replace either this part here your view layer or You can replace WordPress Not that we want to do it. We all love WordPress and we're going to use forever, but It will allow you to do it more easily if you follow this This architecture so and this is what this one is major too is that by using react Or any other this modern frameworks. It's really easy to reuse the visual components and And make them dynamic. It's really easy to do this because you're close to it You're close to JavaScript or close to HTML So and it's very easy these comp. There's this frameworks to your me for that and You have best of both worlds, so you have a awesome CMS the best one and you have a cool new technology and You can play both speed so that's major too If you do it right, it's not it's not the server bullet, but by using react you're not you're kind of Removing a lot of the a lot of the code that would slow you down here. So usually it's not at all the time, but You can have it especially and that's my next point using this architecture you can Move all this to a static website Using react to you and that's that's the end of the presentation going to show how And that's the word press without word press You can make your word press Site will now local and just expose your build the build of your site or only the static files of your site And the other one is this is really crazy. It's like you can have you can use reactive react native, which is you can build native apps using react and word press For mobile just sure No No, no, no there there are other articles, but that's that's why I say it's not being really explored. I think I didn't see any solution like a Package that comes with all that's that's what I'm asking for right easy way to Exactly you can use my code. I call this on github. You can use it as starter or whatever I had stumbled upon Okay Like there are some examples of the wild I think even before the rest API was built into wordpress when it was still a plugin Yeah That you could find You've done some pretty major websites Send me I can post on my Twitter and then yeah, but yeah, the idea is not new but You don't see in a lot of places so Okay So first one is how to Make wordpress headless. It doesn't take much. It doesn't need a plugin. You just need to Have your theme and that's how your theme will look like So your styles CSS will look like this CSS in that layer and you need Unfortunately, you need this index dot PHP file to be empty. That's it Otherwise they will throw in that like some sort of warning or something like that But this itself and maybe the 404 dot PHP as well, but that's it. That's how you need Okay, so I'm going to show How it looks headless Wordpress it looks like this It's empty. It's API dot headless dot local host. It's running on my local right now, but the admin is there You have the same experience and everything that I enter here will be available in the rest API so So I hit my The red that's for posts. Yes. So if I hit the slash posts and point I'm going to get all this information about my post Any JavaScript I can consume this and present to the user. Oh, by the way, the version is since the rest API has been available since version 4.7 and We are in version 496 right now So it's been it's been active and part of WordPress core for quite a like two three years, maybe All right, and now to the application We are going to go through Where am I? It's very simple and has no CSS in it. So I'm sorry if there's any Front-end people or designers here So if you go to post dot headless dot local host You're going to see this. This is like the my home If you go to home you go here you go to blog Nothing happens Okay, there. Sorry. Let's do it again We go home and then you go to the log cool Remember the three posts you saw there. They're right here, by the way, they're being listed from From the rest API, it's consuming the rest API and if I click on any of these posts, I'm going to show the post content that's it and this is all HTML and JavaScript It's not doing a trip to the I mean it is in the sense that it's getting the rest API there, but It's all react and it's it's fast. It feels fast, right? Oh Back to the presentation There it is That's it the way I built it. There are other ways to do it By the way, one thing I forgot to mention is that you can also use react Inside your WordPress box in the single way Not doing this in this particular case It gets tricky in this case too. I Hope I can show you guys why But this way is a more detached way and you can use one domain just to hold your Your admin and your data and another one to to be your oops, sorry to For your front-end Remember the the sample application. I just showed you guys. I use create react app for it, which is a Very nice solution. I'm as I said before not specialist But with this Tool here You can easily create your react projects. It's very good for learning even for Production you can migrate from this more learning approach to to production. There are ways to do it using this tool It's great. I recommend you guys have a look in it That's how the code looks now Remember you said you saw this guy here So these are the react components we have we have an app component kind of driving everything We have our home component our blog component and a post component oops going back It's too small, right? Anyway basically The react component has some code to fetch the information from the rest API and that's this chunk of code here and He also Does the Presentation the markup part which is this part here and the routing which is kind of confusing, but you get used to it So the WordPress the rest API URL is here the one that grabs all the all the posts And it just goes through all of the posts possible. So it just goes through them again. It epaginates them. You cannot Hit the rest hand point and just get all the posts at once There is a kind of a limit to it. So you have to get together. I think a hundred posts at a time or something like that So that's what I'm doing here. It's it's simple logic. I'm using this This JavaScript framework call Axios to retrieve it, but you could use vanilla JavaScript for that It's not it is not bad complicated And that's it. Oh One more thing when you retrieve code when you retrieve HTML through This methods here. You cannot just Display them using react because we react react will escape it We'll try to escape your Your HTML tags and the word press you can you can write your posts using markup So one of the things you're going to see here, and that's my post component is that I had to add this That's reactive fold Dangerly dangerously set element inner HTML Because this information is coming from your server and it has HTML markup in it And it's a risk to just allow your your react display HTML so by by coding this you're seeing you you're assuming the risk of of rendering Strangest HTML so that's that's the only way to do it by the way if you just use this information this post body here is Going to escape your HTML markup, and it's going to show actually show your your HTML instead of just bolding your tags For example, okay, so to the next sample application We just we're just consuming data was anyone raising hands question. No cool We we're just retrieving Data from WordPress We're not If you check at any website you're going you can do use the rest API even if you're not logged in You can retrieve posts for example But for some data you have to be logged in in order to make the rest calls There are some default endpoints That if you try to hit like this one, which retrieves the settings of your website And this is this is kind of sensitive information don't want People to go to a website and see that so what they made it? You have to be authorized to make this rest call here and How can you do it using react so? We have to be logged in but at the same time and we are in a different domain And that's when things get a little bit hard if you're just consuming is fine. There's not much difficulty but whenever you will have to make this Authorized calls. That's when things start to get a little bit crazier. So Do the WordPress way you using your cookie and announce Which is a special string, I think our number That that's in your HTML code and make sure that all your requests to WordPress are being are coming from the right place The proper place and this has been used by plugins and themes. That's how it is for If you're under the same domain Under the same WordPress instance But in this case, we're doing requests that are coming through another domain. It's not even the same WordPress box So, how can we do it and then they're a bunch so they're this possibilities One of them is off this one. I think it's one of the hardest ones and never really. Yeah But I think it's probably the most powerful to I feel I don't know. So there's a plug-in. So these are all Plug-in store and The one I use for this one I think one of the most elegance and kind of easier to start using is this one here. You can also use basic authentication I think there was a plug-in for that too that allows your application to make authorize calls to another WordPress box in our domain basic authentication will allow it to do it, but JSON web tokens JWT felt like more modern and more secure Than using basic authentication. These two are kind of safe Easier to use so I just use does a guy here There is a plug-in for WordPress that will help you make Authorized REST API calls from other domains. So how it works Is that for example, we have This guy here, that's our react under for example post Where's Tina? We have this guy here post dot headless dot local host making calls. Oops go back To the WordPress box So first thing we'll try to get a token from it and this guy here has a plug-in installed and active and everything It's working fine here First thing it's that this guy will request a token from WordPress with the username and the password of a valid WordPress user then WordPress is going to answer with a token which is a string very long one and It's going to give back to the user slash react So the user is going to store it. You can be either in a cookie or using the local storage API It's going to store this token here and all the calls that this user has to be authorized authenticated, sorry this user will have to also include this in the In the header of the calls, which is a which is a header that looks like this so That's the key and the value is like this the man of this guy here. That's a token So for every call after this the user has to send this token to the server and the server slash the plug-in We'll see this token is valid or not and give the information back if the user is authorized or not No, it's all so react is only in the client and in this case Yeah, I'm not rendering anything on server side from react. Yeah, so this is just pure HTML JS running on the client How long is that there? I don't know. I think you can configure all this in the plug-in the plug-in is very It's very Yes, yes, you're always sending this token. I think there are ways of even cycling this tokens to make sure they're always Yeah Right, but not in this case. This case is the client that has to hold the the token Yeah, exactly Actually, yeah So, okay So now to the login application. I'm going to show you how it looks like Have to run a little bit So now we added It's in a different domain again, and we added the possibility of entering your username and password and having some very very basic admin here and this blog so my user and password admin admin and then I'm logged in and Oops, I have to do on the build of this just a second building building building it again, cool Done So that's that's where it is. Okay, that's it again user my password I'm now logged in and I can log out if I want and it shows the title of my website and I can change it from here I'm going to change to blah headless blah make sense Title updated and if I go to my to the back end I'm going to see this The setting will be changed there. There it is. Well, I just changed for another domain the The name the title of my of my website cool Any any piece of code here so that the code here is kind of quite simple What I show before is just sending the token getting setting the token on the cookie when you log in and When you want to retrieve your settings you get that token and you include in the headers of your call And you set in the state of your of your react component See if I'm missing anything here, okay Okay, the next step is WordPress without WordPress, so if we're using this idea of You know just consuming data from the rest end point and It goes back by case. It's not the the scenario won't apply to all possible sites on earth, but You can make your WordPress site static as well by using this and that's when this Cool tool called react static comes in and that's not the only tool that will do it by the way I think it's one of the easiest ones again There's another one called Gatsby and there's another one called next JS that will kind of do the same thing of Getting all this information and making them available as static websites So you don't have to hit the server ever again. It's like you just have to hit the server to get It's another JS. That's it and Jason No dynamic languages Cool, so the only difference I'm just going to redo the first example, which is a simple blog But now without WordPress So I'm going to show how it looks like So this tile comes with react with the tool but The only thing I had to do was to configure the The endpoints so the same thing here pretty fast and What I'm going to do to kind of prove that this can run without WordPress I'm going to break my WordPress Let's see if I can find it here Do like this try to It's broken it's broken But still running still there Cool The only thing that I had to add On the puzzle was this guy here, which kind of retrieves when you're building the site Your static site you have to provide what information has to be available for your react components And you're just doing the same thing. You're just hitting the rest API and this time you're storing This things and Jason and That's how the components that's react this part this part is kind of framework specific anyway kind of running out and stuff you can do With these ideas, I think it's very basic. There's a lot to Take you guys can do with that One of the things that you can do to fully extend this idea is to extend the rest API You can create your own endpoints. It's not that hard and you can create a lot of cool stuff with it Play with user permissions making sure that only the right users will get the right data Custom posts custom fields custom text on these ACFs Cmb to whatever you want to use to extend The data in your WordPress go for it Automate your build process for a static sites you can mix something that whenever you create a new post will do will rebuild your static site for example Automatically, so you don't need to and push to your server and These are all the possibilities you have it like there. There's so many purposefully like Didn't get them all here and I think that's so Thank you And if you guys have any questions Yeah Now you can just use JavaScript for a lot of stuff. Sorry, I'm repeating a question What does do with the WordPress plug-in? Ecosystem in in what way it can impact it. I think a lot of stuff they used to be WordPress plugins before they can be done in JS now Absolutely, absolutely. Yes. Yes Yeah, yeah And that's not the same thing like there are a lot of react components as well But they're not as easy to install as WordPress plug-in, right? Not easy to integrate with your project and stuff like that Yeah Yeah, there was there was a Curve there. It's not it's not for the idea. There's architecture is not for the For the user user like, yeah Yes Is it something that you can just shop for stuff it's like they're buying it. Absolutely. Yes I know there are a bunch of disadvantages. I forgot to mention them This is more complex. You have to instead of maintain one code base. You have to maintain two code bases now It's a trade-off. It's not going to solve all the problems in the world, but Oftentimes I had to kind of think about this architecture That would be so much nicer to build this way and I have to stick with the template system But it's something to think about it's not going to WordPress is never shifting this way completely. It's just something to know about Maybe I actually yeah To true yeah Oh cool Yeah If you go to my Twitter You can find my github account Yeah Yeah, yeah If it's available if the code is available everything will be available make sure everything is available the code the presentation That's it. That's all it needs to be able. Okay any other question No, the question is if I need to use different subdomains for this Not necessarily you can have this similar kind of architecture under the same domain. It gets a little bit trickier You kind of need an folder in your WordPress root for example It's a little bit tricky Because you have to host your HTML your react files somewhere That is not your template Realm, you know because this gets routed in a weird way you can do it to you can actually use react Using the template system at the same time You can do it, but you're still kind of constrained by the template Logic there. I did so the question is if I can explain how React static worked I had to run a command to According to the lot to the To this guy here it would retrieve my object this commander build command would get all this information and Store them in the form of JSON files for example So and they all went to my local storage and I just served this part and I killed WordPress completely So to make sure that only the only thing that I think you guys didn't really notice the images are still been served by WordPress, but there are ways around it. You can like really really improve this part here and they can show you Like the necessary stuff is available is available offline this part you can improve a lot This is really really really a simple version of what what can be done Angler View vanilla JS jQuery Palmer. Oh the question was what what other frameworks can be used in set of react? Anything JavaScript anything that has JavaScript and kind of facilitates building your building this dynamic and Modular interfaces I like react because it's cool all the cool kids are doing it, but it could be Yes The rest API It's what powers slides.com But he was then using WordPress to put in you know here's the head title of my slide content on my slide Forcing it into this beautiful JavaScript library that made really nice responsive slideshows Another reason to use react for me was that by using react the the effort to make a static site Was really but it was more effort because already I created my first the login one which was based on create react app and From that code from a lot of the logic that was there I moved that just like some of the components there to to static react and And it was easy It was all static in the end. So I don't know if Angler will have similar tools Like this one, but and also the how easy it is to move this to mobile because of reactionative So we can the possibilities are endless We've react with other frameworks to but like at least these ones I can see clearly with react Yes, yes, so that's one of the question is if if In the build process of the static site if it has to rebuild everything and the answer is yes, unfortunately, but Because this is just JavaScript, right? You can make it in a way that you can Do it instead of doing from scratch you just improve like you just do incremental. Yes You can do whatever you want here, but if your site is small enough Like don't bother just review anything But you can save a lot of time a lot of builds time by doing incrementally Questions to know cool. Thanks guys