 All right, so yeah, I'm Tyreyn Abelay. I am managing director of an agency called DRAWL. We call ourselves the Enterprise Experience Agency, but what that really means is we do an awful lot of Headless. We also own headless.com and I'll tell you more about that a bit later. The general idea is we want to start building a platform to engender improved development resources, guides and so on for Headless WordPress and other Headless CMS y gallwn y cyddiw, ond dwi'n creu'r clywir, ac yna'r fanhawn. Cysylltiad, mae'n clywed. Felly, y dyma'r siwr, yna'r sefydliad mewn ei ddweud, gallwn hwnnw i ddweud y teimlad BT, gan y gallwn ni'n sig g mencion SOE. Mae'n ddweud ond dwi'n golygu'n cyfnod gyda'r bydd Nîr. Mae'n ddweud y cyddiw i'ch ddweud yma'n gof Plusau Cymryd. Headless. I think that direction it's going is more about composability than just Headless as a technology. Finally, how you can benefit from it in normal WordPress builds, and then going into a full WordPress, a Headless WordPress builds rather. Just to start off, you're all aware already, but Headless has been done before out in the wild. there has been TechCrunch which was kind of earlier on, when are you? There we go. Well done on TechCrunch. There is the time, not sure what happened to the S. They have a bit of a headless setup, if you want to talk to Ian about that. They have some interesting stuff going on maybe arguably more composable than headless. We have built Andrew Authority and SoundGuides and more recently we have rebuilt wpng's website ond heddler's wordpress and done some really interesting stuff I'll show you a bit of that later on So to start off let's talk about kind of what it's been understood as. I think heddler's is often talked about as just the coupled back end of front end, which obviously that's exactly what it is But I think that kind of where we're going with it now is more just this idea of composability overall I think that as we go forward, actually Tim mentioned this in the talk, that there is a bunch of benefits of having things distributed, so security could be one of those but I think that it also allows you this flexibility as you kind of build out functionality to keep things siloed, keep things separate and allow you more sort of room to grow features without building in high complexity into one place So is it just the buzzword? Kind of it is But I think it's more because of the way people tend to see heddler's and not so much because it's useless, I think it really has some value That's kind of proven by the fact that enterprise rely on it quite heavily They rely on it obviously because they do things at a massive scale they've got often a bunch of functionality a bunch of integrations the bigger the company that list can grow into the hundreds and so inherently things are heddlers, things are composable because you've got to integrate so many random different things One thing that I will pull out now is that we sort of see it as a philosophy and it kind of goes across three different things so on the design side I think that there's an opportunity to build composable from the ground up so that means the classic design library type stuff so icons and then up from there into full components so you've got that atomic system of atoms molecules, organisms, all the way up into larger components so you all know what a design library is and then sort of the same thing on the tech stack side so we'll get into microservices and the MAC alliance in a second but it's that MAC alliance thing of everything should integrate together and we should be able to use the best tool for the job in every situation and then finally on the development side so heddlers obviously you end up building things in React or Angular but I think a lot of people are doing React but in React it sort of encourages you to modularise things and encourages you to break things out into components and separate functionality into different sections and you get that same composability thing mirrored at a sort of code level inside a lot of front-end JavaScript projects so I think composability really should be seen as always try and silo out bits of functionality design or features into separate sections it also allows you more flexibility as you develop instead of developing into one massive code base you can develop into a smaller one that's more purposeful and more focused on a specific feature so some quotes so I think that the general idea is that I think that business owners are seeing heddlers and composability as a way to mitigate risk one of the other things that we don't really talk about with this stuff is that if you build something monolithic you're investing all of your time money, effort and intelligence or expertise or know-how into one massive thing it's not a bad thing and in some situations well, in a lot of situations that makes a ton of sense, it simplifies things but I think that the way that people are using heddlers most successfully or using the idea of composability most successfully is when they're using it to accelerate their business and they're using it to sort of get a head start by going to a specific sort of vendor let's say framework in the case of React to get a head start in a way that makes a big difference for their business so instead of trying to spend years getting a single page application like experience on WordPress just build the React front end and sort of use the best bits of that particular framework so the Mac Alliance has kind of done this all before and so kind of a lot of what I'm saying is a straight rip of what the Mac Alliance stands for so microservices break everything out into individual bits of functionality API first that should be able to be integrated into anything, anything you build should be able to integrate into anything else you might want to build or use cloud native I like this one because scalable and flexible and resilient servers in WordPress are tricky to get right in the React and sort of it's a lot easier and more common and then finally headless I don't think I need to explain that one so once again separate chunks of functionality as there is reusable and distinct components in microservices basically harping on that point of go to the best tool for the job whenever you can so let's show an example real quick so this is what we do on the design system level it's nothing special hopefully all you guys are pretty familiar with Figma boards that look like this but I think the important thing to think of here is that this is yes this is the design side but realistically we mirror this all the way up to the top so and that can that can get into complex things maybe you've got a sort of meta navigation feature that is spanning across loads of sites ideally you break that up into something that is very easy to implement and transferable to any other sites you're working on and that sort of thing and I think that so this particular quote I think is a bit like clearly MAC Alliance is pushing for a specific goal here they are pushing for that MAC Alliance ideal of integrate everywhere and so on and they are pushing for more people to come on board but I think it still proves a point we've obviously seen a lot of success with MAC Alliance and I think it's generally where the industry is going you're getting more and more I can't remember where I saw it on LinkedIn probably but I think the number of things that marketers have to integrate and it's the same situation in publishing, same situation in e-commerce the things that people are having to integrate is becoming a wider and wider array and I think it's more and more important as developers and agencies that we, you know, sort of open ourselves up to that world because it seems to be the thing that's coming down the road lots of people have a lot of success and I think that there's a lot of concern in the WordPress community because it's something quite new I think the reality is those that you can build headless quite successfully and you don't necessarily need to use out on all the nice benefits of WordPress so what that looks like is essentially instead of having everything in WordPress you start to look at a system like this so if we're looking at marketing tools for site tracking obviously you've got things like analytics or mix cloud or that sort of thing you've got product information management systems you've got campaign systems you've got promotions and discounts and loyalties and you can go for loyalty line for your loyalty program in an e-commerce situation for a UI framework you might go for React or maybe you prefer Angular or Vue for application it's next or next or something along those lines for API you can choose from rest API you've got loads of options and this is the cool thing is that in amongst all of these this is maybe just a small selection for any one of these things you can choose something that's big up a 10 and it threw me so it's like what am I supposed to do with a 10 anyway so you've got options throughout all of these things and that's a nice thing is that when you come to building your specific platform let's say and you've got a client who needs a really specific thing instead of saying can we find a way to build this very specific functionality in WordPress maybe you just go to a vendor or a SaaS platform or something that provides that thing in exactly the way that particular client or use case needs and that's a nice thing about that flexibility I'll also say that I think this is this is kind of the lifestyle of it but there are those other things once again that security like for example security is a really important one like spreading the complexity across a range of services really does do wonders for security you have to imagine that if you tried building all of these things into WordPress you're going to get a lot of code complexity and feature complexity and it's a lot of stuff in one thing obviously yes you can split things into plugins and you don't have to build it all into core or a theme or anything like that it's nice going to someone who's going to do one of those things very well i.e. loyalty line probably will do a better job of a loyalty system than you can build into WordPress or WooCommerce for example quick one if anyone does get into headless just install vanilla extract is really good it basically allows you to build a tailwind type CSS framework but built at compile time this is kind of the nerdiest thing i've got in this set of presentation slides but it's really worth it and it completely changes the way you build the frontend alright so one's headless a bad idea and i think this is an important one because i can come off as a little bit too confident about headless when the reality is it doesn't work all the time in fact a lot of the time it doesn't work so one lacking the team expertise that's not a jab at you guys for not being able to do it that's just the way it works obviously headless relies heavily on javascript and knowing that side of the world if you don't have experience with building single page applications it might be tricky getting into it it's also sometimes going to cost you significantly more if you don't have the team or you've got to hire sort of externally to do it it will cost you significantly more i don't think that's a forever thing building it and you've got the team in house you can definitely manage it but it can cost more and then finally adding unnecessary complexity there's been a push in the last year or two i think or i'm hearing a lot of SMBs shooting for headless i don't know if headless makes sense in the SMB space all the time i think there's use cases for sure but i think generally speaking what you want to look at is am i going to give myself an unnecessary level of complexity to deal with even once the team's gotten up to speed if you think that you're just adding complexity that's going to extend timelines 20% forever just don't do it if you're not getting any benefits that sort of outweigh that additional time cost but i still want to have a piece of the pie so firstly you probably all heard of hybrid but essentially there are things that you can do to get some of those benefits if you want fancy animations and fancy UI you can embed react and all of the javascript frameworks into a site specialised roles i think is an important one one of the things that headless forces you to do is separate your back end and front end team and so that ends up meaning that you've got experienced, bless you by the way you've got experienced front end devs working on front end stuff and you've got experienced back end devs that classic thing of people do stuff better when they enjoy what they're doing i don't know how many devs we've got in the room but you probably have a tendency towards back end or front end so it's nicer to work on what you like then finally Gutenberg blocks is composability in a sort of UI system i think that everyone's probably very aware of Gutenberg blocks these days but i still do hear tales of people not building sites with them so get on it and then the good bits this is once again the stuff that you know already it's omni channel, it gives you more sort of styling and front end capabilities it gives you access to things that are far more sort of specialised for front ends i didn't pause that time but now i've just made everyone aware of the fact that you just did it again and native like UI UX i think this is an important one people have been talking for the last five years about native like UI and UX on web applications leading to higher conversion rates and just general stickiness with people, i think people feel a lot more comfortable in a native like UI and then finally localisation, personalisation, A-B testing you can do all of that stuff without any performance issues you can bundle it into your original request to the back end and you won't see any performance slow down on the front end so that's cool content editor experience is the next thing people tend to ask about their like but wordpress is supposed to be easy and plug and play and the good news is you can actually do it you don't really lose anything it does take a bit of work but you can get a pretty like for like situation where you get full editing capabilities in Gutenberg blocks on the back end and then obviously you've got your front end so the sort of upcoming look at headless, i think that here it starts to get a bit like okay am I do I have a dog in this raise or something but the honest truth is this is just sort of where it's going i think that there has obviously been a lot of hype around headless but that is reflected by the fact that companies seem to be moving in that direction I don't know how quickly it will get to the point where everything is that way or for all ever get to such a world but it's definitely where it's going and of course so onto headless.com so a lot of the things that I've talked about has just sort of been scratching the surface but we think that there's probably a better way to do it which is build a platform that allows us to share information and that's headless.com so it will be a sort of platform agnostic and community agnostic or rather agency agnostic thing where we can essentially share resources, guides documentation and so on and I'm going to have to rush otherwise he's going to hold up another sign right click is gone the roadmap very quickly is firstly just sort of get a base level there next we want to start sort of building resources into a fuller capacity and get complete coverage over core integrations like Yoast and ACF and so on and then eventually we'll get round to doing a starting framework and what you can contribute you get to be a thought leader give back to community and collaborate with other experts it's a classic word press community stuff that we all know and love and we're hoping that it can become a really good sort of knowledge resource for headless and essentially reduce the level of effort for developers to get into it and marketers to get into it and publishers and so on finally a quick summary you specialize technologies use the best tool for the job why not don't limit yourselves modularize modularize and reuse functionality I think that's something you can apply to any situation I mean to be fair the first one you can apply to any situation as well and finally enable your devs to work with frameworks that are really targeted for the specific thing they're building once again you know javascript works really well on the front end it runs great in browsers so in whatever way you do it whether it's hybrid or headless get the most out of it and once again obviously word press is a great backend I think that about covers it yeah that's pretty much it so yeah questions yes 10 to 15 minutes can go on any question how do we make sure word press is seen as a good sort of headless cms because more challenges clients have see stuff now how does word press like fail because the cms target themselves it's like a headless cms word press doesn't do that but personally I think it's really good yeah I think so as well so the weird thing about word press and just headless cms is in general is that if you use a headless cms there's not really a high level of effort it's just the way it works so if you go to like Magnolia or Sanity or Contentful or any of them you have to build an API it doesn't just do it all for you it's kind of the same situation and so really then the comparison becomes the content editor experience which arguably I think we would all agree is better in word press and so in terms of convincing the client I think it's in my mind I think it's more about giving them a general over-understand overall understanding of what the situation is with headless and then word press and its content editor experience sort of speaks for itself questions so when we did the WP Engine site what we really wanted to do was mirror our sort of like front-end code on the back-end but it was something that we ended up not doing because it did sort of reach a level of complexity that we weren't really happy with that said there are it is at the end of the day similar styling so you can share that code on initial build and then as you make sort of feature updates to a block let's say it's a much smaller ask for a back-end developer to add those sort of slight design changes or something like that the reality is as you probably saw from that slide I won't go back to it but the back-end side is not one for one the front-end but it gives a really close 99% representation so it's still a nice sort of editing experience I would say it's kind of something I didn't want to get into you need to really go into the setup to make it easier put it like this it's more a case of what you're used to I think so all honest truth basically we started more as a headless agency than we did a wordpress agency we're fairly young and we started more with headless than we did wordpress and I've got to say at a sort of dev process level I think we prefer working on headless than we do just sort of monolithic I think setup-wise any most like next apps or most front-end apps have a fairly simple sort of dev and local development process where you can have a live preview and then running the back-end on local is the same process that you're used to whether you're using local or docker or some sort of custom setup to run it locally so I don't think it adds a high level complexity but once again if you are able to separate out teams and have a front-end dev working on the front-end and a back-end dev working on the back-end then hopefully you shouldn't have to set it all up on your own does that answer? I don't know sorry go ahead go on how do you feel that if you go to a really composable headless approach how do you feel this should maybe adapt or evolve our attitude towards looking at the wider WordPress ecosystem in particular context I'm thinking here is something that typically we're looking at e-commerce in a WordPress world we're going, oh what will we use with but once you start thinking now it's headless I've got much more options for API's compatibility what is the ecosystem we need to take account of if we think of WordPress as something in a headless world well I think that's the cool part actually is it gets WordPress into that game it gets WordPress into oh it's actually one of the potential vendors for CMSs alongside all of the other things that integrate into each other so obviously you mentioned big commerce and big commerce of the Mac Alliance and part of that world of tech stack that integrates to everything and so that is the fun thing you're not talking about what's a WordPress plugin anymore you're talking about what has a REST API and a lot of bloody stuff has a REST API basically so you can kind of open up your horizons in terms of what possible was that the statement you were kind of turning into it's like the challenge of it we're really comfortable being in this WordPress world so I think so I think that that challenge of it is I think that the breakpoint this is such a touchy feely thing to say but I think the breakpoint for when you should go headless is you'll feel it like it will reach a level of complexity what you're trying to do that you're like oh at this point I should just do it headless or I should do it compose a war API I think there's a bunch of stuff like probably the first 90% of stuff or 90% of websites that any of us are going to interact with really don't need that level of complexity but there'll be something that you have to do that will be so tricky or so like the functionality you're looking for will be a level of complexity where you'll just be like you know what this could be headless because before that point you can get away with a plugin or you can get away with a of the shelf solution but yeah there's a level of custom I suppose that you get into it's very hard to define that in a general way but I think it's going up into sort of the enterprise or you've just got a very large feature set or just like a feature complexity yeah go ahead how micro should you get I know within the sorry say that again how micro should you get within your technical architecture and with some purest of the micro service space you know go right down everything is an actionable message and then you build it up from there as a basis it's like you know we talked about different degrees I suppose about where you sit with a matter of micro skill what is it still very practical or are you looking for something I think that's these sorts of questions I think they're the things where and I think with headless everyone wants to ask the question like including us of like when's the right time to do this do that but that's a question that's really going to depend on the client and the budget because one client might have an appetite for spending a bit more in order to get a more focused end result focused is in focused on specifically the goals that they've got whereas a smaller client you know maybe isn't willing to go to that level of complexity or sort of in depth planning and it's just not going to make sense but I think basically you should go you know if you think of it as like one of those sort of tree diagrams or you've got one big thing at the top and then it sort of branches out I think you keep branching until you're getting to a point of you know it's too much for your team to manage too many you know services involved to keep track of or just diminishing returns for the complexity that you're adding in by adding those services any more questions oh my god does that mean I can get off stage now no is that everything awesome