DruxtJS; An introduction to decoupling with Nuxt and Drupal

hi gibralgov i'm brian gilbert the founder of reality leap a melbourne-based drupal development shop i've worn many hats in my dribble journey module developer core contributor community lead event organizer trainer and more today i'll be playing the part of an interviewer i have with me stuart can you please introduce yourself and tell us what you'll be talking about hi i'm stuart clark i'm the lead developer at reality loop i am a decoupled drupal and vue.js developer and i'm the creator of truckst today i'm going to show you how to decouple drupal using nux.js and the drugst site module but before we get into that could you quickly cover off what decoupling is decoupling is the process of separating your presentation layer or your front end from your content management system your backend in this case drupal okay so using drupal more as a content repository yeah and why would i want to do that you might want to do it for multiple reasons i think one of the most important reasons is that your content can power more than a single site you can have your public website but in addition to that you may have an intranet and multiple campaign sites native applications voice assistance the theming experience php is a great language but front-end development and developers tend to prefer a javascript based language for the reactivity and component based languages like vue.js so decoupling gives us more options and allows developers to work the way they prefer making it easier to find developers why isn't everyone decoupling there are valid reasons why not to do it and i think one of those is the complexity when we first started decoupling our websites there was a lot that had to be be reinvented so you know that's also where drugs js comes in how would we go about decoupling with drupal it's relatively simple both drupal 8 and 9 come with the json api module which does the majority of the work we're also going to be using the json api views module and the drugs js module which simplifies some of the setup process the drugs module also provides a read-only permission that allows you to control who has access to all of the required json api resources what does the json api module give us the json api module provides a way for a front end or a json api client to consume the site's content as well as some configuration in a standardized format what do we have to do to start on our front end for the front end we're going to use nuxt much like drupal is a php framework for your back end nux provides you with all the things that you want for a modern vue.js site are you installing drug site here drugs is a is a modular framework it allows us to build lots of things using drupal's content and drupal's configuration drug site is more focused it's about providing that out of the box front end experience so i'll jump into the configuration if we open up the nux config file all i need to do is add the drup site module and our drugs configuration which is just the base url the domain for our back end we'll also go ahead and set up the nux proxy so that our images will work correctly and lastly i just need to set the components directory to global for drugst's theming system and that's it i'll spin that up and we can take a look here at our next application and that's building the bundles required to serve up our front end and where's this page come from if we just jump across you can see here is the index page and that's being served via nuxed not via drupal so we could create files here if we wanted to have one-off campaigns or standalone applications that were alongside the site yeah this demo here we don't need that so we'll just go ahead and delete that now we can see content from the drupal backend could you explain what's going on internally i think the best way to do that is if i open up the view developer tools we have a layout provided by nux it's layout system which allows us to wrap the entire application with the required markup so it's kind of like page tpl in drupal yeah if we step through we can then see our drugstore component it communicates with the decoupled router in the back end to determine what this particular page should be rendering so in this case we're rendering the front page view and you can see here in drupal's back end this is the view we're actually now passing on to a drugs view component which has got access to all of the results for that view do we also get the view header and attachments yeah so that information is provided in the view resource okay so how do we theme that theming in drugs is relatively straightforward it uses a slot based theming system so we can just take one of these available options and drop that into the components directory and then we render out our slot and that's the content provided by the drugs view component it also has name slots so we can render out the header and the results separately the drugs components also have a wrapper property which here allows us to set the component props data and the class that wrap our result entities i see these items that are entities coming back from the view what's defining the display here drugst leverages drupals are in display system if we have a look at the back end here you can see it only shows the image yeah exactly you can make changes in your back end and druckst will respect that that's great but what if i just wanted to add it in the component the parent component also provides props data in this case entity fields and schema we simply need to register the required props in our component and then we can reference it in our view js expressions uh you mentioned campaigns earlier could we see an example sure this is a campaign i set up on our umami demo site to get started you just need to create a file in the next pages directory what are those b tags you're using here they are layout components from the nux bootstrap view module but you can build this any way you like any npm library can be used the view youtube component for instance which i could have used in this demo but instead i use the embed code so does that mean it's possible to use drugs components in a page yes absolutely all drugs modules can be used by the drugs component itself it just needs the module name and the correct properties which we can find in a few different ways one way is to use the view developer tools as i've done here alternatively you can read the output of the json api directly earlier you mentioned using drupal content in other applications do you have anything you can show this is an example entity explorer app which allows us to see all of our content in any chosen view mode we designed it to help with the process of populating the campaign page also as a way to test and demonstrate our theming changes against live data you can have a look at the source code for this in the umami demo repository on github it looks like drugs is pretty mature already what's the status and current roadmap there's still a lot to be done our target for a 1.0 release is a feature parody with the drupal umami demo but to get there we need to engage with the communities back end and front end alike which is part of the reason for this presentation and what sort of contributions are you looking for all contributions are welcome of course the more eyes on the project the better it becomes for everyone documentation testing feature requests support queries help a lot as do pull requests the project is open source and while reality loop is currently funding my development time there will be a point where the project will also be looking at options for funding and that leads on to how can someone actually get involved you can find the code and issue queues on github and for support and general inquiries you can find us on the community discord server we're also available in the drupal slack thanks for your time stuart let's cut to questions now you can put me live i think yeah if we have any questions please feel free to post them now so uh we've got one from seagull which is how seo friendly is drupal js oh sorry druksjs uh that's a good question um it's as sorry can we get my video full screen it is it is i'm in preview at the moment okay um so it's as seo friendly as nux js is so drugstore is just a layer on top of knox um so there is already a range of modules available for seo in next um are you aware of any similar systems how does drugs compare to other things there are another few sets of tools similar to drugs we saw some at drupalgov earlier this is sorry drupalcon global earlier this year we're not really the right people to make that comparison but we would like to see people doing that people who have tried each of the individual solutions and you know the main thing about drugs is it's not about replacing a solution it's not about being the only one thing it's it's written in such a way that the modules can be used with existing solutions with like drugstores primarily ujs but the schema module for instance could be used with reacts quite easily just by including in the relevant classes and taking advantage of that logic i've got a question from lee so does the markup come from drupal when you use drugs identity when you use a a drugstore entity the markup doesn't necessarily come from drupal but this schema does so drupal will tell the front end the entity module via the schema that say three fields are showing the image field uh the body field and another field and it'll say what order that those fields should be shown then drugst will pass that through to the relevant field and those fields are provided in the drugs density module so there's a bunch of um let me see if i can jump across to a quick example so give me a second and so if you have a look at the drugstore entity module um you'll see that this comes with a bunch of fields such as basic string date time entity reference and each of these fields are being provided with the drugs density module additional could be added in the future but these are your bare bone base fields and they will take the data from the json api resource and the schema information that they've been passed so such as the the settings for that particular field the view mode for the reference field and they will pass that to the field which will then determine what to render uh tim asked i'm going to paraphrase because for what i think which is how do relationships work eg referenced entities in drupal yeah uh so they work um it was built out of the box to work with uh paragraphs um for our preferred uh setup and the way it works is probably best if i actually jump in so is my screen viewable to everyone yeah yeah okay um so if i jump into this here and we open up a piece of content so i'll jump into an entity let's see what am i looking at this one all right so that goes through to a themeable component here drugs entity card common which passes through to a field and in this case that field is an entity reference field so if we open that up you can see that the entity reference field actually passes its information along to another drug's entity so it's doing that entity reference exactly the same way that drupal would and then dribble within and pass that along to its relevant field and then you come to the last field in the renter stack okay uh is there any pet projects that you're using drugstore uh yes we myself and my wife are currently building a game with it using drupal as the back end the database um and essentially it's you have your drugs front ends where you'll present the game it'll have you know web sockets to communicate with each player and then it just stores that data as you play the game in drupal and sinks it across and allows you to you know play another game so it's a multiplayer game basically similar to cards against humanity style you'd be in the same room you'd be synced up with all the players that are in there uh marco asks can you use druksjs in a progressively decoupled approach uh like an on-page mini app slash widget i don't see any reason why you wouldn't be able to uh so each of the modules provide different exports as is um so if we were to look at uh we're still in here one second if you look at the component the drug's density component so as long as this entity component is registered in your progressively um decoupled site it will be available to your your progressively decoupled view app drugs uses a ux store for the data that it has available to render into those components is but there's no reason that shouldn't work with progressively decoupled i have not tried myself personally though leighton asks why did you choose drupal as a database for the gaming site you're developing i chose drupal because i'm building drugs um the the main reason is as i started developing drugs and i can see the connection the ability to use data and crunch that data with things like views i can simply turn drupal into a database a you know it it holds the information it can crunch it it can do whatever i need but it doesn't it's not necessarily for display um the front end the drug side of things it can just pull that data the information i need and figure out what it wants to do with it instead of leaving it up to drupal uh jack's asking do you see any alternatives for paragraphs to modal to model data for the coupled sites it's an age-old question like i i don't want to make that decision we use paragraphs in reality loop builds that we do any entity reference that you use any entity referenceable system that you use will work with drugs at the moment because the whole point is do what drupal expects you to do so an entity reference says this is my connection to other data and drugs will go i see your connection i will acknowledge it um if you were using a wysiwyg based approach it will get the data that the drupal has stored sent to you so if you've got your references tokenized inside of that data drugstore see it and you will be able to use drugs to reinterpret it as need be but references and paragraphs seem to be the most logical for data structure um are there any types of site that drugst isn't currently suitable for at the moment the auth module has not yet been solidified and published so a site that is heavy on earth is not the best choice right now but it's essential like we're aiming at the moment to build drugs around the umami demo because it is a um interesting once you've only got 30 seconds left yeah what about integrating with something like solar or other search engines yeah absolutely if you're headless if you're decoupled you can integrate with anything that you need to if you've got endpoints you can do it the the the version of a front end that we have with something similar to drugs goes straight to the search engine instead of going to drupal in the case of the umami demo the search work that has been done to this point goes to drupal via the json api search module and then to the search system okay that was it thank you for your time for being here and we'd love to hear feedback please jump into the discord channel if you have any more follow-ups

Channel: DrupalSouth

Views: 451

Rating: 5 out of 5

Keywords:

Id: 1W3EDDFA1ok

Length: 19min 5sec (1145 seconds)

Published: Thu Nov 26 2020