 My name is Matt Cheney And I'm Mark And we're here to talk today about how you can use WordPress in a decoupled architecture to do a lot of really awesome things For those that are following along to this morning Mark And I released some github code and some information about the stuff we're working on and showing you So if you're interested in actually implementing your own Decoupled solution you can check out the github and build a really cool Mapping the mapping kind of decoupled thing we'll show later in the presentation But to kick it off I think we want to start with what has recently become my favorite plug-in in WordPress and hopefully one that you all know and Love it's called the world WP APS API plug-in. It's in version 2 and It allows basically the following to happen You can take your WordPress site just another random WordPress site and instead of having it look like that You can have it look fabulously like this You can see you see why this is sort of our favorite, right? Like but the the deal is is that this is JSON This is machine-consumable and you can do a lot of really powerful stuff with that So shout out to my vegan brother Mike Tyson who was Google image search for powerful came up And besides just Mike you can also do really awesome other decoupled solutions If you've seen the Calypso work that comes out This is using this kind of technology to do stuff that really wasn't possible before with Calypso You can have like a native OS X app that can talk to WordPress can do stuff with your WordPress site But doesn't actually run in a browser doesn't actually need to have that coupled connection Between each other and this is the kind of magic for exchanging information That really is going to allow a lot of really awesome use cases and hopefully you'll be inspired by some of them We'll show today Also super interesting and awesome is that all of this stuff is now currently a plug-in will be in WordPress Core 4.4 coming out relatively soon. Here's the commit message from Ryan Where he sort of pushes it in in October and thanks a lot of people who are involved in this process So just a quick shout out to them for that awesome work I think having this in core and having this to be a central part of the WordPress experience We'll really make a lot of people use it and have a really awesome time with it So yay to that So let's just get sort of started. We got some energy around all of this. It's going into core What's all the fuss? Why should I care? You know, is it really worth being here at 9 a.m. on Sunday? Like what do we think? Well, you're here Let's get going with this and I think to sort of explain sort of high-level the difference between Sort of maybe a traditional WordPress Solution like you're using today, which we're going to call sort of monolith approach and a sort of decoupled or micro service Solution which we have a double approach. We can sort of make this this distinction On one hand the model is system which is sort of a standard WordPress site today is a sort of whole if it All the things in one sort of sort of site and code base You might have some internal API to talk to things You might have some components that are sort of separated out in code via comments or files or plugins But it's all one thing and sort of works together in that sort of tightly coupled way On the other hand we have this decoupled solution which sort of it sort of you can understand as a micro service solution Where you have this very strict separation of concerns where the Individuable things that are doing the work to actually make your application or site real are Absolutely separate systems. They're often they're set in a separate version control systems And they talk to each other based on a very sort of specified protocol So you could have a sort of presentation layer. That's a JavaScript framework You can have WordPress on the back end with JSON and you could then integrate with other third-party services This isn't the most common way to build websites today But it's definitely a trend that we're seeing exist where more and more things are sort of popping up as Microservices that you can put together and that if you sort of want to build a site you can actually sort of do the different pieces this way strictly separate them and You know have one for presentation layer and one for your sort of business logic of your site Well wait, you might say like don't we already have this clear distinction in WordPress right now that we make our themes that have Presentation code and then we have our plugins in the core system that does the business logic I'd put to you that this sort of distinction here between the theme layer and the plugins is a sort of permeable boundary That you can do things in the theme that very much is about the changing the business logic of the site You can also do things in plugins that outputs HTML and changes the way the site looks And you know, I mean obviously for a best-practice kind of approach We're gonna want to try to keep ourselves in the right buckets But the reality is that like this border does shift a lot if you write code that makes the site work you might be just like cool with that and that you can sort of See the sort of you know problems here if you've ever had a site where you wanted to change the theme It's typically not as easy as just popping in a new theme if you've done significant custom development And so this leads to what my colleague Josh calls a awkward exciting game of twister where you have whoa individual Sort of problems where you're like stepping over each other when you're actually building and trying to work with the site And this makes people unhappy when they're working with it Especially if you're talking about inheriting someone else's site or going back to a pile of code that maybe you had written a year or two Years previous and you want to actually start to make changes because everything's really tightly coupled together That it's hard to sort of rip out one piece or you know Take take one thing and update it that you sort of are inheriting and working with that entire entire kind of thing And this is why sort of this decoupled approach We think does create this really clean separation of concerns that you're able to have WordPress just provide that JSON information and that that's the data and then you have the client that has the Presentation layer that actually renders it and makes it look and and function the way you want and this is sort of done through a sort of HTTP exchanging with JSON. There's a spec that defines how this works. It's pretty advanced back and it allows It allows things to talk to each other in a predictable and you know planable kind of way and this lets lots of really cool things happen things that we couldn't really do before So Terms of sort of some of these things I'd say the for me that this things that you can use the best the best tools to do the coolest things that front end Development is is is having a lot of innovation and a lot of really cool stuff happening and that instead of having to like you know Integrate it back into WordPress and have that all sort of function You can go out and use any of these experimental new kinds of JavaScript frameworks You can take advantage a lot of really cohesion my features and you can have this sort of holistic set of really awesome kind of kind of tools merged together and That's something that I think offers us a lot of a lot of capabilities when we also merge that with WordPress So there's a lot of really awesome functionality that these JavaScript frameworks will provide us But without that sort of structured back end that permission system a lot of that functionality WordPress is giving It's not as cool when we move them together really great stuff happens The other thing from a sort of development standpoint is that when we're actually Separating out the work when we have one set of tasks around creating custom post types and getting the content ready and getting the JSON flowing and we have another team that's actually taking that and like producing a theme presentation layer We can actually work and we can spec the work relatively cleanly between the different buckets of concerns We have and we can have people work in parallel And this allows typically larger teams to move faster and be able to sort of build spec build and test individual components as they sort of say sort of work Work together and that helps to speed up the development of projects and helps people people keep a little saner as developers Which we think is awesome We also think there's a some some security benefits to using a decoupled approach Your mileage will totally vary with this But the idea is that when you're sort of being very explicit about having you know The what you expose with JSON and that you're really limiting the surface area of the application that you're working with That you're sort of you know to attack surface for security problems is limited I mean you're still writing WordPress you still have you will have some of those normal kinds of things But you're intentionally saying we're gonna have read only for this stuff and the stuff that actually is right operations you sort of you sort of expose on a more intentional basis and I think that can help improve your security and there's in fact some decoupled approaches that we'll talk about including exporting to static sites They're gonna have really legitimate security benefits that'll help people keep keep great on the internet The other bit is that just having the ability to like have these different decoupled services that all can be sort of Developed in parallel also means they can be replaced on the fly that you can take you know Sort of that JSON feed and try to do it with another front end without actually interrupting your site work So doing a redesign ends up being nothing more than just swapping out sort of some javascript to make you know some CSS And that that allows you sort of as you go forward to keep little pieces around of functionality that work and integrate them with other Projects reuse them even if you're updating a design of a site or changing the back end And that kind of stuff is awesome because it lets you keep your stuff around longer get more mileage out of it. I Think we both be remiss sort of in terms of talking about benefits not do a little throat clearing around some of the sort of Caveats here around what we're doing that you can build awesome sites with this decoupled approach But it's not for everyone or every site that while you have a lot of these benefits There's also a lot of downfalls and we're you know, this is in the morning. We're pretty positive people We don't want to go too deep into this but One of the sort of major downfalls in terms of using a decoupled approach is that We're press actually does a ton of really cool stuff out of the box in a monolithic way that you get a lot of things like SEO plug-in Support to really make stuff work You get other kinds of things that will just sort of all work without a lot of extra time for you If you end up doing it a couple of approach you have to rebuild those kind of things You have to make sure your authentication works and stuff like this Which is which is possible and totally will work just requires you to do a do a little more And you sort of have to recreate the wheel in some cases I also think that like in general you probably will need a slightly larger team to sort of handle some of these decoupled architectures that you'll because you have different components you want to sort of tech lead on each of the different Components and that that sort of necessitates some more people totally something to do on your own if you want But I think sort of in terms of a larger kind of project you end up larger teams do better in this approach Also like this is stuff that is new like there's not a ton of really awesome patterns and examples to follow So if you're going down this path, you're gonna do a lot of experimentation on your own to figure stuff out And that's just something that I think actually think is a lot of fun But I just want to call that out there. It's not as established a path as sort of a more traditional theme development But this is something that's changing the industry We have a sizable percentage of sites that are using WordPress as sort of app framework That's taking those JSON API is actually doing application like like stuff with them This is only going to be increasing as we sort of see Holistically on the internet and I think that this offers like really great opportunities for people who are in this room Who are learning or know this technology to build new cool projects to take WordPress and the situations where it hadn't been before And to really build a lot of awesome kind of stuff much of which we'll show you show you show you today So that's sort of my ra ra kind of intro Let's talk specifically about sort of okay. We have this JSON API. We can take out a WordPress We have like the internet that has a lot of stuff we can use what kinds of decoupled solutions are possible So first up is sort of using a sort of static site as sort of our front end And then having WordPress sort of be the back end with some generation of Code that happens this is seeing a sort of mini renaissance with tools like Jekyll that allow us to basically use some Like dynamic stuff to store and edit our content but when they actually explored it for public consumptions just flat files and That's pretty cool because you can keep it real simple You can have like this really tight like looking good kind of site because you control the HTML Because it's just static files you have really great security benefits because you're not doing a lot of dynamic Or at all processing so you know you it's hard to hack a static kind of site And because it's sort of this read only from a performance and scalability standpoint not a big deal We can serve a ton of pages on a static on a static kind of site, and that's awesome That's a pretty good use case for for doing a decoupled approach read files on one hand Sort of WordPress that back end that you sort of export out Another option which is something I think that if you're like looking to get into this This is a cool way if you're working on existing site to try to play around with some of the the JSON API Is this is sort of what we're calling a hybrid approach? This is where you have sort of your traditional sort of WordPress site here on the right and that might be 90% of the functionality You've got a theme you've got your plugins You've got your functional site, but you've got a sort of JavaScript app that exists sort of as a as a sort of extra piece That could be some real-time chat as part of your forums that could be some data this tool That could be some media browser Whatever you want that you sort of as a section of your site you end up sort of jumping out of that traditional Sort of a sort of theme and you have your own JavaScript framework that'll render some stuff and do some really cool stuff And I think this is cool because it's sort of a way to have the best of both worlds where you can build some really awesome stuff Using a decoupled approach, but most your stuff is still traditional And this is a good way to sort of progressively enhance and some of your sites that can have some cool decoupled magic We also have you want to go whole hog here We have a sort of single page approach where we just have that client side like JavaScript load up one page And then we can sort of like very very fast switch between them That's because all of our assets are already loaded. We have that big JSON blob of information So we can filter in the browser with JavaScript We can display stuff with different parameters and we'll show some of this in just a minute But this is something that ends up having a really snappy front-end experience Which users absolutely like and allows you to do a lot of sort of really custom User interactions that may not previously have been possible because you don't have to wait for page refreshes And this is something which I think sort of when we talk about sort of decoupled development This may be sort of what people came into this room sort of thinking about Totally valid use case, but there are a bunch of other ones as well Sort of another use case that we'll highlight and I think is something that really does let WordPress go into other kinds of Spaces is actually building a sort of native Mobile app or some sort of other embedded device that'll actually consume the the JSON output from from your WordPress site But this is could be an iOS app or an Android app or something like this where you'll build all of your mobile stuff using your mobile Kind of development and then you actually will pull that information from a WordPress backend And that's great because you're already good and know a lot about WordPress It's easy to create that kind of thing and it's something that you could have a website on that WordPress site as well That's front-facing or it could be sort of entirely headless And just feed that mobile app Totally possible and then the last piece I would sort of close on in terms of options is sort of an opportunity to actually have two separate WordPresses Decoupled working together that WordPress sort of site number one is your is the data. It's the content It's the structure that you build all the business logic on your first WordPress site And then you spin up a second WordPress site that actually just consumes that JSON and actually does the presentation later And that might sound sort of crazy to have two sites But the important thing is that it provides an explicit technical boundary between the presentation later and the processing And that's something that can I think can be really helpful from a development standpoint I'd say none of this stuff is super is super is super new shockwave is doing this 10 years ago But the tools are better. There's more developers. There's a lot more innovation And so I think that you know this decoupled architecture makes a whole new web possible There's a lot of stuff that we can do with this that we could not do before and I think that's really awesome So I'll turn over to Mark to share some of the work he's done and run you through some actual examples Thanks Matt. Hmm. Is this thing on? All right So thanks for giving us the context and sort of this conceptual framework to deal with and so Usually when I go to these presentations the next question I have in my mind is okay This is all fine and good and I kind of get a handle on what this means conceptually But what does this mean? You know, what does this look like in the wild? So I'll take you really quickly through four projects and then I'll get into an example that just you know Sort of like a hello world kind of example that illustrates what you can do With this sort of decoupled architecture Just this all right. So This first one is a site for the author Haruki Murakami and Blucadet did this. This is WordPress on the back end Mixed with an AngularJS single-page app on the front end So again, it falls into that single-page app category Matt was talking about and what this allowed us to do was do a lot of complex animation and sort of interaction that You know, we tried to do this on the theme layer Strictly in WordPress and we just found in our prototyping that we really wanted to go a different route and get into a JavaScript framework to do it So that's definitely one option this second project is for James Ensar's the temptation of st. Anthony and it's that at it's a It's a piece of artwork and it's installed at the Art Institute of Chicago and Blucadet did a touch screen that allowed You to basically zoom in and really inspect the artwork without actually touching it with your hands So you're you're touching this Cinder C++ kiosk that's installed and so this is more along the lines of that app Internet of things sort of not even web anymore, but it's still using WordPress as the back end This is one of our recent projects. That's actually a on-site tour for the old Bethlehem steel mill and just you know, not too far from here in Bethlehem, Pennsylvania and this is a Web app built in AngularJS again but with WordPress on the back end providing all the data and so you're able to go and sort of take an audio tour, you know Get information about stops along the way but really it's WordPress on the back end that's powering this and So this last one this last project. I'm going to show you is a native iOS and Android application It's for an app that we did for Thomas Jefferson's Monticello estate and it's a this beacon Bluetooth LE driven experience you go out along this sort of like mile long mulberry row and you can Each time you hit a new sort of zone You get notifications that you can listen to content actual stories from slaves who worked along mulberry row Okay, so I'll get into a simple example, but I hope that gives you a little bit of an idea like You can do a lot with this decoupled architecture Across a very broad spectrum of things and if you come away with one one thing in your mind after this talk It should be I already have most of the things I need to build this You know of myself or on my team and it's not really a far stretch to get into this sort of development so simple example and All this stuff is on that the github repos that we posted earlier There's a slide at the end that'll give me more detail in a sec so WordPress CMS and this is a scaled-down version of Something that my colleague will who is here this morning is building right right this minute So not this literal minute, but he's he's in development for this And so I'm just going to show you a simple web page that consumes data from a WordPress CMS The CMS has a custom post type called artwork And I really wanted to illustrate how you can use the same data and represented in two ways so a list of teasers and you know putting on a map Driven by leaflet JS. So what we'll need are WordPress 4.3 and WPA PI v2 version 2 and advanced custom fields pro So I'm going to go through this but again all this stuff is on github so you can play with it later So first thing I do sanity check You enable the plug-in you click a few buttons and make sure your permalinks are working I am not exaggerating when I say that 90% or so of my grief with WordPress is with permalinks So make sure your permalinks are working and then you can visit your endpoint at slash WP Json W That's a whole mouthful slash posts. That's your endpoint. You got something like this and This is great because everything's already ready for use in JavaScript like how many people here remember doing this sort of thing with You know XML like soap or you know, if you were doing flash you maybe used like AMF that sort of thing. Yep. Yep. I I see you So this sort of thing is exciting to me because you used to have all this You know serialization layer all these concerns, but now all this stuff is ready for use in JavaScript. So Let's move on custom post types. You know, this stuff is fairly wrote So I'll just touch on it briefly But the things to note are that when you're setting up your arguments for your post type You have three things to look at sort of these attributes That you can set show in rest the rest base and the rest controller class and Showing rest is basically like yep show this in the API The rest base relates to your endpoint that you want to use so in this case It's just going to be artwork and the rest controller class is you know, the thing that actually handles processing these So I'm just using the default in this case And then use ACF to add these fields. So in my case, I'm adding an artist a description latitude and longitude And this should look familiar to most of you There are a couple of helper plugins that you'll want to note ACF to WP API just adds your ACF data to your JSON output And better rest API featured images. That is the longest plug-in name Actually gives you more than usually it just gives you a reference ID to your featured image But if you want the paths already in your JSON API right there use that plug-in Okay, so recipe grab JSON data Create an unordered list of artwork So teasers in a list thumbnail artwork name artist and description and then let's put this stuff on a map so Remember that endpoint that we set slash artwork. That's that's your output and So that's kind of hard to read But we've got all the regular post metadata and then we have the ACF metadata and featured image and metadata that will need With all the array keys that will need in JavaScript. So the HTML for this on the client side is actually really simple we've got a post list that we'll write to and a map div and Like I said leaflet JS and map box for the map links there follow those You can basically need map box an API key from them so you can get map tiles into your leaflet JS map so you've got You know a traditional Ajax load with a callback here You know, there's our endpoint. It's going to give us some data if it successfully goes through and You can build a list so loop through your data and This is gonna look a little messy because this is a really really bare bones But for each post I'm just building a post teaser which is a list item And so you see I've got my title my artist featured image and I'm appending that to my unordered list So this is actually what it's, you know, this is the structure that it's building semantically And again, there's that post list unordered list and I'm just appending to that with jQuery For the map portion, it's actually even simpler. I've got my lat long I'm pulling those out per post and I'm basically when making a Marker with leaflet Jets its API. It's really easy to do and then you can bind a pop-up so that shows up when you click and This is the actual this outside of the loop that is your callback from Ajax But this actually initializes the map and just pay attention to like the lat long that you want to center the map on and the API keys and app ID from map box so you get your tiles and This is what something like that could look like so I've got two links to toggle between my Two views on this data So this is my teaser view list view pretty traditional But we can also throw this on a map and so this is actual artwork, you know sculpture that's around Philadelphia and there's my Little pop-ups on that all right, so See that it's pretty simple. It's straightforward and you might be Asking yourself, what would you do if you took this to its logical conclusion? So I mentioned my teammate will before he's actually building something. That's a lot more full-fledged using riot.js Against a rest API built-in WordPress and so there's a hybrid setup kind of like what Matt was mentioning in the beginning And so I'll just show you a bit of this The beautiful thing here is that once you have all your data Representing your state and keeping your state clean and consistent is Super super easy so you can filter stuff You can basically pick in this case three separate views from a map to sort of like a thumbnail gallery to a list and Easily toggle around all this data You know you can jump to through an alphabetical list pretty easily all the data is already on the client So everything is really really snappy and You can filter so maybe you just want a question you just love horses and You know you can see how it filters it down to just the statues of white men on horses around Philly And You've got a map of these these sculptures Again, this is all driven by the same data set that WordPress is providing and The state you can see that URL bar if you can read it It's actually maintaining your state so you could actually go to that specific state in the application in this section And run through it so and again, I Just want to emphasize that we had all the tools already and we had all the skills on our team to be able to Build this it was just making that small leap to say what parts of our application are better done Using another tool, you know instead of tying ourselves into knots trying to do this within the theme layer of WordPress what things could we abstract out and You know just do with a tool that's better suited to doing this sort of stuff So again the best tool to do the coolest things like Matt was saying So again Supporting material is up on a blog post that Matt and I put up on my site Get hub repos for the example are there and I spent two hours writing the read me for Each of those things for both the WordPress side and the example side So definitely check those out and find us on Twitter if you have questions about those things And we also had some links to additional materials So sort of those pros and cons and caveats that Matt was talking about We have some links for more reading and research on that blog post And again, thank you all for being here this early Thanks, you know on behalf of Matt and myself. Thank you again for being here So I think we can take about two questions and after those we'll just meet you out in the hall to you know talk to you further Oh, yeah, Mike is in the center if you actually need to Ask a question Don't answer her question. No Good morning You mentioned that you want to completely decouple the theme layer and in your example, you had everything being appended in JavaScript Is there any Is that a better way to go or would there be performance gains and perhaps having HTML templates that you then inserted the JavaScript into You can actually yeah, definitely do it both ways In some cases the upfront performance hit of getting this stuff and you know render it and using js Might be worth it if you get faster response later on We've also Done the other scenarios where we kind of just mix it into stuff that's re you know rendered By wordpress templates, you know, I think it's completely valid to explore What makes most sense for your application? The other thing I'll say is like You know one of the bigger issues that I'm thinking about is how to get all this stuff rendered on the server for that first Payload and I think that's something that folks on the react side as well as ember are really exploring You know how to get server-side rendering for that first For that first payload so you mix performance gains from you know server traditional server architectures with Sort of like the faster response once you have all your JavaScript I kind of think of that server-side rendering as this sort of like stage one booster rocket For a trip to space and I really hope to see more development come out of that Thank you Thanks guys great great talk. I have a question. I saw the plug-in link you gave for the WP REST API was for version one and then the demo you gave was for version two Which I know is still in beta, but My question is if you were to start a project today Would you recommend someone start that project using version two of the REST API or would you recommend they use version one? I am going off of what the v2 Documentation this or actually when you go to v1 it says hey, this is Deprecated you should use v2. So I would use v2 um You know the elephant in the room is 4.4 is like You know days or weeks away and it'll have a lot of this stuff built in So I don't even know I just know like there's there's other REST API plugins as well that you can use and some of the things that I showed were built with This other plugin called json api and I have links to that in my blog post. So to me it almost Not that it doesn't matter, but They all kind of do the job for some of the use cases that we we did at blue cadet And I think it's really just balancing like how Much future-looking maintenance are you looking to do on a project? How long is your project going to live? I think that'll drive the decision More so than sort of like technical minutia Thank you. Thanks. All right. Thank you everyone