 It's a time for our class lecture. Our speaker is coming from Macedonia, that is Mr. Kočkovski, right? And he has a lot of experience in the world press area, maybe 10 years, maybe more. And actually he is one of the biggest supporters of the world press community in Macedonia. And he is here to tell us, to explain to us how to make a website with React and with World Press. Hi. So as he said, my name is Nitko Kočkovski and I come from Skopje, Macedonia. I'm a WordPress developer since 2010. Earlier this year I founded Web Pigment, which is a WordPress agency. I also have built a lot of WooCommerce plugins that are already up to date on the WordPress plugin repository. And I love to visit WordCamps and travel in the process. I'm one of the organizers of the WordCamps Skopje, which happened for the first time this year. And that's it. So before we start, I would like to tell you what are we going to talk about today. So first we're going to start with what is React. Then we'll explain what does it mean for a website to run on React. And then how we can implement React with the WordPress API. Or if you think that this is not a good talk for you, you can go and visit Sergey in the Hall 14. And he's talking about making WordPress better. So before we start, I would like to tell you a story when I was a kid. And the first time I watched Flintstones, I think everyone here knows what Flintstones is, right? So the first time I watched Flintstones, I went to my mother and asked her when she was a kid, will she rot on stone? She laughed really hard. And because she also graduated in the technical and informatical faculty in Macedonia, she said that maybe one day for that trust, you'll understand that I kind of rot on stone. But that was Bricks, which they built something like this. So they were coding in something like this. So the reason why I'm telling you this story is because a lot of people when they hear React or Angular or any front-end user interface framework, they're like, I'll just give it two days and something new will come up and work that. So yeah, unfortunately, things are like that in our world. But you have to improve yourself and always learn new things that you already know. So let's see what is React.js. React.js is a framework built by Facebook. And it's a JavaScript library for building user interfaces, right? So what does it mean for a WordPress website to be run on React? That means that everything has to be best built. So whatever you build, you'll have to recompel the whole JavaScript and then reupload it on the server. Meanwhile, you also have to build that into the WordPress backend somehow so you can retrieve that data through the JavaScript, et cetera. So it's not so standard way of building a WordPress thing as we are doing now. So today I'm going to talk about how I built my company website and how it all started. So it all started when there was rumors about building the Gutenberg on React. So what I did is I purchased a few tutorials about using React and React. And I went through them all and I was like, okay, now I'm React.js developer. So after those tutorials, because I already had an experience with the WordPress API, I found a way how to connect them and how to make my website run on React using the WordPresses in admin area. How many of you guys built a React website? So, okay, how many of you used the custom backend area for it? Because I have a lot of people that when I showed my website to them, they were like, oh, this is smart. I actually can use the WordPress API to build it as a backend instead of building a custom backend solution for my client. So the approach that we wanted to do, because the reason why we built this website is to attract more developers than clients. So we wanted to extend the WordPress functionality because we could have built this into a WordPress team, which will have only the index PHP file inside and then use it as a React file. But instead of that, we created, we built the React file and then we put it all that into one index HTML file in a separate domain and a separate domain for retrieving data. So while in the WordPress, we've used advanced custom fields flexible boards and retrieving them to the WordPress API so we can have each section be rendered separately into the JavaScript, into the React. We also reduced a lot of the standard API response field so we removed all the data that we don't need. As you can see on the right, that's a standard WordPress API response which has a lot of fields. And instead of that, we just added to the things that we need. And as you can see, we added one extra field, which is a page builder that contains elements. So each of those elements has their own React class that are being called dynamically based on the page that you're opening. How we configured it, because we wanted to change the structure totally. So we configured it in a way that we had a domain for assets which stores the images. And I'm not sure, I think I'm sure that you already know but there is an option for you to disable the monthly organized upload media in the WordPress which we did that. That way we reduced the URL string for the image and we put that on a separate domain named Asset which then the pet of the asset was under WP content slash upload. So when you see an image from our website, it has like assets.repigment.com slash and the image name. We did something similar for the API requests. So the API requests are info.wpgm slash and then we have the Slack. It doesn't matter if it's a page or a post. So we did the HTT access masking of the domain. So each type of some request is made on the info subdomain. We automatically then append slash WP minus JSON slash VP slash version two and then we add a page or post on what the actual Slack is. And then we just add a question mark Slack equal and the request itself with the Slack in the URL. And then as I said before, we've built one index HTML file that we put into the www subdomain name and everything goes today. So the way that we implemented it is that we created all flexible content blocks which for each section we created a separate flexible block and then we made a connector class between the React and the WordPress API response so we can process the layout. What that means is that we have for example a hero home section and we have a JavaScript React hero home class. So as you can see on this response, for example the first one with the three dots under the page builder has a key which is the page layout and based on that page layout we have mapped a specific React class that's going to render that layout. And of course we've built all the elements and that looks something like this. So we have project here, content area, image, content area, image, content area because the images have their own section on our page so that's why we went with that approach. The optimization we really focused on this part. So instead of simple images we added a picture object, HTML object which contained two sources. One was the GPH or the PNG and the other was WebP image but unfortunately not all browsers support WebP. So the ones like Chrome and Safari I think but Safari only on a web or on an app top or Mac they really supported there. So we displayed those images based on our CDN because the Jetpack CDN doesn't support WebP yet. And while the normal GPX or PNGs were going through the Jetpack CDN because they offered an option to reduce the image size based on the query stream parameter. So for example if you add like with people 300 pixels no matter how big the image is it's going to provide you with an image that's scaled to 300 pixels width and hit automatic. So that's the first step we did. Then we cut off all the classes and the IDs and we used like each section had its own alphabet letter first and then we had... they all had like two characters in the stream in the class name. So let's say AA means that it's from the hero home page section and A means that it's the first element inside. The second A means that it's the first element inside. With this we reduced the script by 200 kilobytes which is a lot because the whole page the whole JavaScript part was like without basic compression was 1.2 megabytes and now it's only 1 megabyte. And of course then we used CDN and we used CDN for everything including for the WWW subdomain so all of that goes through CDN. And I'm going to tell you something that happened to me like two weeks ago in our Macedonian programmers group on Facebook someone asked about how to... does someone have an example of headless work application because she wanted to start learning about it and how she can make that. And I provided her with my website URL and told her like this is something like that you can see how it's built let me know if you have any questions etc. And she replied if this is what you call headless application or single page application or progressive web application then I don't know what you're talking about because the time load of the page is 50 seconds and I'm like that's not possible but the CDN was down so she wasn't able to even see the page because they had some trouble and that's how I made a fool out of myself before checking even the website that is active at the moment. So besides all of that we optimized the images for different devices so we have on the home page like a real browser slider so it has like a screenshot from iMac and it has inside a screenshot of the browser with the URL inside so you can literally use the browser navigation arrows to slide through the slider with the effect of typing into the URL box on the browser but if you open that from a desktop computer you will see the iMac if you open that from a tablet you will see a tablet if you open it from a phone you will see a phone and images inside have their own versions of the showcase so for example if you open it on mobile you will see a screenshot from the website from a mobile if you open it from tablet etc. and as I mentioned before we removed all of the unnecessary data from the JSON response the challenge with this implementation was that in order for React to start working the file has to be loaded and we have a loading animation on the website which we have to move the CSS and the animation itself into the index HTML file so that way when you land on the page you can literally see the loader while the JavaScript is being rendered and the request is being made to the WordPress API so we can retrieve the page content that you landed on then another thing that we have is we have two phones on the website which is contact and careers and we have to add the security announcement on them and the problem was that if you go through a CDN and the CDN is set up to never expire unless we manually do so the problem was that people are going to get an invalid phone error messages so for these cases we added like JavaScript current timestamp current timestamp into the request of the API to retrieve the data so that way we can always get a new notice each time we open the page and another issue that we had was for the CEO, because not all of the web crawlers are supporting this kind of supporting React like for example React is a Facebook tool but their Facebook debugger here doesn't use JavaScript so you cannot get data from Facebook so if you share our website through Facebook you will see a data but you will see a different domain put it there, different subdomain which is put it there to just provide to provide the crawlers with CEO data and the end result is this but keep it in mind that this is the home page which we have a lot of images there and when you try to open any other page like a blog post or a project the load time came down to 250ms which half of the time is the browser trying to render the React doble so that's all I had to say anyone has questions? Thanks for sharing information I have a question what is your suggestion where to start with Lordy React and which tutorials to use and start point to make this kind of websites? I use the free tutorial and then I downloaded an example and I just extended that example into the application that I needed for my needs so I suggest you go through some tutorial based on the examples try and extend that for your needs Thank you for the insightful talk I want to ask you, do you, for optimization purposes do you load all the components of the React app and do you have it all loaded or you use kind of tree shaking as they call it so you dynamically load only the components that were returned from the WordPress API Well because this is fully dynamic it loads all of the components at the beginning but because it's a more of a show of websites so we have 6 or 7 different sections so we are loading all of them but I suggest you control for bigger application so that's the part I forgot to say about so if you want to build a bigger application with this kind of approach just make sure that you double the time that you thought that you were going to spend for it because there are no plugins here, you cannot just activate the plugin the sharing buttons will show up on the React app so you have to do that manually which will take a lot of time Hello, would you say that you sacrifice CO for performance in this case? because once we released the website we received like 45 applications for work which in these days especially in the size of Macedonia it's huge I see and why React in your case? Well because Gutenberg is becoming part of the WordPress core and I wanted to learn it in order for me to know how to build better and more complex blocks using the Gutenberg editor I see, thank you