 So site preview, and I'm calling it the holy grail because typically this is not the best thing in Drupal and heaps of people solve it in a lot of different ways and today I'll be walking through some of those. So I'm Sean, I'm a technical account manager at Acquia and you can feel free to harass me on Twitter, stalk me on my blog. I'll be putting a follow-up post on there so you can leave comments and make it anonymous. And the slides are bitly Drupal South site preview, so that's a bit easier than the Google Docs URL if you want to bring them up. So the first thing I'll go through is what is site preview and essentially what I'm going to be talking about here. So I couldn't really find a definition so I may win out. So the ability to see and have selected other people, see changes to your content before the general public can see them. And typically this is used for a number of roles but you might have a legal department and you might be publishing something that involves words that are legal and you might want them to tick the box and say, yeah, that's great. You might have a very important announcement that the Minister might want to see, like I don't know, see the budget 2015 and maybe they want to sign off that whole section prior to putting it live. So I'll be having a chat about what options are out there, what can be used today. I'll be going through this new module which just released this week that does things kind of completely differently. And I'll get you to raise your hands, you know, and the little guy will be a little helper because I'm just keen to see what you guys actually use already, if anything. So I mentioned this purely for completeness but does anyone actually use the Drupal 7 built-in preview button? Right, because traditionally it sucked and I think WebChick kind of touched on this in a keynote was it's not really kind of what the content author expects. Yeah, yeah. So it's normally sits right there next to save and delete and it kind of just lies to you. So you press it and you go, ah, I just done this brand new page, just have a look and you get this and you're like, ah, sweet, what's that? And when you click save, you get this. You're like, ah, that's what it looks like, you know, ah, okay, sweet. So, yeah, that's not cool. And there's actually a setting in Drupal's UI in the editing the content type. And if you can just tick the top radio button, that's going to be the best solution here because it actually hides that button. If you want to be a little bit, mix it up a little bit, you can leave it on optional, you know, and I think Drupal defaults to this, which is great. And, you know, if you want to live in a special place, then you can force people to use it. The first actual preview system I'll be talking about is called SPS or Site Preview System. Has anyone heard of this before? Awesome, couple. Right, so funded by LSD. You won't see that too often. So LSD or Large Scale Drupal is an aquia kind of organised thing, but basically a bunch of partners contribute their time and money into this pool that LSD solves problems with, that all these people have. I love this. So good. So one of the things they came across was this problem, like Site Preview. So SPS works on a revision level and it only works with a couple of entities by default. So we're talking nodes and beans and you can create collections of these revisions and you can actually preview the collection of the revisions together. And it's actually the most widely used module I'm going to be talking about today. It's going to be the whopping 39 sites reporting that they use it. But in saying that, these 39 sites are probably quite large and probably have very unique requirements. Not every site's made the same. And it actually told me, oh, you need this core patch. I'm like, oh, yeah, right. I don't need no core patch. Yeah, they're not lying. So do that. And this is kind of a rough workflow. You go about creating a collection. It's a new thing hidden in the structure section. And you can create as many of these as you want. And they just go into this kind of pile of your existing collections. And here you can see my Budget 2015 collection. And in order to associate your content with the collection, you use a field. And it's a module called Collection Field, which sits underneath Collection. And that exposes a little widget, which lets you have a dropdown to say, oh, yeah, this page, this revision of this page is associated to Budget 2015. And coupled with this other module called Interactive Information Bar, or IID, you can actually, that's a nav bar module on the top there. And you can actually, on the top right, little dropdown there. And you can actually go, I want to see a condition where it's a collection. And the collection is Budget 2015. And when you initiate that, you'll see, for better or worse, I've only made my mind up, but you'll see a green border around things that weren't there before or have changed. And just to indicate to the user that, hey, this is you. This is not actually on the live site. And there, that was kind of my first reaction. I was like, plug in all these modules together. There's no way this is going to work. This is on top of Agave as well, so there's like a ton of modules on the site. And it worked out pretty good. Probably should have had a man for that. So it has some limitations. You can't link to a page on a site collection. It actually is session-based. So it relies on you having to log in manually in the dropdown and select the collection and then manually view the page. If your site has lots of Search API or Apache Solar, it ain't going to help you with that because the content still isn't published. So it's still not going to be in your Solar Index. And in order to preview it, you need to be logged in. So if you're sending it off to Legal and Legal's like, click on it and they've got access denied. That's pretty much what's going to happen. Okay, what? How do I do this? And if someone updates a piece of content in the collection, then you actually need to jump out of the preview and back in again in order for any changes to actually be there. So that was a bit weird. And your content still renders as if it is unpublished, which I also thought to be quite weird. So your design gets pushed out. So you can't really sign off your content exactly how it would be on the actual published live site. I guess you could theme that so it was the same. But best fit, if you're using entities, entities for everything with revisioning, you're using either Workbench Moderation or State Machine. Just as a quick headcount here, does anyone use Workbench Moderation? What about the other one, State Machine? All right, yeah. That's cool, Workbench Moderation. And it really works well if the people signing off your content already use Drupal. If you're trying to sort of ram this new flow down their face, then they're probably not going to like it. And you're going to need a bit of ram, you know. So make sure your web servers are up to the task. It's seven plus modules. The plus means that you can actually install more in Hydro Soldier 7. So number two is CPS or the content preview system. And yes, there are lots of three-letter acronyms. In this presentation. Has anyone heard of CPS before? Very good. Probably because it's quite new. But you've heard of these two guys, right? So catch for Nathaniel is a Drupal 8 core maintainer. Millen of Chaos is the guy who wrote views. Yes, kind of a big deal. They only just started work late last year. So I actually demoed some really bleeding edge devs, not even Alpha code. And it actually rips out Drupal revisioning, replaces it. And introduces this new concept of a site version, where you only have one revision per site version. And so you have this concept of a live site version and every change you make can be in another version. And then you can elect to make this other version live. Needs to be entities. Yeah, revisionable entities. So most of the previous systems I'll be going through will rely on this. And it will actually hook into views and entity field query and alter the SQL so that they just work. And yeah. So I took a bit of a gamble, gave it a go, his ass just codes, his rocket. So quite similar to SPS, SPS has a concept of site version, which you can go ahead creating unlimited of these. You can see a list of them. You can switch to them using IIB, the interactive information bar. The theming sucks a bit, so you can tell it's still coming along. But here's an example. This was the live site version. And then what I did was I actually swapped over to a new site version and created a new slide. So this is the Budget 2015 edition. And you can see there's a fourth item in the carousel and it's to do with the budget. But the cool thing here is it's not been rendered as if it's unpublished. It gets rendered as if it is published and this is exactly what the end result will be. As soon as that revision, this site version is actually made live. So that was kind of really neat. This one you actually need to see the interactive information bar and say, oh yeah, that's right. I'm actually in the Budget 2015 version. It has a lot of limitations at the moment. Still in active development, it actually shows. I got a lot of PHP errors, so I just avoided those little parts of the site. You can have a bad time if you use Workbench Moderation, but you actually don't need to use it as much as you think because you can publish the content as long as you're in the context of the site version. Again, you must be logged in, hasn't solved that problem. A lot of these systems will have problems with things that are not entities, so menu links. I actually found out from someone else here at Drupal South there's a module called entity menu links. I have no idea if it's a great idea or a bad idea. Probably bad. Best fit. We don't really need a review state and yeah. You can just use publish and not publish. There's no need for the collection suite or modules as this is actually covered in its own entity, and it doesn't push out your design, so it gets rendered as if it's published. The nice cool thing here is the site state is saved in the URL, which means you can send a link to a site version on a particular page to someone else. They can click on that. They'll see the correct thing. It's getting one step closer. Zara's. Zara's. Anyone heard of Zara's? I just found all these things. All these crazy suites and modules. This completely turns the model on its head and decides to model everything like it's Git for better or worse. It uses organic groups, again, for better or worse, to emulate branches. For every entity on a branch that you merge, it creates another entity by cloning it. It actually will mess up all your entity field queries unless you do tagging and adding metadata, so there will be a lot of code changes to actually pull this in to an existing site. Probably as a result, only two sites use it, which wasn't really surprising. It's got one guy doing it for anything in three months, so a few concerning items there. This is kind of my original thoughts when I came across this. The guy in the previous presentation said, I'll regex as I can to this. Actually, I think organic groups. Personally, I don't really like OG. I tried it with Agave. It didn't work. I tried it with SimplyTest.me. They actually provide a demo install, so I gave that a whirl. Here you can see the end result. You've got branches, you've got content. Content belongs on a branch, but you can't tell from the screen what branch the content's on. You have, for instance, this one here twice because it's on two branches. Instead of using IIB, it decides to stick its own stuff into the page, so here you can see we're currently on this branch and we can merge it to live. We can actually branch from this branch, make more organic groups. Again, it doesn't work with Werbings Moderation. It feels pretty super alpha, even more so than CPS. Cloning nodes forever. Doesn't sound like a good idea. Doesn't sound very scalable. You might end up with a lot of duplicate content in your database. It clones them, so old one, new one, they increment. Merging branches doesn't clean up any old branches, so you have a lot of stale branches lying around with stale content. So it doesn't sound very fun. I need a lot of modules. You're going to get any of this stuff working. In case your life wasn't hard enough already. You can have merge conflicts in content, in my life. So I guess the best fit is when you're not scared of lots of nodes and you happen to have a passion for OG. I don't. This cropped up, someone posted this module and some random Drupal to Org thread called Live Preview. Has anyone heard of Live Preview? Me either, two or a week ago. So all this module does is add a singular button to the node add or edit form that opens up a live JavaScript-based preview. It's got a few sites using it. And it is also relatively new, so it's a good sign. The main thing where I like this is it's got no dependencies. So there's no dependency nightmare to work out. And it just does this one change. So here we have a little button on the top of the title field called Live Preview. You hit that. And what it does is bring up on a little overlay on top your content edit screen on the left and your site theme on the right. So it's definitely better than Drupal Core because this is the right theme. The title's in the right place. The content's in the right place. The breadcrumb is correct. So it does a lot of stuff kind of neat. And if you update anything on the left-hand pane, then you'll see it update on the right-hand pane. And when you're done, you just go close and it takes you back to the edit form. It has a few limitations. It's only through JavaScript. So you certainly can't send any links to anyone else. You can do screenshots, but sending screenshots for sign-off is painful. They haven't really integrated nav bar before clearly because it actually, all the buttons that are underneath nav bar, which kind of sucked. It doesn't use Drupal view modes, which means that the preview is hidden miss and it will render as if the content is in the current state it's presently in. So if you haven't yet published it, it's going to be rendered unpublished. Works best if you don't have any complicated fields. If you've just got title and body, perfect. And you just want to get a quick preview. Like, for instance, you want to check out how the responsiveness works before you click save. And because it doesn't interact with any access control, doesn't screw with any revisioning systems, you can stick on any workflow system on top of this, or none, whatever be the case. Right. So number four, preview sync. So this is the new module that we actually open-sourced this week. It was actually initially built for the Ministry of Health in New Zealand. So I have to give them kudos for first of all allowing me to do this. And I guess for secondly for paying for the work, which is pretty cool. So I'll take you through the story on why this was important for them and why all the existing solutions didn't really cover their needs. So Ministry of Health New Zealand, probably like the health department here, is massive and we've got large amount of distributed teams. So they've got district health boards around the country. And they've got lots of internal teams. Not only that but they've got legal sign-offs as well and things you have to be quite careful about like press releases. And they didn't want to sign off one bit of content at a time. They wanted to sign off a section of content, 20 pages. And their site's largely powered by solar so they needed to be able to preview what the Apache Solar Index is going to be like. And so key landing pages would work. And the people that they wanted to sign the content off didn't necessarily have logins. And the web team didn't necessarily want to give them logins. Which I agree. And the solution was literally dreamt up by the project manager, which was kind of hilarious and scary at the same time. And so he literally came to work and said, hey, let's just do this by syncing it to a whole other environment. And we're like, that's crazy talk. And the more we thought about it, the more it kind of made sense. So this is roughly how it works. As you have your content authors happy authoring away on your production website. And then they can initiate what's called a preview sync through a special administration screen. Which then using, I guess, Drush, it will then sync the environment to a special preview environment. And that's where your approvers can come in and say, hey, what does that page look like? How does it work on my mobile phone? And I typically would recommend just locking the absolute, not everything out of the preview environment. So it's actually restricted by IP. So only they can get it from the corporate network. And by default, a single preview sync, I guess, thing would involve 11 tasks by default. And some of these tasks are optional. And it's important to note that this task list is completely alterable. So if you don't want to do a task or you want to insert a new task into it, it can be altered. And you notice that all the tasks are just Drush commands. So the first one, you know, async the files. Second one, dump the database. Third, drop the preview database. Not your production database. You've got to be quite careful about these things. So version one, so it's actually gone through a complete rewrite already. So version one, use the batch API and everyone's favourite PHP exec. And it worked for a while. And then the database got bigger and bigger and bigger. And then single tasks were actually causing batch API to freak out. And so the solution and temporarily was, hey, let's just increase the web time out to 120 seconds. What could go wrong, they said. As anyone had this problem, you've got a batch API process that's really super important. And your content authors click home. That screws up batch API. Don't do that. And the person who initiated the preview sync was the only person who had visibility on the progress of that preview sync. And we actually had a problem where other content authors were trying to kick it off and it was fighting each other. So that was kind of fun as well. So version two, I got tasked this challenge to, I guess, rewrite it from the ground up. And the first thing I did was made tuned database dumps. So the preview environment does not need every single table in every single row. So using Drush is an option called structured data tables. Which allows you just to jump dump the structure but not the content. So all the cache tables, for instance, are a good candidate for not dumping. You don't really need to see your webform submissions on the preview site. So cull them. All things built with Drush aliases now. Which is pretty neat. I also split up SQL sync into the two corresponding parts just so you had more visibility on how that process worked. And instead of batch API we're now using the Drupal Q which means that we can run Drush in the background to process the Q which means that the administration screen is no longer blocking and it also means that anyone can view the administration screen and see what the current progress is. And for fun the administration screen will also update via Ajax so I thought I'd give a go at a live demo because that sounded fun at the time. So I'll just walk you through hopefully if I can make this a bit bigger. Anyone kind of read that? So this is the preview sync administration screen and here you can see that the current sync status is idle so there's not one presently running. You can also see and you probably see this error a lot in Drupal land and this is what happens when you visit a Drupal site and the database isn't there. Good times. So it's basically doing a Drush core status command to the preview environment and actually piping this into the administration screen and you can see the database don't file. It just needs to be writable because it's actually going to try to write a database of that and if you can't write so you have a bad time. So what I'll do here is I'll just see it. There's a lot of articles sitting in in a needs review state. Here's one. A bit old new CEO announced i.e. the kind of thing you definitely want to have and barcode and signed off and everybody happy with the content prior to go live. You can see it's unpublished. We can see it's also in needs review and what you do is you hit synchronised preview and this will take you to an intermediate confirmation screen and you have the option if you want to either re-index solar or not. I made it optional because it does add a lot of time to your preview process that you may not necessarily want to do and for the purposes of the demo I'm just going to skip over it. So what you can see here is the preview sync status is currently active. You can see the seven tasks in the queue. So I definitely invite people to fix that. You can see that this is actually updating every five seconds and you can also see that it's not currently running and that's because I haven't kicked off the preview sync worker. So this is all funded in the background by this worker that every ten seconds it asks Drupal, hey, is there anything for me to do? If it finds something to do and it does it. If it doesn't it goes to sleep for ten seconds and tries again and then it'll do that 17 times and then die. So I guess every three minutes you could have this worker on Chrome. So when I actually start up the worker you can see that A is finding stuff in the queue, B the admin UI now has something a bit more exciting and you can actually see it progressing through the tasks. Green means good. That's a pretty sweet CSS transition there. So we'll just wait for this to complete. Only updates every five seconds but you can kind of get an idea by tailing the log and seeing the UI. I personally find the log more exciting but I mean you guys will probably like the UI and here you go. So now the preview sync has done. We're back in the idle state. You can see that we now see a core status that you can actually bootstrap the preview environments. And critically for Ministry of Health they really need to know when was the last preview done and who did it and how long did that take. And all its command line stuff you saw earlier is actually all captured in a custom log file with views integration so you can actually see how long the environment switch task was last time. And what you didn't see in the demo was it actually for each task it would tell you how long each one is estimated to take based on the last 10 runs. So now we can bring up the preview environment which is also a local host which is pretty handy and if I go down to the new section you can see the content in the needs review state is all published on the previous site only and you can actually see the new CEO announcement and this is exactly what the content is going to look like when you hit the publish button on the production site. Without the critical thing is you can actually get your mobile phone out you can bring this up probably not the local host one so the people signing it off can get a full experience not just a rubbish desktop version but a no longer desktop first. So this method does require an independent site so it could be on the same physical servers or not depending on architecture and the preview environment can be spec'd accordingly so there's no need to spin up a cluster of these massive Amazon instances you can get away with a single web server a single database server maybe on the same physical machine because the grand total of work it does is maybe a couple of people of content approvers clicking around there's not too much for it to do so how they typically sign off a whole section is I'll get approval first and using a module called workbench scheduler or scheduler workbench I forget which way that goes around but you can schedule your content to go live at the same time as the other content that's related it seems a bit hacky and I'm going to go through a more elegant solution to that shortly that hasn't been done so here's my just in case it didn't work slides this is actually quite interesting though because has anyone used the Drupal queue system before it's as soon as your item is processed out of the queue it goes from the queue so I wanted to have this I guess the list of tasks not only that are coming up but also that have already run so the custom logs feeds into the first part of it and the queue feeds into the second part and the only reason why you can know an item is actually in processing in the queue is it actually when you take an item out of the queue you have a lock or an exclusive access to that for a certain amount of time and that's heina so it's a bit of a hack but it works alright integrations so if you love Drush and Drush aliases this is good for you the environment module I really like it, I think everyone should use it the main reason why this is kind of cool here is that when you sync to a preview environment there's a Drush command called environment switch which lets you do things like for instance you might want to turn on reroute email so that you're not spamming people with links to your preview environment you might also decide to blow away all the user passwords on preview because you don't want people to log in on that environment views is required I don't think that's a bad thing workbench moderation is optional but there is integration with it out of the box but if you don't have it running and you just won't publish your content that's all Apache solar again optional if you have it it will do more things if you don't it doesn't matter and it also has PHP process control integration so because it's such a long running task background if you hit control C it just keeps going so this is actually quite a neat thing that lets you interrupt and catch flags like sigterm and do things like stop running so it's pretty handy I also found out it doesn't ship compiled into mac PHP which kind of sucks but it's compiled into Ubuntu so that's way better limitations you kind of do one at one time if you go there and it's already running you'll see essentially the same administration screen it actually scales quite linearly with content so the larger your database gets the longer this will take so I think Ministry of Health 100,000 nodes this whole process took about 2 minutes without solar is a quick question how long do you think it takes to index 100,000 nodes in Apache solar about 15 minutes so preview for them is either 2 or 17 minutes it's pretty much the same and if you want to preview layout changes this is where it gets a bit trickier so you need to tie your layout to your content so if you have for instance a field on your node called what layout option do you want 2 column or 3 column then you'll need to make sure that's actually a field on the node and I'd love to integrate with collections I think that's going to be a much nicer way to do this rather than just bog publishing everything it needs review instead of you just assign a revision to a collection and then you can preview the budget to a 1.5 collection best fit I think if you have a large organisation with many stakeholders and you're quite security conscious you don't really want to go hacking into the internals in Drupal or messing with access control and quite lightweight so this only has impacts if you're viewing the administration screen it won't actually impact the day-to-day workings and if you have access to spin-up infrastructure then obviously there's going to be a better solution for you and the code sprints on tomorrow so hey if you guys are bored I might want some things to do so I'd love to integrate IIB into preview sync so that when you're viewing a page you could quickly toggle between the preview version and the live version that'd be quite nice and if the preview sync was currently running a sexy little progress bar would be even nicer I mentioned that already collection integration but also I was actually thinking about if you've got collections integration how hard would it be to have pluggable preview environments so that you could have a budget 2.015 preview and a a reorg of the about section preview it might be 2.0 over the top I don't know and my only slides on Drupal 8 Drupal 8 has anyone seen what Drupal 8 does I guess you saw webchicks keynote sitting my thunder so the button is still there someone and I actually dug this out but when Angie first saw Drupal 8's preview system yeah I was actually kind of like this is screw web services all right completely amazing so she was actually really taken back by this and here's the reason why I found a theme this is a terrible theme called Mayo but it demonstrates what I wanted to do which is when you click preview this is actually a preview page for a not published version and you can see because of this little thing at the top view mode default which means the full view and this has actually been rendered exactly as if it would be if you click save another cool thing which is not really a site preview but it's kind of related is is the inline edit functionality which I think is kind of awesome and scary at the same time as well so to sum it all up I'd love to see a module called death the core preview I think that'd be a great addition to the Drupal community and all that does is set the preview button from everything all the time I also think workbench moderation is gaining a lot of popularity gain a lot of traction so if the published tick box isn't enough to satisfy your requirements I think workbench moderation represents the best path forward and you just pick a preview method that suits you I actually saw a talk earlier today with Michael Godic who talked about having a similar setup but instead of having a production environment synced into a preview environment you had a content staging environment that's synced to production so you can mix it up and I'd be deftly keen to see if you guys want to give it a whirl on the Drupal.org page for preview sync there is a YouTube video which is basically what it showed you but I might have explained things a bit better but I'm deftly keen for people to give it a go and let me know if it works what features you want what's stopping you from using it what do you need, what's a deal breaker questions ask me almost anything so in workbench moderation so you've got two revisions an old one and a live one if you click revert to the old one it creates a third revision which you can then put a needs review and then you can do the preview sync so with workbench moderation you never alter the history or forever adding to the history at the moment yes but when you install workbench moderation it gives you that state so I didn't think it was too bad but there's a slash slash to do in the code it'd be nice to I guess make that configurable we should talk I'm deftly keen if you guys have a use case so if you want to talk to me after this and just tell me your problem and then I can tell you whether this or even would fit or whether it would need to enhance it and tomorrow I'll be at the code sprint and I'll probably be working on this so if you want to get set up with a local dev environment then I can help out doing that as well and that's it thank you