 Hey guys. How you going? Good. All right Thanks for the introduction. Hopefully this microphone is putting the right direction. I'm too short for the lecterns of this size I'm going to stand off to the side a little bit if the camera is going to let me allow Yeah, my name is Ross. I am your token Australian 230 p.m. Speaker Apparently the three of us up on stage was just pretty amazing at WC us 223 so I'm going to be talking to you about my journey implementing single-page applications and the challenges that we had and How we overcame those challenges? Specifically we were implementing them into a WordPress environment. So hopefully This will be a value to you. So I just wanted to get a feel of who was in the room so Who would be a complete beginner? Is it a beginner like a just a WordPress user? How many of those would there be just there today? All right, none. Perfect Intermediates who would identify as an intermediate? Okay, who would be a hardcore developer in the WordPress? Okay, so the majority all right. So who here knows what a single-page application is Okay, that's cool. Brilliant Who here is Australian? nice All right clearly at home then All right, the first thing I just wanted to kind of make clear is that I am not first and foremost a WordPress developer I am a software developer and kind of business analyst. That's probably the best way to describe My team doesn't work directly in WordPress, but we do work with our sister business house digital who does a hundred percent WordPress and we have a lot of cross-server projects So cool moving along It's gonna help a few housekeeping things that I just wanted to get through first If you didn't notice I'm Australian we generally like to take the piss wherever we can taking The piss is definitely different different to taking a piss It's just a translation. It's making light fun of usually ourselves and Mr. Mullenberg just tweeted I think a couple weeks ago that he wanted more art at at WordCamp So I thought I'd answer that call and instead of using stock images in my in my slides I've got some AI generated stuff. So this is apparently an Australian writing a kangaroo Which is yeah, there's a few more to come but that's just a taste Second thing is reminder. I'm Australian So not only do we have a bit of an accent that you might have picked up on but we Pronounced some things differently. So as a bit of a public service. I thought that we would Just get a few things out of the way ahead of time How do you guys pronounce this we pronounce it case Okay, so it's This is case. So I'm gonna say this a few times most likely. Hopefully you don't get confused. Sorry How do you guys pronounce this? All right. Well, oh, we got a mixed result. Let's say that again Oh Was that niche or niche? There's no tea in there We said niche So just just heads up. How about this one? Oh This is a mix one. I wasn't expecting this. All right, so we say we say data How do you guys pronounce this it's actually pronounced in you you got to add a Y in there Inexplicably But we get to choose how we pronounce this so all right. Let's get to the good stuff So I mentioned before that my team and I Develop custom software applications mostly for very niche purposes Where there's no existing off-the-shelf platform already available so Usually they have some very sort of I guess Requirements that are that are we workflows that are very unique that sort of thing And that is there's nothing that suits them. So we develop completely custom solutions We use frameworks like Laravel and Vue.js to deliver that but The concept of SBAs isn't unique to these technologies. So single-page applications you can develop in React and a number of other JavaScript frameworks as well But the examples in cases that I'm going to be using today Do mostly use that framework. I Was going to have this slide to say I hate WordPress but I thought they might be like riots or something and they might kick me off stage and I Thought it was prudent that I'd change it but the key thing that I just wanted to have everybody take away from this slide is that I Think there's a lot of situations where people try and use WordPress and they probably should not so Who thinks that Medical information should be stored inside WordPress for example anybody I was hoping to like push somebody out of the room Who thinks that like firearm information or that type of stuff? Sensitive information should be sort of probably not right Yeah, so that's the main thing that I just wanted to sort of sort of communicate so I guess the question here is so Why not WordPress? I mean the there's the obvious one right so the obvious one is security If you're going to be storing sensitive information in there unless you have the budget of NASA Unless you have the budget of the NSA like that you really shouldn't be storing this sort of stuff in in the platform and The next thing that I just wanted to go through is is the performance so who here loves the meta table Who think oh really yeah, okay, let's talk afterwards The meta table in my opinion is absolutely terrible I think it's one of the biggest limitations in WordPress and is holding the platform back But I mean in WordPress you can do custom tables even put those tables in different databases if you want but ultimately If you're working with large data sets if you're working with stuff that's that you want to be secure that sort of stuff I still don't think that Storing things in custom post types and so forth is always the best sort of solution and Then there's a flexibility side of things so the WV querying sort of Aspect of WordPress is very limiting and if you really want to be storing in data and in the in the best possible way So it's normalized and you've got discrete data Then I'm not too sure that WordPress is the best solution on that front as well So yeah, you can use CPTs. You can use taxonomies. You can even have relationships between them There's fantastic plugins like pods and so forth to allow you to do that but Yeah from a flexibility standpoint particularly for a lot of our use cases WordPress is not always the best way to store that type of information So is everybody on the same page? With me about why we may not want to use WordPress for storing Sort of this type of information Cool. So the question becomes like you might be sitting there going well Ross like if you go into all this trouble Making these sort of fancy back-end systems for people and custom software and and so forth Why the hell are you just making them a? custom website and First of all like I'm a terrible web designer But and I'm a terrible designer and just in general But there's a lot more that goes into sort of coding a website than than just doing the actual technical coding itself So and then I'm not an expert in that area But more importantly, I think we need to sort of Consider these types of things. So there's an expectation that things are in WordPress, right? But what's the percentage now 60 plus percent? What is it 65 percent of? CMS is a WordPress customers are generally If they're coming to us, they're generally asking for or coming to to our WordPress agency They'll be asking for a WordPress solution off the shelf So it's definitely an expectation that if you're building something these days that it will be on WordPress For the most part the other aspect of it is that most of most of the customers at least that we deal with still want to be able to control like the design and so forth of their website and frankly, we were talking with some folks earlier and Everybody is moving towards this aspect of just designing directly within WordPress from the beginning. So being able to use things like the new Sort of block builder particularly with 6.3 just just released Be able to use page builders having all that sort of flexibility We're not gonna be able to build that sort of stuff for a customer in a custom solution So it just doesn't make sense to try and reinvent the wheel And then there's a maintainability aspect of it This is pretty broad but at the end of the day The WordPress backend is becoming pretty ubiquitous We were kind of having discussions over the last year so that it's it's almost a life skill these days like it's an expectation For in some instances that people just know how to update content on on a backend So it just doesn't make sense for us to be creating tools to be Particularly if you're updating blog posts if you if you're creating blog posts, they should be stored in WordPress It's just the way it is. Would everybody agree? Cool Here's some more artwork for you if you want. Apparently these are platypus The AI is just as confused about what platypus are and how they function as the rest of the world I think But they're playing Jenga. There's a bit of roulette in there as well but Hopefully that gives you a little bit of background and what I do and how I do it and why I do and that sort of stuff But let's talk about the actual case study that I wanted to go through today So this particular customer is a collective giving circle they are a membership-based charitable organization that manages a grant pool each year and The members themselves are actually the ones that get to vote about where their money goes and where their membership Grants go at the end of the year, which is pretty cool, right? But the challenge that they have is that they just got so much admin overhead So they need to manage their members and they were using a third-party CRM for that They did manage all of their donations that are incoming and they had a specific donations platform That they were using for that for taking the donations on a regular basis Then they had their email marketing platform. They had a zillion Microsoft Excel spreadsheets that were floating around And then they also had their website WordPress And they were trying to connect to all together with Zapier and It was just creating way more work for them Then it was actually saving Frankly, we were to try and connect all this stuff together to fix up all the issues that they had as a result of Zapier Not doing its thing correctly So yeah, I mean the challenge that it has they wanted to drastically reduce the number of Volunteer hours that we're getting expended on on managing all of this stuff and they also wanted to give a good experience overall to their members and hopefully retain more members and and grow their member base And and just in general they wanted to give up I guess an overall good experience particularly on the website and any sort of Digital communications that they were interacting with or digital assets that we're interacting with sorry so The name of the organization is 100 women If you Google them, you'll probably get a US Organization which is not related to them whatsoever So if you are going to stalk them make sure you put the word Australia on the end of it If anybody wants a website lead you can go and check out the US guys they They they need a website just saying Hopefully that was as diplomatic as I could be but Yeah, as you can see that they came to us they needed a solution for making sure that whatever We built was going to integrate Delightfully with their new WordPress website that was getting built We accept the challenge Is there any how I met your mother fans here Really no one watching how many more good Lord. All right, nobody will get this reference in Jesus I'm so confused all right, so How could we have built this? I think I was skipped ahead, but that how could we have built this if we wanted to be comfortable we could have used one option Which was I frames right who loves I frames? Perfect, I think I got my message across but terrible for a responsiveness Questionable SEO I guess design flexibility is just not great. You don't have access to the document object model inside it They're fantastic Second option we could have done is built additional API endpoints on our custom software Then we could have had some sort of code base or plug-in inside WordPress and Communicated that way and then presented whatever interface we needed on the front end of the under women website That doesn't sound like fun. We don't really want to be managing multiple code bases, I guess unnecessarily and Then we would have to manage all the API endpoints as well. It would just be a nightmare in my opinion And we had a long-term vision for where that we were going with with this customer and what they were going to Need down the track. So if we were just building a single kind of contact form then API would have make sense But that wasn't the case We could have built the entire thing in WordPress, right? That was an option. I took a sort of explained why that wasn't an option before We we could have built everything or some of these forms in gravity forms We just wouldn't be able to have the business logic I guess and smarts in the system that we kind of needed or wanted and That'll become a little bit more prevalent when we look through the things in the letter slides The other option is just and this is very common with SAS products is that you just simply put it on another domain, right? So the problem with that is that it's just a terrible user experience for for most of the people involved so if you're Sending somebody off-site for and just give you an example some of these SPAs that we're building are Fulfilling minor things like just simply taking a single donation So who likes being directed off a site so that they can put in their credit card details and make a donation be redirected back Onto a site who look everybody love that Though we didn't want to go down that route So through the bin and we use the SPAs So just I mean it sounds like a lot of people did know what SPAs were but I just wanted to quickly run it give a very top-level sort of Overview of how they function So when you Have a traditional client a traditional website rather so the blue section over here is your traditional website You type in your web address Browser, which is the client goes off and gets or requests I guess that that website The server sends back the document and then if you decide that you want to change page Or you want to interact with it in some way Then it's essentially another request and then you get back an entire extra Page that you then renders that to the to the browser Does everybody kind of understand basically how browsers work? Yeah, cool. Hopefully that will WordPress conference. Sabrina's how that works So SPAs are slightly different The initial sort of page request is there obviously But any subsequent sort of requests are typically done in Some form of JavaScript and most of the time it's returned in some sort of JSON format, but not always but the pointy here is that You're able to navigate around the SPA without Having to have page refreshers and this particular architecture is just has a lot of benefits But it's the biggest one is that it's just a much significantly faster if you have used an SPA before One of the disclaimers that I just wanted to point out is that SPAs are absolutely terrible for SEO Most crawlers won't be able to crawl them So don't go trying to put actual useful content into the SPAs most of the time when we use it Well all of the time when we're using SPAs they are being used in situations Where it's we just simply don't care that it's not being indexed So we don't do not care that the donation form is not being indexed We we don't even want the member portal back end to be indexed. That seems ridiculous. So From from from a SEO perspective, it's kind of a non-issue. So I guess the point is here. Don't go on create a blog Interface I guess that is built on an SPA architecture Just claim it to and this is kind of something that was brought to my forefront yesterday is that SPAs can be pretty and terrible for accessibility and most of the issue comes as a result of of the fact that If you could imagine that you that you don't have vision and you're attempting to browse around an SPA and it is changing What is in the document object? model But you're not bringing brought to the place in the form that you would expect to be brought Then it can be very very confusing. So if you've clicked the next button to move on to the next page, for example Then if you're not brought to the top of that page or you're not you're not even told that you have changed a page Then that's incredibly confusing for a lot of people using screen readers and so forth So just to shout out that if you are going to implement them try and make them accessible Please make them accessible We did a bit of accessibility testing last night and surprisingly as a Better than I thought they were so we're gonna be talking with some of the accessibility folks Hopefully this afternoon getting them tested out. So that'll be cool All right, so I mean This is basically how SPAs are implemented. It's super super simple. This is what we hand off to WordPress kind of division I guess so it I'll run through What's here? It's not very much, but you have a container Which is just a div generally that container will have a unique identifier on it and then the second part of it is just a single JavaScript file that will render all of the HTML and go and get all of the other required assets and it'll render inside That div container so SPAs Can be full screen a lot of them are full screen. They are the actual thing that you're looking at in the browser In a hundred percent of the ones that we use them for we actually embed them inside pages Because they're generally not an application in and of themselves. They are just a particular I guess portal or a Component I guess of the the overall solution and you'll see that in a few slides I think I've covered everything there So let's have a look at some of the results So this is a screenshot from the become a member So this is if somebody wants to become a member of hundred women they would Click on the big purple button that's at the top there And this is what they would be showing there's actually used some text above this but we removed it for the screenshot purposes but the The I'm not sure where I put my pointer. I was expecting to be walking around So I put my pointer down But the area that is around that form there is actually the rest of the website in this particular example it's using the elemental and the that div that I showed in the previous slide is Simply just put into that position This is a very basic two-page form and you might be asking yourself Why the hell are you using SPAs to to to build a two-page form? This doesn't make any sense But there's there's a lot of good reasons for it in this particular instance We're doing a lot of things like checking if this user might already be a member for example We don't want people signing up twice to be a member it is looking at How they found out about a hundred women for example and that that particular Field is something that is managed in the in our CRM and There's a lot of business logic also if we were to go further down, which we can't there's a lot of business logic around the types of memberships that are available and how they get Sort of how they sign up for them and what the rules are around them and so forth So we could do something like this in gravity forms But we couldn't quite get a hundred percent We would need to say have gravity forms go off and sort of pull from API endpoints to do all of the things That we're doing on this form during the sign-up process This one's even simpler frankly, so Hundred women as I said, they're a collective giving pool They they get membership fees and then they all vote on where that money is going to go But people need to actually apply for the grant those grants themselves in the first place so this is kind of the first step of actually applying for that grant and With this is a custom system which manages all their their grants It's just one component of the back-end system that we've built for them This is just the front-end interface that where they put in a single email address it will generate a unique token and then send them an email with a unique link which they can use to either start their application or even continue an existing application and Obviously to achieve that we would need to have integration with the back-end So that would be another API endpoint if we had to do that with gravity forms So this is the actual application process itself There's eight tabs here. There's a lot of stuff here that it's asking for but Once again, there's so much business logic in here that what we could do it in gravity forms and visually it's possible to do in gravity forms, but we just wouldn't be able to have the same types of smarts that That we have or if we wanted to we would have to do a lot of gravity forms kind of programming unnecessarily This is a screenshot of inside their member portal and it has all the things that you would expect inside a member portal We can change your details. You can change your membership level all that sort of stuff but the key thing to kind of have a look at here is that we have a navigation Sort of portion at the top of the screen there that is outside of the SBA and I was I'm going to get into a little bit more details Very soon about how we kind of achieve that because but it's an example of where you would want to You would want to show I guess a log out button if you're logged in You don't want to show that log out button if they're not logged in You don't really want to show them the navigation if they're Not logged in as well And if they happen to kind of log into the member portal and browse around the website You need some sort of mechanism to allow them to get back inside their member portal as well Right if they're still logged in as far as the browser is concerned So What were the challenges that we had? You can enjoy this artwork of Kermit, I don't know if you guys have seen the meme of this like why is my code working? One of the issues that we had was Just by virtue of how SBAs work Most of the time at least in Vue.js they add this little hash to the end of the URL Which is a bit of a pain in the arse to be honest in our particular in this use case It wasn't an issue because it only appeared on the pages where the SBAs were present It doesn't really matter if you go into the member portal page And there's a log in there and there's how happens to be a hash on the URL But we have had an we do have in other implementations where we have forms for example, they're on the home page and We've had to find workarounds for how to remove that hash So that's something that's just done the Vue.js framework It wasn't a huge issue But it's just something to kind of keep in mind if you are planning ahead to use This type of tech I guess the second thing that we had a problem with was caching and it's in particular It's not necessarily caching of the content or the delivery of What's coming via the SBA it's more the delivery of that JavaScript file itself so by default WP rocket and all the other caching plugins and even say Clare Flare will cache that JavaScript file Which is fine, but when we're doing fast iterative I guess changes to our back-end systems and we're having to deploy or sort of push or pull regularly it's It's a pain in the ass having to sort of clear cloud flick caching clear Internal sort of site cases as well. So just get that in mind. We actually have it not cached just for ease of use all right the maid you guys are not gonna get this either because you know how I met your mother fans, but I Mean we did have some major challenges though. We're not major challenges That's what it's the reason people are here today. I guess so how do we make this sort of appear visually seamless? That's that's kind of the key for the end users and One of the big kids sort of keys to that is is the CSS asset aspect of it We found the best sort of approach to this is to with in our SBA is just simply not try and implement any CSS whatsoever let the website itself determine that and in our particular case for the most part 90% of the design that you saw there is actually being I Guess rendered from the CSS that's already defined within Elementor So the button designs come across all the form fields come across in the same designs A lot of the padding and so forth between fields looked looked good. We do have to do some tweaking as you Sometimes inevitably have to do but for the most part We just need to make sure that we had sort of unique identifiers and classes and the relative sort of components, I guess and and just made sure that it was structurally good from a HTML semantic perspective and then yeah handle things in in in WordPress This is just an example of how it also shows a mobile So once again, we're showing the member area button Sorry, the mic is I can't even read on any of these screens The my account button is is showing obviously when they're when they're logged in Logged out button shows when they're logged in and they've got a member login when they're not logged in pretty simple stuff right when we found the easiest way to manage this was in our actual SBA is to Store a very deliberate Variable in the local storage Which essentially just create has a token and when the token is present It just means the user's logged in that means that we can just use basic JavaScript or jQuery in this case to determine When they're logged in and then just hide and show each of the elements when we need to so it's pretty simple sort of stuff one of the Biggest things that I see so from a security Perspective one of the biggest benefits that we have is the Laravel framework itself So we don't have to worry as much about things like SQL injection Other types of vulnerabilities because the framework just takes care of it But one of the biggest sort of security risks that I think is an issue in this type of implementation Is just making sure that we have best-pressed practice cause policy and for those who don't know what that is It's just a policy that defines Who is able to embed and use that application on their website? So we obviously don't want people just being able to grab our code has punched it into any website and That would be a recipe for disaster. You have all sorts of phishing problems going on and Yeah, the sky's the limit in terms of what you could do there The thing is in some situations you may want that being able to be embedded So there's a lot of companies that just use this type of technology So HubSpot for example, they have as part of those standard form sort of set up is an SPA It runs a piece of JavaScript It produces a form and you're able to embed it on your website. So in their situation it makes sense I'm not sure how I'm doing for time here, but the question We asked it like did this implementation work and I would say that it did we were able to deliver a solution that works seamlessly with the hundred women website and we'll be continuing to sort of use these in future and Just some examples of how we're starting to use those With implemented a number of sort of back-end portals for our customers now using this technology Because we think it's the sort of the ideal technology to use to implement those Even sort of basic Contact forms as I said do make sense in some instances to use them if you're doing Lead capture and you are having that come into a custom developed back-end system Then once again, we can implement all that great business logic Whilst they're filling out the form and provide the customer with the best possible experience and Then we're also in the process of further fleshing out capabilities of the right management systems for a Couple of clients now. So which is pretty fantastic. So that reaches the end of my talk today I've got some socials. There's not too much there, but if you want to connect with me Go ahead that wraps up today's presentation. Thanks guys Is there any questions? Yes, so you are correct So we're implementing this this code in in all of those places. So in the donations page in the membership sign-up page And there's there's probably about I can't remember them all off the top of my head But there's about 10 different sort of SPAs that we have implemented so far on this site but yeah, they the website itself is build 100 built 100% in WordPress Except for these SPAs that appear in various locations and then yeah the the Laravel side of things doesn't communicate back to WordPress at all. It doesn't really have a need to Because most of the important information is stored within The back-end system that we have custom software solution that we have Develops. Does that kind of answer the question? Yeah Yeah, so so the question mainly is just why don't we build the entire thing in Laravel is that oh? Mainly because our team is just more familiar with with Laravel that's that's that's the main answer there and and and frankly at least in the the non-Microsoft wrong Laravel kind of has in terms of PHP frameworks is by far got the largest market share. So we just We there's a clear winner in that space and we prefer to stick with it. That's all yeah Cool. Any other questions guys? Cool, okay Our workflow is not ideal. I'll be honest with you That's often always the case right but in in this particular case We actually set up the staging URLs which are to be honest with you They were just on the live site there wasn't really any sort of risk of them being on the live site because they're in obscure URLs and there's no data the database itself was a staging environment for our software application, but the Pages that they were on were on the live site and then yeah So we just fixed up all the styling on those on those pages essentially and and then bought all that styling across so Yeah Of course, they were private pages. Yes, correct Any other questions guys? Yes What was that sorry? Oh Taking the piss is is very different to having this so having a piss for those who don't know is urinating somewhere And and taking the piss is just generally I don't know have joking around like Yeah, yeah, this was taking and then having and yeah The it's good. It's very clear. I don't understand why there's a communication barrier. Oh, yeah, you can also have some piss Does anybody know what that means? It means you're drinking Yeah, is there any other Questions related to the presentation I'm happy to take other questions, too One at the back Yeah, so the question was a will we're using any sort of member management system on WordPress and the answer is no So and that's one of the keys that are like we could have gone down the route of using something like member Press or myriad of other sort of solutions for managing members But we just didn't want a million users in our WordPress back end so Yeah, we did that's obviously one of the solutions that we looked at at the beginning right and we weighed up with the pros and cons of doing that We could have taken something like member press off the shelf and just highly customized it built all the PHP for the business logic and try to build The solution entirely inside the WordPress, but in this particular instance, we just decided not to So hopefully that answers the question. Yeah cool Yes 100% of them use Vue.js because they they have to for the for the single page application kind of technology But the way that they render to the pages is entirely HTML so when a single page application does Eventually render the page after the page loads The document object model is updated entirely so screen readers can effectively read it fine No doubt you can do much more complicated SBAs than the examples that I've given today and There's I was Grilled by the accessibility team yesterday about how they didn't like a single page application So I was sweating while I was going through that Process but it turns out that the way that we've implemented these for the most part is reasonably accessible so Yeah, hopefully that's kind of answers the question Any other questions guys how far I Don't have a time on me five more minutes brilliant. Any other questions? Yes more friendly to SBAs I Don't know the thing is SBA is a kind of a technology that you could implement into any platform frankly I Don't think There would need to be anything that we would need to change about WordPress itself I'm just kind of thinking on the on the fly here because most of the challenges that we had were ones that related to kind of CSS and so forth. So as long as you see SS is is good inside the WordPress platform Sorry. Oh, yeah. Yeah, I guess we If we so our development team is sort of filling in grain with bootstrap, which Yeah, so we started off kind of rendering all the bootstrap classes to the to it to it initially And it was just a dog's breakfast. So yeah, we had to go through and removal of that sort of stuff But that's not a fault of WordPress at all. But yeah, I'm just sure if I can come up with that any sort of changes I in general, I think if WordPress could some somehow work out a way to move away from the the meta table That would be fantastic. But apart from that Thanks, I Hopefully that answers the question Any other queries? I thought I saw a hand, but then it was a microphone instead Cool. All right. Well, I think that wraps us up guys. Thank you very much