 These notes are actually available on GitHub if you want to get involved and actually check this demo out for yourself And I'm going to change the link to that now. Yep So I'm going to jump in a little bit down here and I'll just explain briefly before I actually get into the demonstration what Druck's is and Druck's is a bridge between two frameworks with Drupal is a back-end and NUXJS as a front-end So I'm not going to cover over too much what Drupal is today because I somewhat expect that The majority of the people here understand Drupal and have at least use it in some way But NUXJS is a front-end framework similar to Drupal in That it is quite modular Let me just change. I'm looking at Brian's face during all of this So I'm going to pin myself. Okay, great. So Druck's JS is a framework between both of these two other frameworks And I am just going to jump in to Drupal. So I've set up a Drupal 9 installation with the Umami demo install profile and I've installed or I've downloaded Two modules the Druck's JS module, which is available on Drupal.org And the JSON API views module So I'm just going to go ahead and enable these two modules at the moment We are just looking at a standard install nothing has yet been done so we'll install these two and Then I am going to go and configure that So this will just take a second Now do feel free to jump in when I am clearly not talking. That's fine Okay, so anyone's thinking but not asking the question. This also works with Drupal 8. Yes, this works with any Drupal 8 Point 8 above I believe code base and the the Druck's JS module that's being installed it simply adds a permission and A couple workarounds for some things that the Drupal JSON API doesn't do so The permission that it adds is here access Druck's JSON API resources and this can be applied to any role that you have We're going to use anonymous here because if you were to Use any of the other roles you would actually have to go and set up a wealth to We have not got that ready for demo But that is available. So we're just going to go ahead and Save that there and now we're actually done with everything that I'm going to do in Drupal I'll just drop you back here so you can actually see This is the content of the demo you mommy page All right, so I'm just going to swap over now to Nuxt.js. I've pre-prepared some stuff here as well So this is our Nuxt.js installation and we just have a couple packages Ready to go and an empty configuration file. So I'm going to jump into there. I'll also show you here We have an empty pages directory and a node modules Directory and that's it. That's our code base So I'm just going to grab some pre-prepared configuration here and we're going to drop that in place now this is Nuxt.js configuration and What it's doing as it's installing two modules into our Nuxt.js code base the Nuxt.js proxy module Which simply handles proxying any of Drupal's files back to the back end and the drugs module So we just need to go ahead and grab our base URL here Drop that into the configuration and now everything Nuxt has done So fingers crossed we're going to execute our Nuxt command and that's going to start building our front-end So we come across here and you can see Nuxt.js is doing what it needs to do and it's starting to build our bundles and Here we go. We have a Druxt.js Demonstration site up and running and you can see straight away that we have content being displayed So if we jump back across here explore recipes across every type of occasion ingredient and skill level and for entities being displayed one after another So I'm just going to jump across to here and Give you a bit of a walkthrough of what's actually going on here now So on the right here, we have the view developer tools and this allows us to see All of the view.js components that currently being rendered to this page that we haven't really done anything other than drop in a configuration file So looking at the roots the most the first item We want to have a look at is our layout file here and this is a layout component that the Nuxt.js Module has put in place for us Sorry, the Nuxt.js application Followed by the Nuxt component itself from there Druxt has installed a wildcard router. So any requests to this application will If it does not resolve to a page in Nuxt It will fall back to this wildcard router And what this router does is it goes off and it hits Drupal's decoupled router, which is a requirement of the Druxt.js Drupal module And it asks Drupal what we're looking at at this path. So in this case, we're looking at a Druxt view Which is provided by The json api views module And it is the front page page one view so we step in Here to the Druxt view component and this is provided by the Druxt views module And that's provided that information that the Druxt router has gathered for us But in addition to that it also contains all the results for that particular view as json api resources So we can have a look in here and we can see This is one of the entities that's being rendered here In addition to that it also has the Drupal view json api resource Which contains information such as The display options for page one which has our header area And our content so if you're familiar with Drupal development You'll recognize the format here format full html value and there's some markup and that's being provided by The view itself. I haven't done anything to any of the view configuration in Drupal This is just as per umami so The next thing the Druxt view component does is it iterates over all of those results and renders them out So in this case, it's rendering out four Druxt entities And each one of these entities contains the data that view the Druxt view component has passed to it Including information such as the type of resource being a node recipe The uuid and the display mode. So As well as that and the entity information It takes that display mode and it loads in a schema file And that's provided by the Druxt schema module and this file contains all of the information that's available That Drupal has said It needs to display this particular display mode So we can see that there's one field here, which is the field media image And this is to be displayed as a responsive three by two view mode so We step in here And that's been passed through so it's iterated over all of those fields and we now have our Druxt field component, which is As per Druxt entity is provided by the Druxt entity module So this component contains the specific items that it will be rendering And In this case, it is a entity reference So it contains the type of resource and the uuid for that particular resource and it also contains Just the targeted schema information for this current field. So we'll step in there and We're actually resolving here to a targeted component for This type of field which is again provided with the Druxt entity module It is the Druxt field entity reference entity view Component and that takes that information and then it in turn passes to Druxt entity again Because this is an entity reference and that in turn to another field and finally to our Finally resolved field that renders the actual markup of this item here So that's the primary demo Because I think that covers the majority of what this tool is there is a lot more I can show Like Murray said, there's there's actually too much to talk about in a single session But I will go ahead and I will jump to something that we've Pre-prepared earlier So I can explain a little bit about the theming system So I'm just going to go ahead and add the Druxt theme umami bootstrap module And I'm just going to kill this process for a second. I'm also going to go ahead and grab a layout That I have pre set up for you and we'll drop that in here And assuming everything is all good. I am just going to run mpx next again and we'll reload that We'll actually jump in here and we'll reload this Fingers crossed Okay, there we go So this is a more fleshed out Demonstration of what you can do with Druxt js So I'll walk you through a few of the changes that have happened here So in this case the layout is our own components Which I can take you through the actual code of shortly But I'll walk through it. So we're using the bootstrap view module inside of the Druxt theme umami bootstrap module and it Is wrapping our block region up the top here. So Druxt block region component Which is provided by the Druxt block module and what it does is it goes off to Drupal's json api and it says for the header region With the umami theme configuration in Drupal What blocks do we have for this particular path? And that returns This block and this other block which actually isn't showing but There are reasons for that. I can demonstrate that a little bit later if need be And that's done for multiple block regions in the page. So We now have a more feature complete site that's being Powered by Drupal itself. So we have Blocks view blocks a view of Entities a view of items and another couple blocks down here We can click into one of our entities here and we see That was a relatively fast experience Our breadcrumbs are not currently rendering, but you know, what's a demo without a couple issues? So if we had a breadcrumbs, I could demonstrate The speed of Actually going back and forth a piece of content that has already actually been rendered Because as this is a this is running on nux.js. We take advantage of all of the internal navigation and And we have a lot of our content Precached in a view x store So as we navigate through the site We can see all of the schemas that have been lazy loaded in as well as all of our Routes that we have currently hit All of the entities that have currently been loaded in So I think I'll leave the demo there