 Can you all hear me? I can't hear the top much louder than that, so we'll keep at this level. So first thing I'd like to do is get people out of the room. How many of you build custom themes for a while? Okay, so this top is here towards developers, so I've tried to, you know, try to hear to everybody, but there's going to be codes, so if you're scared of this, there's a new chance for you. Worker! Worker, yes. So the main reason I came over this top was about four or five months ago I had a project where I had to take my dogs to a framework to add to a worker's name, and I kind of think we have to get into a little bit. And unfortunately, it doesn't have as many resources as they are now, so I kind of have to, like, deep dive into it, so I kind of really just find something on YouTube or anything like that. I actually had to dig into code, read documents, documentation of bigger things that I saw, which is crazy. Normally people would get their things out before you, right? I mean, there's not a lot of words, but at least that's the end of that time. So yeah, so this is kind of more, more so something that I learned coming on, which there are new resources that I still think are more possible, more viable to me along the way. So the talks had to react to your WordPress theme. Then, I mean, I'm a full-stack mobile developer. I directly went out WordPress for about four or five years. I've done custom themes, custom plugins. I've built some dynamic, like, actual web apps, and I've actually used WordPress as a framework for mobile apps, and there was a conference to publish it so that they used that whole platform. So I've used WordPress for a while, which is funny, because four or five years ago, I thought it was just a blocky platform, so I never thought it was going to be an actual tool, utility for me and my career. So I spent the last three years working at a couple agencies, smaller and bigger. So I've worked with WordPress and I've also worked without WordPress. My last gig, I just did it the past six months, was just on the price level, and they didn't use WordPress. It was all closed source. So I have a pretty wide range of experience working in the tech industry. Currently, I feel like it's running out of business, trying to figure out how long that works and go on project. And also, as I'm going into the talk, don't just stop me. It's a question that I might not answer in later, although I felt like I could answer a lot of your questions, but I'd rather keep this more informal. So my main objective is to outline different approaches to add React to WordPress theme. Most of these approaches can be applied to other frameworks, but I particularly use React, which I'll get into. How many of you know what React is? How many of you use React? Do you use React with InwardPress? So I want to get a feel for how are you using React, just as an understanding of React. Yeah, I prefer you, but... Sure, go for it. So I use a combination of the InwardPress 1 and React. Okay, so when you turn on how you're rendering, are they like hosted in two different environments? Yes, they're essentially created in applications. So like decoupled? Yes. So the big interest for me here is we want to build CMS capabilities that we can share a little bit more of what we can use for WordPress. Sure. Okay, so like I said, I'm probably faster than I am in talking than I slide, but I'm going to be online in more brainless CMS versus headless, in our case, versus more headless now. While I was doing this PowerPoint, I was going to do that. Someone was doing the exact talk I was going to do. So I changed my slides around and going into it. So let's get into it. So the motivation, like I said, I actually added a dynamic functionality to a couple of freelance products. And they weren't just front-end, like a dynamic widget. They were also in the backend where one of my friends is a DJ. He has a playlist that he makes on Spotify. I created a plug-in where he can just sync that into WordPress and then he can dynamic pick which one suits him better. And so to do that, I realized I can't just use my, like, default JavaScript functionality. I wanted to also use one of the modern JavaScript frameworks. I ended up, I was split between it because I actually have a background in Angular. I used to run an Angular meet-up in Detroit four years ago. But that's, there wasn't actually a lot of meet-up. I started to see, to actually ask a community for help, because I had no idea what I was doing. But it turned out I needed a community. So just, you know. So that was Angular 1.4 that came up with Angular 2. And then after that, I got a job and we weren't using Angular. We had our own custom internal framework. So then, you know, Angular kept progressing to, I don't know, five or six now. Six. Six. Six. Yeah. It just seemed to be too much. Okay. So I knew, I was trying to set between React View and React Human Angular. I tried to play with Angular, but there's too many paths of the different versions. Each one has the only stable team to support. View, remind me of Angular. And that's what concerned me. It's changed Angular. But I can understand why you prefer View, especially for some of the setups that I was going through. View seemed like a path at least for instance. My main reason for choosing React was career-oriented, because there was just enough job postings that were looking for React. There were countless of Web Apps that I couldn't name that used React in their instead. And realistically, I think it would be easier for me to list Web Apps that don't than Web Apps that do. So that's the main reason. And then on top of that, because I'm a mobile developer, I've been playing with React Native, which is a job programmer from Facebook that was built across platform, Android and iOS apps. And it's built off of fundamentals of React, so it seemed like it looked like that. On top of that, I went to work here in US in 2016. And during their state of the word, they announced a platform called Polypso. So it's an entire new admin experience, which is why right now we're with WordPress.com, where it's built with entire JavaScript, no HTTP, what's Web Apps, no JS backend, and then it's using React right now. And so they released that with, I think, an eventual goal to replace the current WordPress admin with that, even for the networks. There's sort of a debate behind that if there's some inner workings to it. But ultimately from that talk, Matt basically said, learn JavaScript and I really took that to heart because I was already interested in learning JavaScript and once I saw that that's where WordPress was going, it just made sense for me. So that's kind of why it became a radical a few months ago, because again, there weren't any resources. All right, so there are a couple ways to add React to a project. There is just adding a CDN, like the URL, adding it into your site. I don't recommend it. Unless you really want to prototype or just get a quick open running experience, a CDN makes sense, but there are so many tools coming into modern JavaScript that make your life a lot easier if you use the under two options, which is Facebook has a pretty good React app through a positive overview of the tool. On GitHub where you pull it down and time it generates and scaffolds everything you need, but it also creates an environment that it just makes it pretty easy to not only just start building with, but also they have some tools that when you're ready to put it live, you can just start from that experience. So the great React app is probably the easiest way to go. Unfortunately, I'm one of those people that needs to know everything I'm working with, otherwise I can't do anything. I don't work with black boxes. I need to know the end and out of it. So that's how a radical one started to work on something. Well, let's just see what's going on. And that led into a lot of work because so I would use this great React app, pull it down. I would walk through some tutorials and right now have a single page application that would write this into my WordPress site that I already have in the system. I looked at how it builds the files and what ultimately produces some static files that produces an index.html, styles, like CSS file, and JavaScript. So I was like, well, can I just take that and move it into my WordPress theme and plug in and just link it to it. I would think so, but there were a lot more complications to it being that every time you change something in the app, it would reproduce in a while, but it would have some different numbers to it. And so the management just became difficult, especially because this was a freelance project that I was doing on the side of the full-time job. So I updated every couple of weeks, and of course, there would be too many updates where I couldn't remember what I did. So it just became very difficult. So the custom approach is very tough to do because you pretty much, at least from me, being a Ph.D. developer going into JavaScript, there's a lot of tools I have to learn on top of React. React has some suggestive practices, something like a formula, which is for static files, so Webpack, Babel, and they have the only, like, HTML inside JavaScript syntax. So it wasn't just like learning their libraries, like learning their entire ecosystem, which became very, very tough. Today, I'm going to share the CDN lens, but I'm really going to need to talk about the creative React app and how to, just kind of like a basic setup in a core function. The custom, I've excluded, but depending on the timing, I can kind of walk through it if there are any questions about it because I do have my own phone framework that I've put together that allows me to add React without all the other stuff. That the creative React app comes with because they obviously have their own suggestive practices, which still is great for learning when you have your custom environment and custom libraries from each of them that have to keel that stuff out and just add the things that come with it. And that's what I have to do. So getting into it. So I was just having a conversation with a comment over there about redness versus headless. Does anyone know the difference between it? Well, these are like new, catchy phrases, redness and headless. Headless CMS is probably something you're going to see more consistently on and I guarantee you can hold me to it. You're going to walk out of here and you're going to see how the CMS can handle it. Most of this. Do you agree with it whether it's going to headless CMS and just stay with the restful API? Sure. So headless CMS kind of relies on restful API. They kind of go hand in hand in what they provide. So headless CMS, in terms of WordPress, so right now when you have a WordPress environment, it's serving an admin experience and it's also serving a frontend for the public user. With the headless CMS, you're basically cutting out the frontend so that you can potentially host it. Like we were just discussing when you're cutting out the structure where like I can host my frontend like static files anywhere and then they consume it from an API. So the headless CMS means the WordPress experience is like for the admin. They can go upload content but that content is now spit out into a restful API itself experience. So that's what happens. So it's really beautiful for a couple of structures and how big it is to prevent information architecture. And if you're building a cross-platform app or if anyone can handle things where they have a mobile app or I'm building something with Amazon Echo for example and I'm consuming from the same API. So the headless CMS is beautiful for them because all my client has to do is upload in the same admin experience that they're expecting but now their content is everywhere. So there are people who are downloading the skill listening to the same blog posts that they can go read from their phone and play that experience of that structure. And the nice thing is if I ever want to change how I'm using the frontend without affecting the background likewise, if I ever want to drop a WordPress because there are other CMS and there are a lot more other solutions that are noticed that I'm consuming. So if I ever want to drop the WordPress experience and go for another CMS and I can do that without affecting the background. So that's what happens. So that's what happens. So that's what happens. They're without affecting the frontend for the most part. There might be some URLs that have to change or something like that, but minimum interference basically. Whereas the brainless CMS is probably the typical practice or at least that's how I was thinking about adding React into my theme or plugin because that's how I work. Because I've added single page experiences in my websites, but it's always like there's still multiple pages but there's not one page that is a single page application where in that one it's just a separate page template that includes the jobs for them and that's how it renders. So that's how the brainless CMS is. You're relying on WordPress to deliver everything versus the address where you have kind of a controller and they can both be separate. And so like I said I'm proud for today's time to download. I'm not going to need to do that on the CMS mostly because there's a lot of resources out there right now and also I don't figure out what I need to set up for it. Because that's reaching how this whole topic came to that for me because there weren't enough resources for me. And so I like to figure it out. And the next thing the brainless CMS is if you already have a custom site you don't have to replace the entire England React. You can just add small components of React in widgets for example. So like if you have a blog post and you don't have the light and count and you want to add more interactions to it, for example you can do that because I'm not having to rewrite the entire site. Which is nice especially if you're learning React or framework you can add smaller components and still learn how to do that and be building a site. If you have a large site, re-backing that will be good. Do you agree with the mention of CMS as a result? Yeah. The one that I know of is Netlify. It's like kind of growing. I've actually met the CEO in San Francisco. It's growing. Doc Mutations and we use Doc Mutations with their sites. They're all hosting experiences for static site generators. So that's it. Can you still get it? Yeah. That's another one. That's another one. So there's a lot more. For my enterprise job this last six months I had a little bad one. So don't erase it. There are more out there but those are the two that I know. My thought is the thing with Atlas CMS so the idea behind it is for one of my clients they use Facebook pages a lot. So I'm actually in the process of only using WordPress to just keep a log of their data so that they always own their data. But they are actually their experience is actually their business page because they already manage so much of the content and I just work with Facebook and API and have a front-end to sit in some roles. So the idea with Atlas CMS if I ever want to replace WordPress with another CMS I can do that and do it very quickly without affecting the front-end. I didn't have to redesign the page or anything. I just had to change it because that's the advantage of Atlas. We're not going we're going into the premise and I mean you can go towards the Atlas structure and that's more assuming if you have an existing site probably that's difficult. Just to give more of the visual idea. So the premise is really the idea. In case you have a WordPress platform and then you have a mobile website and website-consuming content and instead with the Atlas now we have this layer which is the WordPress CMS is just giving you JSON data and now you can build whatever client-side app. So it can be mobile it can be a website it can be an Amazon Echo Skill what have you and the nice thing is you can build all those experiences without having to affect the back-end for the most part. So this is just a snippet from React's documentation. This is how you can add it from the CDN you can use this WPQ script and you can add the CDN URL. So they have a development environment and production which just minimize fashion reforming and the development allows you to actually be bugging in the browser. And again, I don't recommend doing this unless you really want this to have a quick sandbox to play around with React but even then you're still better on boring things than being creative with React app for its better experiences. So to do the creating React app there's a note which I've installed as a web developer so it's probably a good practice to have a note installed again. There's a lot of packages to take advantage of so there's two different instructions depending on your note version and I just had to deal with this earlier this week with using like having your version of note and so a lot of packages work. So the bottom example is if you went home today and John let me know you're probably going to go with the bottom example and the top because that's their new structure. Don't really know the difference really more syntactical but I guess it's doing a lot of cool stuff. So yeah so now I'm going to attempt to demonstrate the process in an example and this is where everything's going to go wrong. This is where everything's going to go wrong. So what I've done I'm going to make this bigger plus there we go it's like can you guys see it? Can you guys see it? Okay you guys can see it pretty cool. So I put together a very basic theme structure so all you need in a WordPress is an index.htp file and styles.css file and styles.css file you really just need to code snippet from codex or developer wordpress.org and this is this is really the better minimum and in terms of my index.htp file so in a React example you're going to have some sort of div with an IT and that's how the React notes have rendered its content into a page and so I've just added just a basic page template code very, very, very long and then in my functions file in my functions file I have the two kind of in kilo scripts here the first one is to load the CSS so I get the style sheet and the main CSS this is what's actually going to be built once I've had to create React app experience in here so all I'm going to change is what these things are and of course there are better development processes but this is just to kind of show you how to just add a heap of things to be built. Was this your number even though of the 3A grant? This is for their actual experience of React app so they're default behaviors and everything so it's using all their tools and all their suggestions but that isn't really the quickest way to work with React and also because when you spin it up it'll actually do a live reload and all the other post-huffs of the great experience and for some reason I always under-register in conversation. Okay, so let's go back to my slide like it said they have a different way to do things so FDX create React app so I have a terminal here so let's so FDX create and I hold it and I go talk to the node admin which is like their hosting environment it's going to install React it's going to set up all the dependencies that need to set up a good environment for me to go in and work with so first I'm going to run the development environment so you can see what it does and I'm going to show you how it gets into the world and running against time so I'm going to go as quickly as possible and of course it's not working this possible so I kind of regret believing that it's not working but yeah I guess I'm going to have a good copy and anyway are there any questions any questions that you'd like to get at what's the final structure for if you have a good WordPress installation and you're doing it just a little bit of HTML so I'm going to have another theme for so this isn't an actual theme but this is a different final structure that I've got together so this is my custom one where I have my own webpack and I'm just like I can't deal with so this allows me to install whatever modern no packages I want into it in terms of file structure it's really up to you so what I'm doing here is so this is the root directory so if you go to content themes you would add this into whatever theme you call it and then for me to create a React app is in this front folder that way all the no packages that need to go for front state the reason I have a different setup here is because I'm changing how I do themes and I want to have everything wrapped into the webpack so that I can actually add new JavaScript packages and still control them a little bit better so like for this it's more so this because I could also host this somewhere else so I wanted to keep this root whereas this the create React app is now in this front end folder and so if I wanted to host it I would host that folder somewhere else or I would host it within it but I've seen some messy structures too so in terms of what it's got so these are the files that folders that React has and I'm just going to go with it so first I'm going to just run the build command so it's going to compile so it's going to compile everything so I'm just going to go and queue it and then I'll put it on the dev and run the things and have multiple processes running so now and this is going to open up should open up in the browser and it should just be a default React app and it's just the development environment so as you change anything in the front end folder you'll see the changes here and this is the default experience here so this is the dev environment and the production so in the production what happened is this build directory just got built and there are files that is created and some other files so I don't recommend this in terms of hosting because you're hosting files that you're not going to actually use because it creates its own index file and some other files but it creates a static directory where it has the CSS and the JavaScript and so all I'm going to do is change the stuff here which I guess I don't have to change but this is great so I use local flywheel for my development environment so I'm going to refresh this and it's going to look the entire same and so you don't see the load because the image has to get included but but here's React and now my page so if I wanted to structure this into another page that I can and that gets me going with React so that's the brainless do we have 10 minutes? yeah there's 10 minutes for questions I was speaking to her because I thought 10 minutes there's 10 minutes for questions so if people want to see more yeah if you guys have any questions this was like airborne and that's like I have a React app it's ready to render but I wanted to show you that's how you go with structuring it are the slides available? yes they are I put it on the share net thing I could probably share can we just tweet it out with the hashtag? yeah sure can we put it on the app.js? the app.js? okay sure like when it compiles or just the we have a source so the reason why I suggest using the created React app versus the CDN with the CDN you can't run JavaScript like this and it might look intimidating at first but the beauty is you can create separate files now in JavaScript and you can really you can really avoid messy code messy architecture you need to maintain and so for example this is like importing React it's importing a logo that's how React is built in terms of these new points and now if I want to add another one I don't have to add that code here I could create another file and just include it which means if someone needed to change that one thing they won't put that one file so that's the beauty of using the created React app more modern modern structures allows you to work with a more single component based structure which makes it easier to maintain and so you can see with React it has CSS and JavaScript and what React, the created React app does is it actually builds up an index.html file out here with the CSS file and all it's doing is it just put everything in one line it's actually more optimized that way so this is its performance as it gets for a file same thing with the CSS and JavaScript files they just come out of stuff that don't try to read it it's not fun so yeah so that's how I attempt to add React to my game and to do this you would still use the Q scripts but you would just only use the program admin and then they would add it into your plugin and have a single page experience inside inside in terms of file structure the main reason I went to this talk and I went to a couple of talks was because no one really dug into how the structure goes and when you realize I have developed how do I go live what do I go live with that's the question I had but now with this this gives you a better structure of you still upload your theme make sure you don't upload your node modules on a live server and they'll just add weight to the server and potential vulnerabilities it's kind of like so what you can upload in terms of friend all you really need is a CSS index of file so you can either deploy the entire directory or keep it local and only upload those to the files but however you choose to do it you can add to the files actually most of this would probably stay the same in terms of in terms of Angular this is why I ended up having to sort of reverse engineer this because I wanted that customer control and also because at my contract gate it was enterprise so we can actually use React so I had to put my long run jobs together and so for that I still wanted to leverage the modern stuff and the way I did that is probably more so how I did this so the best way to add an Angular to anything or any of the modern JavaScript frameworks is learning a bundler so Webpack for example is a suggested tool and it works really well with React but there are a lot of variations for you and you so this one actually I don't think by default there are some configurations I have in another file that add React to this but by default this is what happens it just looks for JavaScript files set as useable so now you can use the same ES6 stuff that we saw and it's just over here you can import functionality so most of this would work except you would have control over the functionality like actual code so this is just it looks for JavaScript files, compiles them and it builds an HTML file for it so in terms of using an Angular view you're trying to go the same way unless you still have their own pre-view app or whatever that you publish but all that is nested but when you said that you started this with the new the new the new scripting can you give a how long how many hours would you say you had to invest personally to come up with these so I started learning React probably like last year early last year let's just say April Mayish I didn't have any intentions of using the inside WordPress until a project came my way but honestly I was able to grasp React's concepts in about a weekend but I watched a couple I bought some courses on the Udemy and I like that site because they actually constantly update their videos usually and so I found some videos I just followed along with what they were doing and coincidentally I had a job interview the following week and I had to build something very similar so I already had a code base to work with so it comes down to how much time I had I spent my entire weekend I think that was on Friday night or Saturday night and I spent a solid 6 hours probably watching the video doing everything they were doing and just trying to absorb it in terms of how comfortable I am with this I'm speaking now this stuff just feels comfortable as I'm speaking now but if you ask me like a week ago I was like I think I know what I'm doing I always gather notes everywhere but I've got to put them into context now so it really comes down to how much time I had to play around with and the easiest thing the best thing to do is make the easier decisions for me I was stubborn and I was making life difficult for me so again I went and I had to learn everything what I was doing versus just going on a daily act and focusing on what I needed with others and focusing on what you should be doing instead of going into all your radicals and make them easier to learn but unfortunately I still haven't got that I agree that any black boxy thing if you don't quite understand what would eventually come back in by doing the act that's how WordPress was WordPress was this crazy mess I was like okay I'm not going to touch anything I'm not going to touch and anyone can do to it and it's like operating it takes some time we're just about out of time for this session so you guys can have a little bit of time in between and do some coffee and do what you need to do for the next one do as much as you want happy have as much as you're allowed to I'd be happy to have questions and I'll be around there so feel free to