 You might need a block TPL to start adding some classes around a block or take some markup away You might need to use TPL. I might need a views row TPL node Fields and it gets yeah pretty repetitive if you want to make that many markup changes. Usually we just say screw it and Leave the divs because it's faster and the client doesn't look at the wall sometimes they do and they don't like it Wouldn't it be nice if whoa Wouldn't it be nice if we could write lean markup and CSS that actually reflected Display rather than just a bunch of droop or droop a logic And you know maybe use some more semantic HTML5 class Elements, I don't know just have oh there we go nice Just have some markup. That's cleaner, you know and then kind of put our data in later And not necessarily base it around what template file we're using or Yeah, or maybe even in the future When like web components come out you could have More semantic classes your own custom classes say You know you want to put a recipe you could just say recipe Makes a lot more sense than article or div or whatever element. We're forced to use now You can kind of do that stuff now kind of But angular kind of gives us a way for us to Whoa, that's my slides. This is cool reveal JS kind of lets you Have all your stuff here. Anyway, I don't need my notes Yeah, angular basically lets you kind of do some of this stuff now if you want to go and create some of this lean markup and stuff Angular is just basically a File that you include in your in your In your project. It's a it's a JavaScript library JavaScript framework That will let you Do some some I mean, it's like an application It's kind of like a Let's use kind of extends HTML. Let's use New tags and stuff to do kind of application logic and stuff, but we're not gonna we're not gonna look at at a Lot of that what we're gonna do is look at some of the the ability for it to to take data and Put it into a template on the client side um So we can't just take data from Drupal as it is like we can't go to some node page or some Drupal theme and Take data and and With it with it already being marked up with tags around it and just put it into a site We need we need raw data angular doesn't really like You know decorated data So how do we get raw data out of Drupal? That's where like web services come in now when I first heard of web services a couple years ago Services model module Drupal 7 Yeah app developers phone app developers, I didn't really think I would ever use it as a femur but You can what is a web service and we can get into some long definitions, but basically a web service is a URL that you expose on your website and You expose some raw data or an endpoint You can think of and you go to it and there's no there's no markup or anything. All there is is some data That's output What about rest so web services and rest rest you could go to This link it's Roy fielding Dissertation on rest you could read that and get really confused like I did or you can just Think of rest as an architectural pattern. I had a philosophy, but I showed some of these slides and he said that it's an architectural pattern, okay That's the kind of conversations that happen around rest people are still arguing. This is restful. This isn't restful Yeah, it's basically a philosophically dictating or architectural pattern Suggesting ways that we can better interact with those endpoints that data. That's being exposed via reps web services there's a link here to Lynn Clark and Klausie's presentation from Drupal com Prague in Europe and they do a really good job talking up extending on on What a little bit what I'm gonna be talking about of how to get data out of Drupal using rest in Drupal 8 This is a Drupal 7 distribution called we the people this is the kind of this kind of got me gave me my first I had to do a presentation at Drupal gov In Australia, that's where I'm from by the way. That's where my company's from And I did it on we the people I downloaded the petitions distribution and they have an API like out of the box I was amazed you download it and you have all these endpoints and stuff that you can access some some petitions and some Drupal information Drupal 8 has an API out of the box as well So you install some of these modules Or enable some of these modules already in core and and that's these four up here and Yeah, you have an API out of the box We could go into if you go look at that presentation by Lynn Clark and Klausie they really go into a lot of this stuff I'm not gonna go super into it, but just quickly how is Hypertext application language it makes maybe our output our Our data that we're outputting VR web services more rich Htt basic authentication just add some Authentication around getting that data out so we can start having permission and different levels of authentication Yeah, restful web services adds a kind of a rest framework around Exposing that data and serialization is taking the Drupal data and Serializing it turning in to a format that we can extract and there's different formats XML JSON and Actually the Drupal data that we the one that Drupal 8 uses the format Kind of by default as like how plus JSON so it's a form of JSON called how JSON and we'll use that later Just so you're familiar I'm don't worry too much if you're not super if you don't understand I didn't And this rest UI you need this contrary. It's a contrary module You download it and start in Drupal 8 and like you can see All the rest stuff and I'll show you in just a second and this rest blocks is actually a module that I made And if I can do it well actually it was it was actually quite tough. I had to get help but Yeah, we'll talk about it towards the end it's a contrary module or a custom module Yeah, so configuring Drupal 8 Rest, how do we get? Well first off, I don't have any you know Dries's keynote yesterday. He talked about how a lot of the data in Drupal 8 is More structured In Drupal in Drupal 7 it was a big deal like nodes were entities now and and taxonomy terms are kind of entities but like in Drupal 8 this is more so where a lot of this data is extended from my entity class and It's all kind of done in the same way It's all Config there's config entities and there's content entities and they're extended in the same way So it's easier to kind of like Provide a service that hooks into All of these entities in a similar way and therefore exposing these These Entities so if we go down to the rest UI the one I was talking about you enable that and here here's the rest UI all of these entities are kind of You're able and some of them might look familiar field Comment you're able to Extract all of this stuff out of Drupal and this is in core by default Which is really cool and you can you know use to that data and we're gonna use it to build a theme but The one that's enabled by it wasn't enabled by default before but recently I reinstalled it And this is enabled by default now is the node entity. That's like the most common thing in Drupal. You know the node And the way you can kind of configure this you want to turn like all right So there's get post delete these are all actions you can take for our purposes for theming purposes, right? You know, we're gonna we're gonna just use get We want to get information out of Drupal, you know to kind of integrate it with our clean markup and I'll have you we're gonna and this is by default already enabled how J some enable that and we're gonna have We want to enable cookie authentication basically that just says Allows an anonymous anonymous user to we read the cookie of anonymous user and allow them to access the data So back to that's coming later back to our slides here. So we configured Drupal late We've enabled it's enabled by default a node is enabled by by default So how are we gonna? Get this data out like start seeing some of this data start seeing some of this data come out of Drupal This is a really good app. It's called post man. It's a Chrome Chrome extension and You download it just like any Chrome extension and it kind of looks like this So yeah, I have this Drupal site. It's called. This is local right now. It's got at this URL and We're going to go to node one and we're gonna extract the data And you say get oh Here we go send This is why I'm pointing my my face at the screen so I can see And you get all this data you can't if you have ever done a print R or like a DSM and Drupal Like you know, this kind of looks like PHP output a database JSON and You take these little variables and you wrap you can wrap markup around them It's kind of the gist of it But in order to get this data out what you got to do and this is confusing at first is you need to Have an accept header for get for get request and you want to say it's format You want to specify which format you want to get this data out the reason we're doing this you might say Oh, why why can't you just get it the reason you can't do that because if you go to node one one Yeah, like this is this is a recipe site obviously it's some tacos And yeah node one is html see it or plain text html and if you were to to get That and in postman and I'm not gonna get rid of it now But if you were to get it it would just give you html down down here So we need to Specify that we want to get JSON our how JSON which provides these links how specify some of these links here Okay Let's keep going so When I did this I wanted to do it with different URLs. So when I get this data out of Drupal You can do it from if you do it if you get the data out of Drupal on the current site that you're on then It doesn't matter. You don't need to Do anything special, but if you want to get some of this data from a different URL and Travel across URLs you need to and do this things called and you know You have to enable cores and basically the gist of it is you you put this little piece of code on the top of your website Or in a module somewhere and there's actually a cores module in Drupal 7 and previous next some of the guys I work with We kind of just we made a Drupal 8 version of it and you just enable it Um, it's a PSR for broke it you just you just enable it and Yeah, and You can now access Make requests through separate URLs so if So what are we gonna do here? We have our Drupal 8 server, which is basically This our little recipe site, right? We have a Drupal 8 server and We have some endpoints, so we've already enabled like node an end point where we can extract nodes out and we saw through postman that we can extract that data out and We We're gonna enable there's another way if you want it you can also enable views as well So we're gonna have a views endpoint that we're gonna enable and then we're gonna have a kind of whole separate Client side theme so our theme is not gonna be usually when we have a theme It's inside of Drupal right and it's running through PHP and stuff But what I want to do is have a client side theme that sits outside of Drupal on a separate URL That's why we're having cores We enable cores and that has just for for purposes of demonstrating like the basic tenants of the Drupal theme We won't have a node detail page. It's really common in Drupal a Drupal theme and and just a home page with like a views listing on it and The reason I put other you know this endpoint through or whatever you can have any It doesn't you're not limited to one pulling from one data source when you have a client side theme you can have Multiple, you know, you could pull from multiple Drupal endpoints and display different data on one page You can hear next door Okay, so angular directives now anger so angular was built for designers In the beginning but since then it's morphed into more of a it's a development tool So it's it's a little bit complicated. It's pretty complicated But I'm gonna try to explain it in this in the scope of the basic stuff that we're gonna use in in the session so When you have a client side theme the difference is is you don't You only need a couple files. You don't need to set up a lamp stack You don't need you don't need map. You don't need to down even download Drupal as long as those endpoints are enabled You can do start doing some theming With three files or two files an index our HTML file and you have to include angular Just just like you would have to include jQuery something if you're gonna use jQuery and An app.js you can do it in a separate file or in the same file It's just a included file that has some of the logic around what we want our client side theme or our client side application to do Basically some of the code here you You bootstrap your app so you tell angular you want to start up you bootstrap your app and then inside of So you say you you bootstrap your app by using these what's called directives and that's these These tags or attributes that get attached to to HTML and you can just You could just Yeah, you bootstrap your app and you can have Then you could start using angular stuff Inside of wherever you bootstrapped it's usually bootstrapped on the HTML So you can start using angular stuff inside and now your HTML inside is extended You then so angular provides these these directives which basically do stuff, right? It like they point to JavaScript functions that do cool stuff around your site So in this instance ng ng click ng show fuse jQuery It's pretty simple a similar sort of thing where it's a click function and show function the difference is the difference difference difference is is that you're doing it You're declaring it inside of your actual HTML rather than doing it pointing to HTML that's in a separate file and it kind of makes more sense Yeah, so in this instance We're just We're just we're just Showing a form or or or removing a hiding form and I have these these plunkers I don't it's a kind of like a JS fiddle or something and through this whole presentation because I realize I Probably not gonna it's really hard to explain code and words. I have these plunkers set up to kind of save me where I've done little examples of and luckily the internet works a little examples of of All the little things I'm gonna show so that's we were able to just like do a hide show sort of thing But like I said, we're not gonna focus on some of this functional stuff. We're just gonna kind of focus on The ability the the theming and and kind of how what we would do in Drupal How we would theme something in Drupal right with template files and stuff Yeah, so where we're angular has a directive and it's one of the only directives that deal with kind of putting data into Into an HTML file and that directive is called NG controller Okay, so basically you have you have a function that lives in your app.js or whatever JavaScript file and Just like Drupal. It's very similar. This this function is very similar to like a pre-process function where you're putting You're putting Data or you're declaring kind of variables So you have your recipe dot title and we've said burrito recipe body Very young and it gets attached to this don't don't worry about the JavaScript like syntax or anything If you play with this a while, you'll get it. So I'm just gonna explain what it's doing So it's just like attaching it to scope which kind of Helps us feed our data into our HTML then you with this NG controller you if you you attach it to a div or any element doesn't have to be a div and Within that div you basically have a template file within that div you have a you have a scoped amount of data that you can you can start you could start using the data that you declared Inside of that did but if you try to use that data outside of the div it won't understand so basically this data gets attached to this DOM element and You can start using it inside and start templating. So if we were to do this So if we were to just do this stuff We would have recipe title recipe body and it would print this out. You have body very young and italics You know just template and this is all remember. We're not using PHP. We're not doing this is all in JavaScript so what if we had a file that had some data in it and We wanted to Theme that data just put li's around it, right? That's just li's and then we have the ID and then we have the title. How would we do that kind of with? Angular or the client side theme so we have a local data file that lives in our root directory Right, we need to get that local data file somehow, so What we could do is use a service that's provided by Angular called HTTP it just basically does a HTTP XML request it's a wrapper around that and Get which is a kind of rest action that you can get something and we're going to get a file recipes.json so we We could say scope dot recipes Get this file recipes.json and it will load it into the recipe scope and so yeah Basically, it's attaching all that file stuff all that stuff in our file those recipes to this recipe recipes which is Yeah, which is like just an array of recipes and Yeah, and then we do the same thing we did in our previous example where we attach a controller and now we can start using recipes Inside of this div or if we were declared in another div we inside of that div or if we had a different set of data We could include it on to another on another div but Like this is a cut this is like a bunch of recipes You can't just wrap HTML bunch of around a bunch of recipes in Drupal's field dot tpl You would it has a loop function in there and you do that with PHP or a twig you can do similar sort of thing Angular has a has a directive and you can kind of start to feel how this is starting to work that Let's you root loop through the different recipes. So we're gonna put the recipe ID dash Recipe name and this is all happening. This is all happening client side so Yeah, so you can Let's see. It doesn't matter if it doesn't work. Yeah, here we go. So Yeah, so you can do this on like JS Fiddle you can do this anywhere you can do on plunker you can Basically do some like live templating You know wrap wrap tags around You know our See this is dangerous to do this stuff. I'm gonna do it anyway Yeah, so yeah, that's can't really see but that's italicized now Which is cool. It's kind of like CSS live reload CSS live templating. I mean, you know just live live templing I think it's cool Yeah, and you can see all these plunkers all these links are here go through and play with them and kind of it evolves so Yes, so what we did is we use this HTTP service the main the main thing that you're getting here is that we've used This service to connect to a local file and grab this local file data and we themed it, right? but angular wants you to Put create services so you might in a typical typical theme or a typical angular app you're gonna go out and grab a bunch of data from different places so you want to organize that data in a certain way and Angular wants you to do it like this Yeah, so you just declare a service. We're calling it recipe service get recipes And you'll see why we do this later But we're just abstracting extracting it a little bit and wrapping this this this get request in the service Our own custom service then our controller will then call this service To fetch the data basically and feed it into our template or our HTML file, which is our template so Remember though that If we're gonna get some data from a Drupal Instalite or a Drupal website Drupal 8's using how Jason and I showed you with postman that you had to actually specify a header how Jason so We you can do this manually in your your get in your HTTP service but It'd be nice if every HTTP every get request that we did use the same header because we know we're gonna be Connecting to if we want to pull data from a Drupal site. We're gonna be connecting to a Drupal site So this is a way you can do that you can just say Just follow this sort of function. This is this sort of syntax This is basically how you how you would do that in the app is HTTP provider provides the HTTP service and you're just setting the header Across it and this is just this is Depending on which version of Angular use this is like a little gotcha that you may or may not have to include I'm not gonna go into it too much Let me just see what I'm at time Yeah, so here's The cool part in my opinion like getting so we can get a local file You can get some data from a local file, but what if we want to get a Drupal node? We want to get information from Drupal Let that load here. We need to Go instead of going to a local file We need to go to our Drupal site and we need to specify a node ID So here's where the service comes in handy because now we can wrap a service around it and we can specify a node ID as a argument basically and Yeah, and fetch our Drupal fetch our Drupal data so I'm gonna last here punk or hell Okay, so Here I set up a Acquia, which wasn't easy. I set up Acquia Drupal 8 site and And yeah, so this should work Yeah, so there we go I have if you go to this Drupal it's just a vanilla Bartic Drupal 8 site if you go here and it's basically gone to node one and our node whatever node I said node 11 and It's loaded up some data into a template All right Which is pretty cool, and if you follow that plunker you can let me close these so We don't have to Deal with them. I don't get lost later yeah, and I Can't believe I didn't show you this. This is my little little site that connects to a Drupal site and basically It's doing the same sort sort of thing. It's going to the Drupal site and Yeah, getting each node Yeah Yeah, so routing This is this is this is cool about these javascript NBC frameworks like you think Like how did that? How do you have different URLs on these on these? It's they're called like single-page apps. You think you go and there's just going to be one page, but actually If if we're going we have we have different pages So look at the URL the URL is changing and this is all powered by javascript How do how do we handle this? How do you how do you do that in just javascript without having a server that renders it? So this is how we do it. There's a little module that you include so angular has these little modules that you can include that Do different things one of them is called angular route you include Angular route on your in your HTML file and You go to a different you go to a route and you click on contact you click on about and The data from that route However, the logic might be Will appear just like you could think of page dot TPL like how you have a content variable and page dot TPL The data will appear in this ng view so you can think this is ng view as content The content variable on page dot TPL So how do we specify a route in our app js and the place where we put our logic? This is our index obviously and look at this you can use external templates And then you feed it the controller and the controller remember it specifies the data So yeah, we have contact about us and each one of these might specify different data sets. You could imagine having You could imagine having different Different you are different URLs Doesn't work. It doesn't matter. You could imagine having different URLs. This is local. So it's not gonna kill me Based on whatever you specify contact about us submit a recipe Arguments so one of the a key thing that we do in like Drupal theming or Drupal site building is Arguments and views contextual filters Yeah, and angular the node is just route params pretty pretty basic kind of makes sense Basically you specify you could specify a wild card In our route similar to like the percentage sign that you might use in tokens or in Drupal views To to kind of do this let's let's look some this code here. So here's our wild card When you specify your route before we're specifying like slash node or About us, but we're gonna actually specify a variable here and call it node ID And then we're gonna link it up to a template. Let's see if this thing's loaded yet So yeah, you have you can have these external templates that you can mark up data And it doesn't you don't have to do it all in one file and it just goes to that template and and marks up your data. So We have this node HTML Which might Template the node in a certain way just like the node dot TPL And we have our node control which is gonna load the data into This template so we can theme it And in our controller for this example, it's just Feeding it a node ID so we can say node one node two But if we tie all this stuff together we can create node detail pages So Remember this service we used the node ID We can tie it together In England you have to feed Independencies I want to get caught too much on you can look at the plunkers and learn how to do this stuff, but We have a route params you feed in your route params and we can use this service because it accepts a node ID and feed The node ID to the service and actually as we hit different URLs Or different node one node two node three We Load in different nodes data, how am I doing on time here? So let's Let's look at our home page. So on our home page. We have a view of of data and Each one of these views links to our node details page. So we've done our node detail page but now we need to Get a view on the home page of this data and then link it off to the node detail page And this is really cool about like Drupal 8 and Drupal 7 has this stuff too, but it's contrib This stuff's in core. So views has rest support in Core in Drupal 8 and views is in core obviously like to So you go to views Let's go to a recipe Yeah, so in this example, I mean you could render the view as a As a rendered entity and it would kind of come out in that way, but if you want some clean output You could just render some fields a title image tag body and I've had some of the stuff is metadata that I'm using and You so you select so you can add a rest export just like you could add a page or add a feed or Or add a block you add a rest export and what I've also done is I've also added a page Because the way I understand it rest likes to have one resource And then use accept headers to go to different ones. So if you go to recipes Slash recipes because that's what we're using here for a page. This is just basic Drupal gives you a listing of recipes, right? But if you go to our postman and we go to the same URL It's outputting Some data that we can theme that might look familiar that you can specify and and just and theme it out wrap tags around it and We've already done well, we know how to theme this because we already did it remember when we pulled our local our local Recipes.json that had a list of recipes We're doing that same thing here We've pulled our list of recipes and we just wrapped h2 around it and you know themed it then what we had to do to theme it so Filtering sorting and searching. So this is some of the application style stuff Some of the cool stuff Angular does and one thing that lets you do is like specify a filter. So in Drupal In Drupal We might if we're theming in Drupal, we might like have Ajax views or something like that to do some cool on-the-fly sorting But since in Angular the data is actually bound to the URL I mean to the markup We can do some sorting and it actually pulls the markup off the page if I inspect this You can just take my word for it But if I inspect it the markup just actually gets pulled rather than then hidden or you know Having it to fire a new request every time and you can you can you can make it fire a new request as well Yeah, which is pretty cool So and I'm not gonna get into the code that it takes to do that I Have you can download my if you're really interested in this in this particular filter You can download my repo that I've specified in the beginning. So this is this is pretty cool, too a custom block let's what if you have some data that you want to get out of Drupal that is not specified in The rest Ui or it's not it hasn't been by default. It's not exportable. You have some custom data Maybe it's not wrapped in an entity you want to get some data you can actually What I've done is I've created my own Endpoint by creating a custom module and Let's see here. I'll show you some example here It's just the right one. Here it is. Whoa. That's not working Go. Oh, it's just full screen. That's why full screen. That's why sorry guys Okay, so That's my reveal.js So I'm just going to show you the file structure really. Yeah, so basically created, you know rest box file Rest blocks module that kind of extends it follows DB log resource. So If you look at DB log resource I'm like it would get too advanced kind of if you're extending classes and stuff go look at like Functional program is crazy for me to get get this stuff, but I figured it out somehow if you look at this DB log resource It's in core It's in the rest module. You can look on how to extend and get your own custom data but basically what I've done is I've been it created the ability to Get a block out of Drupal. So if you go into our Drupal site and you Go to if I've just linked it up with this featured I didn't go and create a new theme you could create a new theme that mirrors your your old thing That your your client side theme But if I were to take this block out a featured because it's linked up and save it Then it should just go away and if I put it back. Oh, no it doesn't I'm terrible That's because it's connected to my my Internet theme cool anyway, it goes away trust me if you if you move it out So you can you can create a theme that does that and create some service it does that Anyway, so some more stuff around your Drupal client side stuff Posting editing and authentication. So I didn't do it. You can do some post stuff So you can actually post data back if you look at If you look at Klausian link Clark's theme Presentation you can actually post nodes back so you can have people do at some editing in your theme and or your app And you can post actually post data back into Drupal There's some cool angular Modules that lead you some live editing and stuff So I've really talked up this client side theme I don't know if I you know I see you do all this client side beaming and stuff I wouldn't actually use any of this stuff in production This is just so you can get an idea around How you might want to do some of this theming on the client side If you go to this link here, you can see a reason a company that had a very content heavy website and They didn't want to use that they had listed some reasons why they didn't want to use angular For the content of your website if you have an app if you're building some sort of JavaScript app It might make more sense or if you're building a really simple theme I'm gonna, you know, definitely try to try to do it. I use it So routing remember when we're changing all the URLs and stuff now. I'm not looking code. I can look at all of you SEO like how does Google go to the website and like crawl these different URLs in the past They used what was called like hash bang URLs, which was like anchors and made them appear in a way that was That looked like it was going to different pages, but with the HTML 5 history API they were able to kind of Make it look like you're going to different URLs by messing with that Google is now reading Some of these URLs. I think discourse which is an ember app, which is similar to angular Their site is being crawled by Google Without having to do anything extra, but Google has a whole page on how you might want to implement an SEO strategy There's also service called prerender.io, which will like look at your Drupal free theme I that's what I call it for themers, you know, but it's your app your JavaScript app and And kind of make SEO sense out of it, but you could also what about Google analytics? I mean, how does Google analytics know know what URL people are going to and what have you and it's kind of funny Because Google's behind angular you think they would have some solutions for that Learning curves, so there's you beat some learning curves by not having to install Drupal not having to do Yeah, not having to do not having to Install lamp and having to do any of all the stuff, but you there's more learning curves Obviously some of that JavaScript if you're not familiar with JavaScript might be a little bit too much for people to understand Might be a little bit crazy. I don't know I'm not a JavaScript guy as you could probably tell and I kind of Figured it out all those plunkers and you should be able to figure out as far as I got Yeah, the as far as the client side templating is concerned Like yeah Drupal all those classes and markup that Drupal puts in there they put in there for a reason It's contra code people we have those in there So we can map our classes to Drupal logic and a lot of times it makes sense and it helps us and a lot of Times they put stuff in there for accessibility that maybe if you're not a front-end developer you might not know and It might be yeah, you might you might not want to Strip all of the Drupal markup out of out of out of your site And that's what you do when you do this client-side theme say goodbye to twigs say goodbye to all of Drupal's theme layer stuff you're getting the data out raw and There's no help there by any and hopefully maybe one day they have some more Contrib stuff that helps you deal with some of the Drupal data. You might get out of out of a Drupal site And there's a whole like client-side Movement as well for for this sort of stuff, but not now So thanks everyone Twitter that's my Twitter You can get the slides There's a client repo if you want to download any of the examples, so I wasn't facing you I didn't realize that that wouldn't have been a problem that was going to be a problem But I'm glad I got to kind of highlight code and stuff and show you Thank you everyone. Appreciate it Any any any questions you can come up or if you want actually probably have time if you want to ask them You can go or you can yeah, you ask me and I'll repeat it So this guy I don't I think he's here Vladimir from technocrat he did this in in Drupal South. He did a session on Bootstrap and stuff and at the end he had this angular site and I thought it was cool And that's why I wanted to do it wasn't like a business use case or anything, but I'm sure there is Around that any anybody else? Yeah. Yes, sir So that was my use case. Yeah You can yell it out or I'll repeat or come over here So I think their main objection was oh Yes, sorry. Sorry first time speaker here He wanted to know what some of the objections were from the site that Wanted to use angular on and I'm a cheat here On on what we're using angular on a content-heavy site So one thing was SEO obviously which they've beginning this all this was written a little while ago and the Twitter Previews like you can't pull in some of the social networking previews which you can you can specify metadata metadata and do that So I don't agree with this Yeah, stats and monitoring analytics that kind of address that the build tools around front-end I think they're easier to use than the build tools around back-end stuff. We're using thing at work and I go crazy Yeah, and then testing which I didn't do angular is really big on testing I didn't do any testing with us which is bad But hopefully if you're using something like angular, there's a whole you're abstracting everything and we can as front-end developers Maybe you can start writing tests because I don't write. I mean, I'm I don't write Doesn't who writes test run? I'm sure there are people who do it really good, but I don't so Unfortunately, maybe if I start writing apps and cool themes and stuff. I will though Anybody else yeah That's loud thank you for the talk. Yeah. Yes. So my question is you made a Custom module that has a rest endpoint Yeah, I can show I can show you that yeah And the question is how do you make that appear on the list of rest resources? It does it so you extend the cool thing like this is me learning like I'm not I'm a front-end developer But I did it challenge myself. It's it's all the entities are kind of done in the same way So the way the serialization and the rest stuff happens You can extend the entity and in a similar sort of way and it just creates it for you specify it in the docs I could show you the code It's it's pretty straightforward if you look at DB log resource and that's a guy at work told me to do that Lee Rollins Who's really he's a good Drupal contributor. He told me use DB log resource check that out And you won't you'll be able to do it for sure anyone else Answered my question, but I've got a quick comment Brian Hirsch from the White House web team Yeah, I maintain the petitions destroy that you nice. Yeah. Yeah So you mentioned rest and you know for people who are trying to get into stuff and learn rest Roy Fielding's dissertation on rest is not really easy to read and You know We have found more and more as we're dealing with these apis that you know restful Interfaces are just super important for user experience and developer experience So we made a two-pager that's sort of like accessible for project managers and non-technical people and rest if it's helpful for other folks github.com slash White House slash API dash standards I'll put it in my slides and upload it. I actually saw that when I was checking that out Yeah, cool because it's really hard like if you start say we start building sites like this It's like where does a lot like how is the data coming out like how is it separated? It's a lot of stuff that back-end developers hopefully are gonna have to have to think about and I mean But that that web that standards he's talking about actually has some good ideas around how to do that Thank you. All right, so I know you're a theme or so you may or may not know this one But I'm wondering how authentication is handled as far as in this particular example, you know The user was anonymous, so you just went grab the deal. No issues But what about protected data where only certain roles or permissions, you know Would be able to see these recipes. How do you on the angular side? Yeah, then Authenticate that person to see the you know, so there's different levels of Authentication you if you start if you just set this up you'll struggle with it and will force you to learn how to do it Right, so the first step is that cookie authentication, which basically just checks your Drupal cookie similar And then lets you pull based on what what cookie you have and that's not that mean that on the client side You wouldn't be able to see the node on the client side But if you can't see the node then you can kind of access that data But if you're pulling it from a from a client side theme it it might not make sense But there's basic authentication with I think hashed the password or something and then there's OAuth now OAuth is the way that You know applications, you know do it so but yeah, like I see I'm a theme or so I haven't Okay, so delved in is a Possibility and it's a good there's a Drupal contract There's a good contrary module that makes dealing with OAuth easy But basically you just select OAuth and then on your client theme You would just put some some passwords and some keys in and then then when you make the request from the client Nobody else will be able to do it. Gotcha. Okay. Thank you. I've yet to play you know on this topic of Not using it for really big sites It seems like accessibility would be one of the major issues with it too because you know the big thing for the responsive community is Making sure that you know if JavaScript breaks you should still be able to access the content This is kind of wipe all that it seems like it would I mean once the content has been rendered I mean you can see I watched I went to JSConf in Melbourne and they had Web components and accessibility and accessibility and the shadow DOM and stuff and the main takeaway I got from that is that Yeah, like You that that stuff will be accessible once the HTML has been rendered on the page You can there's keyboard accessibility and your markup stays you know it's is is Accessible basically what do you have any particular accessibility concerns besides like keyboard accessibility or yeah Mostly like JavaScript breaking. It's usually not JavaScript is not turned on people don't do that anymore Yeah, that is not a mix actually. That's not an ex. I build government sites and if you look at WCAG JavaScript not being turned on is no longer. I mean as far as to tell me if I'm wrong But it's usually a JavaScript breaks or the external script breaks So you need to have testing I would think if you're gonna be Doing a lot of JavaScript heavy stuff and you want to make sure that your test to have a test that test If your JavaScript is broken that way you don't push code that breaks. Okay, cool. That's what I would imagine Thank you. Yes Is that good all right and Was me facing the screen really bad or was it good fine cool You can speaker assessment Give me give me you know give me ease because this is my first time so thank you appreciate it