 Thank you, all right. Oh, I might need to move this up a bit. Can you hear me? Okay? Yep. Great All right I know you've done this a lot of times today But I also want to know who's in the room and who I'm speaking to so can I get a show of hands for designers and developers? Business owners or like DIY WordPressers any agency owners or people who run a team of devs. Okay, cool I hope you all get something out of this talk. I know the title does make it sound like it's very techie But I do think that the overall message that I want to share today is something that everybody can get something from and at The end I will share exactly what I think each group can learn from my experience on this project so Basically what I want to talk to you today about is this javascript app that we built and embedded in WordPress so the how and why of that I'll go over our technical challenges and how we solve them and Why I think this hybrid approach is something that might be useful for you If you don't know what I mean by hybrid Basically, we went halfway to headless if I can call it that There's been other talks this weekend about the whole headless thing and the gatsby thing So I won't go into all of that our project though. Basically was a mix of both worlds I did this with my partner Hamish. He was Ali developer He came to this project with a strong background in C sharp programming and in javascript but no experience whatsoever with WordPress or even PHP and I came taking the role of sort of front-end design and project leads So I negotiated with the client on the requirements and managed the project So why did we do this? Well? Sometime last year. I was approached by a client who wanted an e-learning membership site or a Subscription-based tutorial platform to be built for Holdouts fitness tutorials and it was actually because of this niche that we came across a lot of custom requirements that it actually led to us choosing this hybrid approach So what my client really wanted were a lot of the usual things to manage subscriptions for a strict content Have tutorials with quizzes attached and obviously be usable on different devices Be easy for the team to upload tutorials and easy for the students to consume them What was interesting though was they wanted this custom design that would support a Different kind of learning experience So the way that pole dancing is taught basically there's not necessarily a linear progressions Not your academic module one lesson one and so forth It's a collection of skills that are linked together in in different ways And we want the students to be able to kind of navigate through that with their own flexible learning path Whoops So immediately I recognize this meant we would need custom post types We've heard a lot about custom post types this weekend So I'd need custom fields and I'd need relationships between these CP2s We'd also need advanced search and filter functionality and also good indexing on all of our Tutorials and the related data so that that search and filter happened quickly Then to support the Personalization aspect we needed to be able to save data about the members activity So what tutorials they watched maybe how many times have they done the quiz did they pass it and from that? We can build custom queries to make recommendations for what they should watch next And last but not least we wanted the UI to be smooth and sleek for the user So we want an experience where they can navigate between these related tutorials really naturally and also find new tutorials that they're interested in So after weighing up all of those things We decided we wanted to leverage the WordPress backend because it's a really powerful CMS And it's got a lot of great plugins that would suit our needs and we wanted to build our own front end So that we could have that single-page app that is fast and beautiful and easy to use But we we we felt that we didn't have the time or the resources to do the entire solution that way So we decided we would embed a fully functional React app in WordPress and then try to make the Transition as seamless as possible for our users. So as they move from the regular pages to the web app We wanted that to feel seamless to them So this hybrid approach really suited the blend of our team skills I came to the project knowing WordPress but had no experience with React and My lead developer was the opposite We'd also done a similar way smaller project before Something that was more like a proof of concept with embedding react in WordPress So we knew it was possible and we were ready to take on this more ambitious project It was also ideal to do the hybrid approach because it meant that we could limit the headlessness if I can call it that again to Just the core functionality. So our e-learning experience Then that enabled us to develop things faster to do a really good job of that UI and then still have room to grow later So that flexibility was really important to us Because we did want to leverage a lot of the other WordPress out-of-the-box solutions for your things like you know membership management payment gateways contact forms and etc We also were able to continue using page builders for the other parts of the website that are more simple home Contact about and my client could go straight into the blog section and be familiar with the WordPress interface and and take care of that themselves So now we know why let's talk about how we did this This was our tech stack the key things really adjust react.js That was what we used for our UI and Wp graphql, which was our data access layer We also then wrote a couple of custom integrations So that Wp graphql could talk to the other plugins that we chose and in our case This was RCP for the membership management facet WP for the search and filter and indexing and Meta box IO, which was our CPT manager of choice. I Don't want to talk too much about why we chose react because you could do this in any JavaScript framework of your choice or vanilla JS I will say though that we founded a pleasure to code in react and I kind of fell in love with JSX just quietly and We also really loved that we could use material UI Which is an implementation of Google's material design that's made for react and that meant we could use like really cool buttons sliders grids poppers and have an attractive UI up and running really quickly I Do want to spend a bit of time on why we chose graphql because this was really the game changer for our project For those of you who are not familiar with with graphql It's it's essentially a more modern alternative to rest and it's Significantly better from a performance aspect It's also really simple to write and execute complex queries with flexible user inputs and It's it supports nested queries and related data really nicely and as you may remember from the requirements All these things were important for us So this was made possible by a plug-in called WP graphql And if you are interested in the rest versus graphql discussion I would check out Jason Baal's Twitter page because there's this interesting thread there We're actually one of our other speakers gets a shout out which I thought was cool All right, so now we have the plan and we have the pieces the path was not without obstacles So let's talk about those First and foremost we found there were limited resources on doing what we wanted to do This is mid to late 2018 and there's a lot of tutorials about going headless But not really about this hybrid idea and definitely not doing it seamlessly So the solution was basically trial and error and a lot of problem-solving in the end our solution was That we made templates a single and a archive PHP with empty DOM container that the app gets loaded into We configured WordPress to route to these templates whenever our slug matched The certain types of CPTs you can see that tutorial for example there And we would in queue our scripts on that slug and DQ any other scripts that we didn't need We also struggled a little bit with The limited dev experience that we had in WordPress coming into the project because both my partner and I I suppose were trying to Run before we could walk almost so we were experienced with programming But we weren't that familiar with the WordPress ecosystem and we found a lot of support for amateur level WordPress problems and in the end what we realized was we weren't asking questions the way that a WordPress developer would And that's why we were sort of struggling to get through that barrier Eventually we found a couple of good slack channels where we got some excellent support from the community So thank you to Jason ball and the WP graph QL team because they showed us the light a lot of times We also Sort of struggled a few times with other plugins We wanted to interact with because they only had PHP or REST APIs The solution there was that we wrote our own integration functions and resolvers so that our we could access their functionality from inside our JavaScript and The maturity of some of our dependencies was an issue as well because I'm thinking material and Metabox and WP graph QL all had features that we really needed now About three six nine months down their release plan So it was just the timing thing for us And what we did there was work with those plugin developers to either provide use cases so that they could you know build in some of the stuff that we needed and understand what we needed it for or We raised pull requests and sort of closed that gap So at the end of the day we did it we embedded a fully functional react app in an otherwise completely standard WordPress installation And it was beautiful Now we're doing some refactoring so we do need to consolidate our data access our component tree We've got about three different design patterns from trying to put this together over such a short amount of time We did have a small team just us to working after hours We had full-time jobs and we had a very very hard deadline for launch So we also need to now upgrade some of those dependencies that have kind of caught up if you want to call it that to sort of our needs and After that we would love to translate more of the project into the app scope Which I think will be really exciting now that WP graph QL is part of Gatsby We're interested in looking at how we can use that for that other parts of the site that aren't e-learning component and Maybe after that we could look at translating some of our react that JS to react native and possibly offer a companion phone app or something like that We also want to continue our open source contributions And we intend to publish a blog or two about how we did what we did So if you are interested in more detail or code snippets or any of that sort of thing Please get in touch with me. My details will be on the last slide So now we know the how the why and then what's next I just want to finish up by sharing what I really loved about it and why I think maybe you would like to try it too So it was great for us because we got the best of both worlds We got to design our front end in the MVC design pattern. So your model view controller, which was discussed yesterday and We still got to use page builders for everything else outside of that Component and even for rapid iteration of mock-ups for things that we were going to build in our custom UI We found front end development relatively hassle free Which compared to my previous experience developing for WordPress was kind of a breath of fresh air I don't know about everybody in this room, but I generally find it's a mix of convoluted PHP templates CSS overrides that can get very messy jQuery version conflicts or all that sort of fun stuff So it was really nice to be able to develop something for WordPress in a clean and more modern way I also actually found a someone new to react that the react learning curve was shallower than I expected Case in point about six months after launch. My client presented me with new mock-ups So we're gonna get a nice new facelift on the site and I managed to reskin the whole app in Far less time than it took me to do the rest of the WordPress site And that was a lot to do with material and their excellent theme engine But it wasn't just style that we were editing. There's a lot of layout changes, too so the modular component thing and The convenience of JSX all that just made sense to me and it made for a faster development time and I loved it Also loved WP graph QL That was a very very clean and user-friendly way to query our data and it was especially convenient with this graphical IDE which I called graphic QL for my entire time up until I realized Graphical is much much better way to pronounce that That makes so much sense. It's like a graphical version So this is this is a really handy little thing you can stick in your double UP admin And you can run your queries see the results like this You can actually explore your objects so you can go through and see the fields and what they're implementing and stuff like that Which is very handy And ultimately we loved it because the client loved it They were impressed and happy the end result was fast and smooth and intuitive and Looked great and came in on time and on budget So I don't know what else you could want Why you might like it though? So I talked about why it fit all of our requirements and perhaps that's not something that you sort of have the same needs For but I still think the hybrid approach is worth considering If you're a business owner, it means that you can update your website bring in advanced functionality custom designs improve performance without doing the whole website as an app So if you've been interested in this idea of this single-page app sort of headless WordPress You don't have to do it all or nothing. You can go hybrid and you can do it bits and pieces Same applies for a designer and a developer. You can tackle upgrades incrementally. You can up skill yourself progressively take something like the image gallery or the blog section and Make your single-page app for that load your JS on that page and you're cooking Also, if your goal is to go headless I feel like this can be a good stepping stone and it can put you on the path to perhaps developing software solutions that are a WordPress back-end and a phone app front-end If you are an agency owner or in a mixed-mode team I think it's really cool because you can have each player working in the ecosystems that they are already familiar with and Yet still be solving problems with modern tools and modern methods And if I can sum it up in a nutshell, it's just about giving yourself more options There's been a lot of talk this weekend about, you know, it's a new time for WordPress and and all this sort of thing And I truly believe that I think that everyone can benefit from modernizing their WordPress sites Without while still keeping their existing sites running and I think it's great to explore alternatives to these big Overhauls that might run over time or over budget or just never happen So yeah, I think that you should consider a hybrid approach for your next project It might be a quicker or cheaper or more agile alternative Thank you very much Do we have any questions? Thanks, Georgia. That was a great talk. Thank you I can't wait to see what you've built for your clients sort of productized and made available because It's a sort of thing that sort of I think could be really successful. So good on you My question was around you sort of touched on briefly about how you Had your a bit of time when it came to, you know, you needed features that weren't yet available And you touched briefly on what you did to go about getting those features But I was hoping you could expand a little bit more on that From my perspective is at the other end Is as a plugin developer Trying to meet those requirements from the users. Yeah, and I'd like to hear what worked Well, I'll use WP graph QL as the example because Essentially what we found there was Jason the plugin developer was really interested in the way that we wanted to use the his graph QL They were using it for I think news distribution and like syndicated blogging and this kind of thing So our use case with this whole Tutorials that are related to each other and quizzes and user data that was saving just wasn't something that was a use case that He had built graph QL WP graph QL to do so he was I think we were just very very lucky He was already interested in introducing a lot of these things It just was a matter of we did a little bit of the grunt work with some of use cases And and my lead developer did do a lot of the coding anyway and raise PRs And yeah, I think that we were very fortunate I do know that in other cases a plug-in developer can't cater for all these expanding needs Well, that's how we handled it cool. I Would just then say that I'd echo that is a really good idea Even if you don't have the technical ability to raise a PR That what your tip there on just telling the developer the use case is super helpful. Mm-hmm. Definitely Thank you Anybody else? Oh and on your comment that you'd like to see how it's productized I did regret that I didn't put more screenshots in and show some more about What the solution we built and it is obviously highly niched for the poll fitness thing, but I do think it's a Structure that that can be applied more widely. So if anybody is interested in something similar I would really like to talk to you. Thank you