 Good morning everybody. I'm John. How's everybody's Drupal con going? I don't know about you guys But I've been learning a ton all week. I've really enjoyed it and particularly learning about things I didn't even know exists it so you know connecting with other people doing similar projects There's it sounds like a lot of us trying to solve some of the same problems of how to connect front-end to Drupal and and get the best developer experience out of it make it easy to do so Thought I'd share the story of how we are solving this problem at at my company Freelock right now So what we are? It's interesting my slides are not in sync here Try refreshing Okay, let's see Will it get there so what we're gonna cover today is basically a little bit about you know What is progressive enhancement? Why would you choose this over fully headless or just straight Drupal? Some examples of things that we've done and then we're gonna get into the a little bit of the weeds of how do you actually hook this up and do it So you know I'm was setting out some goals. They asked from the speaker proposal What are you trying to learn? This is what I'm trying to kind of get across is Just a couple of techniques for developers to get started putting a view application on top of Drupal And this doesn't have to be view there's lots of other ways of doing it We're using view as an example because that's the platform. We've chosen and what we're what we're going With so first question is why? Why are we doing progressive enhancements instead of fully decoupled and there's you know There's quite a few different ways of looking at this. I mean first of all, you know Drupal is great for What it was and what it's been for the last 15 years and it's got some really powerful Technology under the hood the ability to extend and do all sorts of things beyond just content management systems We're doing a lot of event registrations membership sites a bunch of interactive things that that is just a really nice There's a lot of support a lot of code a lot of best practices available for But we're not really all that comfortable using JavaScript as Drupal developers So, you know, it's kind of a new technology area on the other hand single-page apps or Decoupled headless apps those end up having two completely separate sites. You have a front end and a back end and and So you've got a lot of a lot of things that you can do to really have a nice user experience And that's the main reason that you know, it's kind of a little bit more of It's no longer the WordPress versus Drupal. It's it's the back-end sites versus the front-end sites And front-end, you know, we've got view. We've got react We've got angular that are all just really able to deliver Whole new classes of user experience that you just can't do if you just have a page at a time coming back and forth But you lose all the stuff that you get from Drupal You lose a lot of the you know, you have to figure out all the answers around accessibility around Multilingual around, you know, you name it There's problems that Drupal has solved that you have to solve all over again when you go headless And so and it makes it really expensive and hard to change for clients So we're working with smaller end of the market, you know a lot of nonprofits They just don't have the budget to do fully decoupled, but they'd like some of the user experience Benefits of it. So that's what where we find this area in the middle of progressive enhancements and this is basically taking a normal Drupal site Drupal theme and adding some of the the UX richness and improvements that you get from headless applications and frameworks and Putting embedding them in Drupal and so it's individual widgets might be entire sections of a site a variety of things there You do get a lot a lot of it is similar to doing headless You've got to figure out how to connect the data to the back end and that's what we're going to talk about later in the talk But it's we find it to be a really nice place to to be developing especially With a lot of existing sites that are already on Drupal and being able to add and functionality and really improve them So going back into a little bit of how we frame the history of JavaScript When we started here, there were some early toolkits the jQuery dojo ui, you know jQuery went into Drupal core early on and these are just There are things to help you do consistently across browsers. It helps sort out some of the cross browser issues But they didn't do a whole lot for you browsers have gotten a whole lot better and Do a lot more of this for you. We're calling generation to you know dojo is one of the early ones And they've done they did a lot to kind of establish some patterns It was always kind of a library that not many people used how many people here do use dojo out of curiosity nobody, okay We we used it quite a bit early on before even coming to Drupal So this is something that we had had been and and they built kind of a store pattern back in like 2005 That are very similar to stores in the modern frameworks But it didn't get much adoption and most of the people moved on to other things In fact to one of the the actually the the originator of the project is actually went to Google and first made the Embed the Chrome browser in IE plug-in that we all used to use and then Has really been one of the instigators of the web component spec So, you know dojo is actually running through a lot of this in the history Current this is what I call the current generation react Vue. J s angular You know the the first generation of angular was completely rewritten. It's now, you know, these are all reactive So it this has taken that store concept of having a client-side data store And made it so you don't have to do the wiring up to with the UX You just change the data in the store and the UX updates automatically Which is so nice as a developer to just to be able to work with and What I'm calling the next generation are web components primarily I mean web components have been around a lot a while, but we're not actually using them I went to that talk on outline earlier this week and and I think it's really exciting I definitely think this is where things are going and Svelte is is a Another framework that I've been looking at a lot that is avoids the shadow DOM as a whole and and is a lot closer to web components So both of these I think are really interesting. So just sort of setting the the background. So why did we choose Vue. J s? It's these things. It's easy to learn. It looks like HTML. It's declarative We're generally try to stay away from the front runners in the market because often we find that there's Over they're overhyped and and and there's better quality solutions down the stack That's not to throw shade on anything. I think react is a great framework And obviously there's tons of people using it and they all do the same thing. So there's This is really an arbitrary choice like so much in technology But it's the one we chose and we've been really happy with it. We've been using it on a bunch of projects So so that's what we're going into so Switching gears a little bit, you know, what should you be enhancing? What are some examples of things that that you might do? We've actually done quite a few Things this is a partial list, but they're generally interactive components of one sort or another that They were just sort of plugging in smart widgets and building So, you know, there's there's a variety these they're just you know end up being components that can drop onto a web page And and what we're going to show in a little bit is how to actually get started with some of these something along these lines So here's a couple of examples in a little bit more detail this is a project for a an NGO called Better Care Network and they are a library of 11,000 documents at this point. I mean it's growing like dozens of documents a week it's a very interested in child welfare around the world and so they have they have done a lot to kind of share practices across a wide variety of organizations and communities and Methodologies and how to improve this in the situation and they had a really complex model for how to actually engage with all of the The content they have on the site And so we worked with a design firm to come up with what we call the puzzle project And it basically helps people Get a mental map in their head of the various areas of practice in a very dynamic animated way of Letting you drill down to the actual content that you're looking for And see the relationships with other content. So in their vast library, they've got a really easy way to Get a handle on it. We built this using taxonomy as the prime the prime back end So these each one of these screens that you're looking at is essentially a taxonomy term And it's a nested hierarchical taxonomy so at the top level was the ring and then you drill down into these these areas and The the client can edit everything on this page just on the taxonomy term page using a normal Drupal Drupal form Change the color change the background image It we've made it so that they can have up to 11 pieces it just automatically gives them a shape that fits the the pieces in there and and And then we matched up the routes. So each of these taxonomy term pages We have a use path auto to create a nice path using the hierarchy and we use view router to sync those up So we got both the search engine benefit when the search engines crawl the same URL as you visit They can bookmark one of these send it to somebody and load it up Another example is we're working with a company now that has kind of a sophisticated data model Animation actually going to run here and This is basically for the insurance industry and they needed To provide instructions for the users to pick the right insurance company out of this mess of hierarchy And trying to you know find the the right one. They need so they needed the description Associated with each taxonomy term and so we built a quick little widget that just shows that And then it also had different rules about walking this taxonomy to children parents We love using taxonomy for it seems like we've settled on that as a solution for a lot of things just for the hierarchy And then Right lost my sink here. What was going on? Oh? There we go And then we have an internal tool where we're using this for project management and in this we are able to kind of track tasks Open up a different modal windows to edit things Sort and edit and drag and drop and doing a variety of things to serve building dashboards that bring lots of Lots of pieces together. We're actually in the midst of another one of these for a client that does accessibility work with the buildings So they do ADA compliance Not like we're used to on the web But are there ramps on the entrances of the building or is the the heights for the light switches and the colors and all that And so they've got a big survey that they want to take out into the field and have an iPad and just sort of Put their notes in for the the barriers to various compliance issues And they want to have all the right context because it's you know The project the building the floor the room They need to be able to add and manage all this this tree of information and make sure they're adding to the right Right one so it ends up in a final report So a few things not to build We really always start with the user experience so we're always thinking about our editors and authors as the the user of this and a lot of times it's You know the problem with going fully headless is if they need to change something they have to come in and get a developer But if we can build in the experience and so they can just edit it and do all the stuff they need It they love it. It's a really great way to go And so the the the other thing about it is you know when you're going Headless if you're doing something that that is going to change over time and how many people have a website that doesn't change over time All our clients we have one client that we just picked up that is fully headless now And they haven't updated their site. So it's on Drupal 8.3 And they can't make the changes they want to make because they don't have developer support So they found us and we're going to be redoing their build pipeline so that we can actually do all that sort of stuff All right, so let's get into some code that's kind of the overview here So we're gonna spend a little time on just sort of how to get a view widget loading in Drupal How to use JSON API for accessing data And and spend a little bit of time in that just gonna touch on routes a little bit, but primarily it's the first couple here So first off loading view in Drupal These are the steps and it's really straightforward once you've done it a couple of times. It's like five minutes So first of all, it's a create a module and we love using drush So here's a an abridged example of using drush to generate a new module And step through and answer your questions when you're done you end up with a Drupal module in there you can enable it again with drush and and there you go you now have the The container for your code So next if you're doing a block, this is a simple block You can generate a block with drush as well Very simple framework and plug-in most of you should be familiar with this We also do field for matters or field widgets quite often. So There's other ways anything that'll take a render array. We'll use this pattern. This is just your your stock Set up for it Place it on a page all normal Drupal stuff. So everybody in this room. Hopefully is comfortable with this View so this is similar. There's a great project called view CLI Which is a way to bootstrap a whole view project similar to the react create app You need no JS on your computer with that. It's pretty straightforward install view CLI Change into your module directory. So we like to bundle it with our module or if we're doing in a theme We'll put it in a subdirectory of the theme So when we so basically we start in the theme directory run this command And then it will generate the the base view framework here and so there's the the part that is view that's nested inside our block and There's the our custom Drupal block in terms of the code So that's the skeleton framework next thing is to make them talk to each other and And so So there's several parts to this Not many that's not it's pretty quick These are the things we need to do with view and we'll go through each of these and then on the Drupal side It's it's getting the the JavaScript hooked up So first in view we create a build target So this is something that we've done a bunch of different ways and this is the solution We've ended up with view has a built-in support for a JavaScript library called nv.env and this lets you have Both a dot ENV that gets read automatically with environment variables And you can have a different one. That's ENV dot ENV dot development That's only run when you do your local development builds in in view and so we declare basically the the the end point and the assets directory through that and so basically it's a view config js is These are this is a place where you can override the default behavior of the view build and when you create a project this file doesn't exist So you have to create this file drop it a few lines of code And then in the package JSON We will add a Drupal as a build target and this is just the pattern We've adopted that moves the build when you run this it moves the the built JavaScript outside the view project and into the Drupal project We also turn off file name hashing because by default most of the front-end projects will add a hash to the file very much like aggregated CSS or JavaScript in Drupal That makes it hard to load that in Drupal So we end up turning that off so that we don't have to change our library's file every time we rebuild and Then there's the rest of the context around it and then npm run Drupal after defining that will We'll build your project for production and drop it into the assets directory So next is the Drupal side So now that a view is built They're now in assets and the index HTML will show you where the script and CSS files are That index Index HTML is a single line So it helps to have something to pretty print it so you can read read it easier and find the exact names of your bundle and job of the JavaScript and the CSS and those are the things that you're going to put in your library's YAML for Drupal to load and so That's basically it the the other parts are pre-loading We haven't really delved that far into performance improvements and best practices around that We figure that let's get the files into JavaScript load them up and we'll do the optimization on the Drupal side when the time comes And if you do add stuff to view or split your project out into layers This will change so you may need to come back and update your library's file so and then finally the last thing is getting your DOM element in your in your project or in your render array in this case, it's targeting this the stock ID of app and It renders on your page and that's basically it That's all all you need to do to get view loaded and from then on your you can develop straight in view and And you don't really need to do much more in Drupal aside from enabling JSON API and the next section so so next we're going to go on to how to actually get data in and out of Drupal to view and There's a lot of complications in this and there's a bunch of different solutions And I've been talking to people here about different alternatives This is what we're currently doing is kind of our our example and so we've built a couple of libraries to sort of help with this So here's the the first part The part of the problem is if you're doing something more complex in view It's just too slow to NPM run Drupal clear the cache wait for everything on front-end developers are impatient We want to see that the example right away So so what we're going to talk about now is how do you get it so that you can access data as an authenticated user? When you are in a headless environment So setting up that headless environment so you can be at local host accessing your data and And access it as an authenticated user so that you can see everything you need to see as you're developing and so there's a And there's another complication is the the deployment of this after you've built your code Some of our early projects we ended up before we figured out the environment variables trick we were hard coding in an absolute URL into our config file that would built and Then that always pointed at production and you couldn't really test changes in Drupal Because you know if something actually broke your Drupal site before you released it You didn't know because you weren't actually looking at it So having that environment variables set for your endpoints in your dot ENV file just works beautifully It solves this problem really in a nice way So the dot amp development you can you can add your dev site address right there and And then you can you run that on local host so So that's yeah, that's it that's the one of the key tricks next thing is the the actual authentication bit and I was actually just I Ended up writing this library just a couple of weeks ago because we were I was trying to get other developers able to be productive on on the accessibility site that we were doing and basically this is meant more for development than anything and basically it's a Leverages Axios, which is a JavaScript request library and it uses interceptors to inject the headers that you need for either OAuth authentication or The C-Serve token the cross-site request forgery if you're going to write data back to the server as a using a session token you know which you can do if you are Embedded in a Drupal site you have the Drupal session and you can read the data as whoever you're logged into the main Drupal site with But when you go to post it back there there's a Basically, it will deny you unless you pass a C-Serve token and so this will just handle it for you If OAuth isn't configured I was talking to someone the other day Brad I think I mentioned that there's a core bug around that so you can actually turn that off turn off the requirement to do the C-Serve token So this may not be as necessary going forward, but even right now this is one of the issues that you would hit And that's one of the reasons we did this so basically you drop this in you will need to pass it a pass you will need to set up simple OAuth or some sort of OAuth flavor and Drop in environment variables to configure it to actually use OAuth. That's a fairly quick thing to do But it's another whole talk It's a it's a it's a complex topic But once you have your your consumer application in there You can just specify the UUID and environment file This will pick it up and inject your token and that's just using the simple client authentication Flow and in OAuth, which means that you need to provide username password View X so how many people use view or view X? It's a view view X a Lot fewer okay reasonable amount using view so view X is a state management system. That's built for view the modern JavaScript Has a whole bunch of different libraries and you can kind of pick and choose the ones you want So as there's other ways to go, but we've found view X to be really useful We found a view X on a library called restate view X that is built for JSON API And when we found it it was already marked abandoned So we we forked it and basically made some changes to make it work easier with Drupal particularly around When you are talking to a JSON API server on Drupal the endpoints will be entity type slash bundle and but the the type you get back is any type dash dash bundle and This translates back and forth for you automatically so you just pull it in and you can register The endpoints that you want to access in the as view view X sub modules So that's aside from the the imports. That's the entire view X store to get started and Then on the the right side Yeah, so the right side is your component is an example of a component mounting it and and loading it loading the data and rendering it the render template would look like this and In view you can have single file components So the the all three of these last chunks are in a single dot view file template script and and you can have styles as well So I kind of split out the the scripts here so you could see the the the important parts so what you end up with with the the restate client is You basically just we we registered it in the in the store here node dash dash article When the the component is mounted we issue a call to fetch the data and so the this this module will fetch it stored in view X And you can always call load again. There's a variety of load methods. You can load by properties You can load by ID. You can load it in a bunch of different ways. It'll keep it there in view X and then The other thing that we're doing here is there's a bunch of options in the json API for Drupal for including related objects and picking which fields to load for each content type and The way we handle that is we just sort of put it in our store so we can access the same set from all of our components And then we just attach that as an argument when we load the data or Or get a particular object so this this library basically has those two basic steps There's a load step and a get and and there's parallel methods for each one And if it's already in the store, you don't need to load it. So what you end up with in the data binding side We've got a method for wrapping the tags and Articles and this is literally all the code that's needed to get a list of all your articles showing on on a site So it's fairly straightforward to work with It also supports writing back. You do need to kind of sort out a lot of the the issues around you know what we tend to do is make a copy of the the article in this case and flatten it so that we don't have the attributes to to iterate through and then we'll have We'll respond to changes that the user puts in the interface with with a watch and update our update a fresh copy of the object and then just put it back in the store and there's a method for doing that there's There's two. So this is all really straightforward easy for both read write create So if you router Aren't going as much into it, but it's definitely really useful if your object It needs to be aware of the page that it's on And so we use this a lot to kind of sync up and know Which objects to get on a particular page and that way you can have a button that is aware of what it is You can also Embed in your DOM element properties and treat it more like a web component and and pass those straight into your your components Path auto, you know and routing is Is something we really pay a lot of attention to already told you how we like text on any term trees Another thing another best practice that we've found is We will keep when you create pull in other interface projects. You'll end up with Different folders to put your components in everything's pretty much everything's a component We tend to use views use the views directory to put anything that's linked to a route And those tend to be more layout related components and then all the data binding ones Are end up in the components directory? And just some tips for organization will help you in In the long run another one that I recently was reading as a best practice is never use single word Names for your components always have multiple words to give it more context. It's a list. It's a view. It's a It's an item or whatever Was you're doing it? Um This is just scratching the surface we've looked at decoupled menus and that kind of comes underneath the the Jason API endpoints you can load a menu and get a link set back and And we played around with that a little bit and there's been a lot of talk here about it So it's exciting to see that progressing the PWA talk Yesterday well, I found really interesting and and and this you know This is kind of ready to go to bundle up and and add your web workers into your view project and just keep going View CLI does a bit more than just the command line It has a UI on top of it if you just type view UI It'll open up in a web browser and it remembers the projects on your computer and you can go and add other Other it's like a package manager for view Pull in a whole variety of related projects We we tend to use beautify a lot as a UI toolkit and that has a lot of things like tab controls and accordions And and a lot of really nice form elements. So we'll base things on that code splitting and layers It's that's another thing that we've figured out how to do is you can have multiple top level Components and in the main JS that bootstraps it you can split those out into different routes and View router will also help you do the layer splitting so that you end up with just the layers you need for the components You're loading on the page Well, that's multiple entry points as well Then you can add those in various various spots in the page View three has added a teleport as well so that you can basically take a particular component and bind it to a DOM element that's completely outside the main one so you can have one app and Shoot your components off to different parts of the page that aren't just in the main thing Well, I haven't had a chance to try it out yet, but that's that's that's another thing That's kind of on our radar I've got some Links here you can actually download the presentation. I've got a PDF version or single-page app version and I think I have that URL on the second slide, but it's freelock.com PVD I think and then So the the npm packages, there's a simple OAuth is useful for development the API documentation for Drupal is a really great starting point. There's a lot of examples in what you need to use there and and View X is a is another great place to start and I should be adding a bunch more from this week because there's a lot of other great resources here, too and That's basically it So at this point Take some questions. I do have a live example that I just put over on the umami Insta starter package if anybody wants to see it, but at this point I'll open it up for questions Yes No, we're not doing the question is that or is there hot module loading inside Drupal or just an outside development environment and No, we're not doing any in Drupal right now. We're just using the stock view setup so npm run serve and Your widget loads up and that's why we've kind of split the the targets for environments So we can get at the Drupal data and just work on the component standalone Yes Yeah, so the questions on SEO and whether how do you make sure that you get the content on the page for SEO? when you have it all wrapped in a view widget and We make heavy use of slots So we will inject on the DOM of the page you can insert other HTML inside it And so we end up having Drupal render the content for the search engine And then we have it linked to the routes in In view and so it can either just take that content as is and and render it using view components or If it needs to pull in other stuff I mean we've just basically make sure that all the searchable content is on the page with JavaScript turned entirely off and we make the the routes match between Drupal and view so that if you if you go To one of those inside pages on our puzzle for example You'll see all the text on the page in the in the source code, but it immediately bootstraps view and and loads its content and some of the related links and all that but all the images and it's on the The page that you the same page that that Drupal is serving essentially Yes, so I was at a boff yesterday I haven't done any of that we've we're using Drupal to render all the all the the content that we want for search engines and everything Drupal next though. I was talking to Sounds like is working pretty well for that doing the server side rendering automatically and it seems like there's a couple other Things out there as well Yes Yeah, yeah, and drugs. I think is the other the other one that's that's going down that path Yes, so Generic Drupal web components is the is the answer or at least one of the answers Yeah And I attended Brian's talk earlier and it's a great to hear You know we're trying to get as a community some standards going so that everybody doesn't have to reinvent the wheel we can all work together and make Like like everything in Drupal make one really good solution that works for everybody And you know there are questions Do you want to see more code or didn't take a look at any of that or we I? Can pull up some stuff and oh, yeah Well, so that'd be for the initial page load But if you're actually in your browser, you're not doing more page loads You you transition to the new route and it back fills just the data So and that way you can animate between your routes and do a bunch of really nice UX on that Yeah, if you were actually going page to page That would not be pretty Yes, I didn't catch all of that authentication using simple OAuth and yeah The simple OAuth side or the view X all of it. So yeah, so what we did and I like I said, I just I I don't know if I can really get the demo here, but basically it's install the simple OAuth module and then create a Create your private and public key. You'll need to set that up and then add a consumer Yeah, let me see if I can pull up my switch this to mirror Okay, thank you all for coming. I'll keep on answering questions for you